React Native Error (Invalid Element Type)

when starting my App on my iOS device I get this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but gor: 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 ‘App’.

This error is located at:
  in App (created by ExpoRoot)
  in RNCAppearanceProvider (at src/index.tsx:70)
  in AppearanceProvider (created by ExpoRoot)
  in ExpoRoot (at renderApplication.js:45)
  in RCTView (at AppContainer.js:109)
  in DevAppContainer (at AppContainer.js:124)
  in RCTView (at AppContainer.js:135)
  in AppContainer (at renderApplication.js:39)

When this is my App.js:

import * as React from "react";
import { View, Text, Button, Alert } from "react-native";
import {
  NavigationContainer,
  createDrawerNavigator,
} from "@react-navigation/drawer";

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Move to the Details Page"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Button title="Go back to the Home" onPress={() => navigation.goBack()} />
    </View>
  );
}

// Drawer navigation:
const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Details" component={DetailsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Since I am not using a class the statement “Check the render method of App.” shouldn’t be be useful to me.. I googled a bit and found out that, as a common error in React Native, can be resolved by adjusting imports and exports but unfortunately it didn’t worked for me.

Answer

You are bad importing NavigationContainer, for avoid types problem I recommend typescript 🙂

import { NavigationContainer } from '@react-navigation/native';

Advertisement

Answer