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

Seems like something wrong with your code formatting, it works well when the code if formatted — Guruparan Giritharan, Jun 21 '20 at 05:07
I am facing same issue as yours. your code is okay, all you need is to restart (build) the app from the beginning. it works for me.. — Mang Jojot, Aug 07 '22 at 13:19

score 11 · Answer 1 · answered Nov 01 '20 at 17:58

11

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

answered Nov 01 '20 at 17:58

S R Chaitanya

738
7
11

score 8 · Answer 2 · answered Jun 21 '20 at 06:12

Please check your code whenever writing check the tags and spaces and keep your tags in the same line as much as possible if you are using Visual studio use formatters and autocomplete tags which will help you in solving problems. your code should be as follows:

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>
        </View>
    );
}

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

For some reason mine only works with this syntax, and your barebones HomeScreen component is great for debugging. I ended up pasting in your code and filling in with my own. — Mote Zart, Aug 26 '21 at 17:59

Mohan Murugesan · Answer 3 · 2022-01-08T16:09:42.060

8

When creating a new navigator, try rebuilding the application. This solved the problem for me

Reset the metro cache

npm start -- --reset-cache

Run on android

npx react-native run-android

Run on iOS

npx react-native run-ios

edited Jan 08 '22 at 16:09

answered Aug 11 '21 at 02:33

Mohan Murugesan

246
3
8

npx react-native run-android -- a typo i think. – sami ullah Oct 07 '21 at 15:14

score 6 · Answer 4 · answered Jun 21 '20 at 05:20

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.

This was kind of it for me. I had pasted the Name of a component at the end of my JSX, that I forgot to comment-out or delete after. — SeanMC, Feb 07 '22 at 02:52

score 5 · Answer 5 · answered Sep 28 '20 at 05:38

5

Just build again. npx react-native run-android

answered Sep 28 '20 at 05:38

sanister

330
6
11

Dálcio Macuete Garcia · Answer 6 · 2021-01-18T21:35:02.413

2

import 'react-native-gesture-handler';

add import 'react-native-gesture-handler'; at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as App.js or App.jsx or App.ts or App.tsx. I prefer App insted index

if not add in index too

enjoy

edited Jan 18 '21 at 21:35

answered Jan 18 '21 at 21:01

Dálcio Macuete Garcia

793
7
10

score 1 · Answer 7 · answered Jan 29 '22 at 08:00

Verify if you added this in your MainActivity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

Import this on the top of your MainActivity class: import android.os.Bundle;

Also, Every time you install a new package in react-native, always rebuild your project.

Kill(Delete) all the running Terminal and then,

Start App:

npx react-native start

Run Android:

npx react-native run-android

score 1 · Answer 8 · answered Jul 04 '22 at 06:50

For me the error was because I used comments in my Stack Navigator, by removing the comments the error was solved.

From:

<Stack.Navigator>
  <Stack.Screen name="User" component={User} />    {/* Some Comment */}
</Stack.Navigator>

To:

<Stack.Navigator>
   <Stack.Screen name="User" component={User} />   
</Stack.Navigator>

score 0 · Answer 9 · answered Nov 02 '21 at 01:22

No solution? Install the latest react-native-screens package. (current version is 3.9.0 in 11.2021)

npm i react-native-screens

for ios

cd ios && rm -rf Pods && pod install && cd ..

I recommend a restart with cache clean option

npm start -- --reset-cache

score 0 · Answer 10 · answered Nov 18 '21 at 12:49

0

For those using expo you can run to clear the cache which was the reason it didn't work for me

expo start -c

answered Nov 18 '21 at 12:49

Greko2015 GuFn

512
6
13

score 0 · Answer 11 · answered May 14 '23 at 18:41

0

Faced similar issue, I just had to restart the expo server.

answered May 14 '23 at 18:41

tahnoon

133
1
14

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

11 Answers11

import 'react-native-gesture-handler';

if not add in index too

enjoy

Linked