CODEWITHSUNDEEP
javascriptreact-nativereact-navigationreact-native-navigation
Alejandro Torrico Moreno
Alejandro Torrico Moreno

Reputation: 141

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

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

Upvotes: 14

Views: 43663

Answers (11)

Muhib Al Hasan
Muhib Al Hasan

Reputation: 302

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

Upvotes: 0

Shaz
Shaz

Reputation: 41

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>

Upvotes: 4

Anurag Dhote
Anurag Dhote

Reputation: 537

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

Upvotes: 1

Mohan Murugesan
Mohan Murugesan

Reputation: 276

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

Upvotes: 8

Greko2015 GuFn
Greko2015 GuFn

Reputation: 589

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

expo start -c

Upvotes: 0

Serdar D.
Serdar D.

Reputation: 3391

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

Upvotes: 1

D&#225;lcio Macuete Garcia
D&#225;lcio Macuete Garcia

Reputation: 1049

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

Upvotes: 2

S R Chaitanya
S R Chaitanya

Reputation: 748

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

Upvotes: 11

sanister
sanister

Reputation: 430

Just build again. npx react-native run-android

Upvotes: 5

Sai Ranjit Tummalapalli
Sai Ranjit Tummalapalli

Reputation: 89

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

Upvotes: 8

Nick Alves
Nick Alves

Reputation: 374

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.

Upvotes: 7

Related Questions