Expo React Native Error: Element type is invalid: Expected a string (for built-in components)

Question

I am beginner at React Native so I am using Expo and trying to add React Navigation Bar. I am keeping on getting this error however I am exporting App.js

import React from 'react';
import { StyleSheet } from 'react-native';
import {NavigationNativeContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack"

import SignUp from "./screens/SignupScreen"
import LoginScreen from "./screens/LoginScreen"
import LoadingScreen from "./screens/LoadingScreen"
import HomeScreen from "./screens/HomeScreen"

const Stack = createStackNavigator();

// <View style={styles.container}>
export default function App() {
  return (
    <NavigationNativeContainer>
      <Stack.Navigator>
        <Stack.Screen name="signup" component={SignUp}>
        </Stack.Screen>
        <Stack.Screen name="login" component={LoginScreen}>
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationNativeContainer>

  );
}

THE COMPONENT WHICH I AM TRYING TO USE IS FOR EXAMPLE LOGINSCREE.JS BELOW IS THE CODE

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, KeyboardAvoidingView, Image } from 'react-native';
import { Button, TextInput } from 'react-native-paper';


// <View style={styles.container}>
export default function LoginScreen(props) {
    return (
        <>
            <KeyboardAvoidingView behavior="position">

                <StatusBar style="light" backgroundColor="black" barStyle="light-content" />
                <Image style={styles.logoStyle} source={require('../assets/logoBlack.png')} />


                <Text style={styles.subIntro}>Proceed with your</Text>
                <Text style={styles.intro}> Login</Text>


                <TextInput style={styles.textInpStyle} theme={{ colors: { primary: "red" } }}
                    underlineColor=""

                    label="Email" mode="flat" />
                <TextInput style={styles.textInpStyle} theme={{ colors: { primary: "red" } }}
                    label="Password" mode="flat" />
                <Button style={styles.btnStyle} mode="contained" onPress={() => console.log('Pressed')}>
                    SIGN IN
  </Button>
                <TouchableOpacity>
                    <Text  onPress={()=>props.navigation.navigate("signup")}  style={styles.subText} >I'm a new user <Text style={styles.spIn}> Sign Up</Text> </Text>
                </TouchableOpacity>

            </KeyboardAvoidingView>

        </>
    );
}

THE ERROR I GET IS

**Error: Element 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 App.

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue**

Answer 1

This should work

Replace App.js with following code :

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import AppNavigator from "./navigation/AppNavigator";

export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

Replace LoginScreen.js with this code :

import { StatusBar } from "expo-status-bar";
import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  KeyboardAvoidingView,
  Image,
} from "react-native";
import { Button, TextInput } from "react-native-paper";

function LoginScreen(props) {
  return (
    <>
      <KeyboardAvoidingView behavior="position">
        <StatusBar
          style="light"
          backgroundColor="black"
          barStyle="light-content"
        />
        <Image
          style={styles.logoStyle}
          source={require("../assets/logoBlack.png")}
        />

        <Text style={styles.subIntro}>Proceed with your</Text>
        <Text style={styles.intro}> Login</Text>

        <TextInput
          style={styles.textInpStyle}
          theme={{ colors: { primary: "red" } }}
          underlineColor=""
          label="Email"
          mode="flat"
        />
        <TextInput
          style={styles.textInpStyle}
          theme={{ colors: { primary: "red" } }}
          label="Password"
          mode="flat"
        />
        <Button
          style={styles.btnStyle}
          mode="contained"
          onPress={() => console.log("Pressed")}
        >
          SIGN IN
        </Button>
        <TouchableOpacity>
          <Text
            onPress={() => props.navigation.navigate("signup")}
            style={styles.subText}
          >
            I'm a new user <Text style={styles.spIn}> Sign Up</Text>{" "}
          </Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    </>
  );
}

export default LoginScreen;

const styles = StyleSheet.create({
  container: {},
});

Then Create a Folder called navigation where you App.js is located Then Inside navigation folder create a file called AppNavigator.js Then inside AppNavigator.js paste this code :

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import SignUp from "./screens/SignupScreen";
import LoginScreen from "./screens/LoginScreen";
import LoadingScreen from "./screens/LoadingScreen";
import HomeScreen from "./screens/HomeScreen";

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="signup" component={SignUp}></Stack.Screen>
      <Stack.Screen name="login" component={LoginScreen}></Stack.Screen>
    </Stack.Navigator>
  );
}

export default AppNavigator;