React Native : my component isn't detected as a component-CodePudding

I'm started with React Native and try to use the navigation between screns. To do so I creat a component Navigation but when I want to use it this error show up :

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

It appear to be the component AppNavigator that is the issue

I tried :

checked all my exports and import and for me their is no problems
change my const component in a function component but nothing do the trick.

Can you help me ?

App.js :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppNavigator from './components/navigation';

function App() {
  return (
    <View>
      <AppNavigator />
    </View>
  );
}


/*const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});*/

export default App;

Navigation.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigatorContainer } from '@react-navigation/native';
import Localisation from './localisation';
import Home from './home';

const { Navigator, Screen } = createStackNavigator()

const AppNavigator = () => (
  <NavigatorContainer>
    <Navigator  initialRouteName="Home">
      <Screen options={{headerShown: false}} name="Home" component={Home} />
    </Navigator>
  </NavigatorContainer>
 
)

export default AppNavigator;

CodePudding user response：

There is no component named NavigatorContainer in react-navigation/native. The component is called NavigationContainer.

Hence, the following should fix the issue.

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Localisation from './localisation';
import Home from './home';

const { Navigator, Screen } = createStackNavigator()

const AppNavigator = () => (
  <NavigationContainer>
    <Navigator  initialRouteName="Home">
      <Screen options={{headerShown: false}} name="Home" component={Home} />
    </Navigator>
  </NavigationContainer>
 
)

export default AppNavigator;