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 will understand why such error comes up and what can be done to avoid it.

Here is the code that gives us the error −

Example

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 −

The display of error on your phone screen is as follows −

Reasons for the Error − 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.

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. You will encounter this error mostly in those cases.

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

Example

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;

Shilpa S

Updated on 01-Jul-2021 08:45:25

• Related Questions & Answers
• How to handle Null values while working with JDBC?
• How to handle Exceptions while working with JDBC applications?
• How to handle touches in ReactNative?
• How to handle the errors generated while deserializing a JSON in Java?
• How to handle Geolocation errors in HTML5?
• How to handle errors in HTML5 Web Workers?
• How to handle errors within WaitGroups in Golang?
• How to handle errors in middleware C# Asp.net Core?
• How can MySQL handle the errors during trigger execution?
• How to handle navigation from one page to another in react native?
• How to stay safe online while working remotely?
• How to work with Alerts Dialog box in ReactNative?
• In MySQL, how can we declare a handler while handling errors?
• How to show ProgressBar in ReactNative?
• How to display dropdown in ReactNative?