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

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