I'm trying to use react-native navigation. I installed the app, everything went alright. Now I'm having this problem with Expo when I try and create a navigation in both ios and web:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of
ExpoRoot.
registerRootComponent
11 | AppRegistry.registerComponent('main', () => withExpoRoot(component));
12 | if (Platform.OS === 'web') {
13 | const rootTag = document.getElementById('root') ?? document.getElementById('main');
> 14 | AppRegistry.runApplication('main', { rootTag });
15 | }
16 | }
17 |
Heres my App.js
import { Routes } from './src/Routes';
export default Routes;
Routes
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text } from 'react-native';
const Stack = createStackNavigator();
function Home() {
return (
<View>
<Text>Some text!</Text>
</View>
)
}
function Routes() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Home' component={Home}/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default Routes;
I'm just following a tutorial here
The app still runs if I use this as my App.js:
import {useEffect} from 'react';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import socket from './socektConfig';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});