CODEWITHSUNDEEP
reactjsreact-nativereact-navigationexporeact-native-navigation
Jeff Pernia
Jeff Pernia

Reputation: 79

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

im trying to follow a youtube video regarding React Navigation v5 but im stumbling in this problem. i saw similar questions on StackOverflow but the answers provided havent help maybe im missing something. im using Expo v- 3.17.11

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Routes from "./src/Routes"

export default class App extends React.Component{
  render(){
    return(
      <View>
        <Routes/>
      </View>
    )
  }
}

Routes.js

import React from 'react'
import {createStackNavigator} from "@react-navigation/stack"
import {NagivationContainer} from "@react-navigation/native"
import {SignIn,CreateAccount} from "../Screen/screens"

const Stack = createStackNavigator();

const Routes = () => {
    return (
      <NagivationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Sign-in" component={SignIn}/>
          <Stack.Screen name="Sign-in" component={CreateAccount}/>
        </Stack.Navigator>
      </NagivationContainer>
    );
  }
  export default Routes;

Screens.js

import React from 'react';
import { View,Text,StyleSheet,Button } from "react-native";

export const SignIn =({navigation}) => {
    return(
    <View>
        <Text>login screen</Text>
        <Button title="Sign-In" onPress={() => alert("TODO!!")}/>
        <Button title="Create an Account" onPress={() => navigation.push("CreateAccount")}/>
    </View>
    )
}

export const CreateAccount= () =>{
    return(
        <ScreenContainer>
            <Text>Create Account Screen</Text>
            <Button title="Sign-Up" onPress={() => alert("todo!")}/>
        </ScreenContainer>
    );
}

i checked my import statements already and used Import{Routes} and import Routes but hasnt worked. not sure what else to try.

the error says 

Check the render method of 'Routes'
In Routes (at App.js:9)

Upvotes: 0

Views: 1447

Answers (1)

Jeff Pernia
Jeff Pernia

Reputation: 79

Wow , what a waste of a question. idk if i should delete my post. The error was a typo

i put <NagivationContainer/> instead of <NavigationContainer/> sorry to anyone who saw this mess

Upvotes: 1

Related Questions