Error: A navigator can only contain 'Screen' components as its direct children

Question

I am new to React Native and I am getting this error, but I am not able to resolve it.

I am following the tutorial from the main react-navigation page, but I am not able to complete it.

I will appreciate any help. Thanks!

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

function HomeScreen() {
    return ( <
        View style = {
            { flex: 1, alignItems: 'center', justifyContent: 'center' }
        } >
        <
        Text > Home Screen < /Text> < /
        View >
    );
}

const Stack = createStackNavigator();
export default function App() {
    return ( <
        NavigationContainer >
        <
        Stack.Navigator >
        <
        Stack.Screen name = "Home"
        component = { HomeScreen }
        /> < /
        Stack.Navigator > < /NavigationContainer >
    );
}

Screenshoot error

Answer 1

There is one extra space at the end of some of your components. Putting your code in my IDE and using ESLint for formatting it, this is what I got:

import React from 'react'
import { Text, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text> Home Screen </Text>{' '} // <--- right here
    </View>
  )
}

const Stack = createStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />{' '} // <--- right here
      </Stack.Navigator>{' '} // <--- right here
    </NavigationContainer>
  )
}

You can see some {' '} in there. These are extra blank spaces that shouldn't be there. This is what your error is saying, a ' ' was found after the Stack.Screen. Removing these empty spaces should solve your problem.

By the way, I would highly recommend you to use a JS IDE (if you are not using any) and a linter, like ESLint. indentation is a very crucial thing to either avoid this kind of bugs and to let your code more legible.

Answer 2

I faced similar issue. Turned out that I was using small-case like this : <Stack.screen> instead of <Stack.Screen>