Check the render method of `ExpoRootComponent`

Viewed 4492

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',
  },
});
1 Answers

Change

import { Routes } from './src/Routes';

to

import Routes from './src/Routes';

You have done a default export so you should import like this

Also in App.js do this

export default function App() {
  return (
    <Routes/>
  );
}
Related