How to handle errors while working with Navigation in ReactNative?

Problem: How to handle the error "A navigator can only contain 'Screen' components as its direct children" while working with Navigation in ReactNative?

Solution

While working on your app you may come across issues like stated above. Here we'll understand why such error comes up and what can be done to avoid it.

Here is the code that gives us the error:

Example with Error

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';

const Stack = createStackNavigator();

const HomePage = ({ navigation }) => {
  return (
    <Button title="Click Here" onPress={() => navigation.navigate('About',
    { name: 'About Page' })}/>
  );
};

const AboutPage = () => {
  return <Text>You have reached inside About Page!</Text>;
};

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomePage}
          options={{ title: 'From home page : Navigation' }}
          />
        <Stack.Screen name="About" component={AboutPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MyStack;

The error displayed is as follows in your command prompt while compiling:

Reasons for the Error

1. Improper Indentation: A navigator can only contain 'Screen' components as its direct children. The first cause for the error is because of bad indentation. It is very necessary that each component is indented properly. The child elements are indented properly inside the parent component.

2. Extra Whitespace: The second case is because of spaces left at the end of each component. Remove the spaces from the end of the screen and compile again. It will work fine. Please be careful when copy pasting the code from another source.

3. Invalid Children: Make sure you're not accidentally placing other React components directly inside Stack.Navigator. Only Stack.Screen components should be direct children.

Corrected Code

Let us now indent the above code and also remove spaces if any. Here is the final code:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';

const Stack = createStackNavigator();

const HomePage = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button 
        title="Click Here" 
        onPress={() => navigation.navigate('About', { name: 'About Page' })}
      />
    </View>
  );
};

const AboutPage = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>You have reached inside About Page!</Text>
    </View>
  );
};

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={HomePage} 
          options={{ title: 'From home page : Navigation' }} 
        />
        <Stack.Screen 
          name="About" 
          component={AboutPage} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MyStack;

Key Points to Remember

• Only Stack.Screen components should be direct children of Stack.Navigator
• Ensure proper indentation and remove trailing whitespace
• Wrap your component content in proper container views
• Always validate your JSX structure when copy-pasting code

Conclusion

This navigation error typically occurs due to improper indentation, trailing whitespace, or invalid children in Navigator components. Following proper JSX structure and code formatting will resolve this issue.