TypeError: undefined is not an object (evaluating '_reactNative.Stack.Navigator')

Question

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, Stack } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; a
import { Ionicons, AntDesign } from '@react-navigation/native';

import { Icon } from 'react-native-elements'
import 'react-native-gesture-handler';
import Header from "./components/header.js"
import LoadingScreen from './screens/LoadingScreen';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import FirebaseKeys from './Config'

import MessageScreen from './screens/MessageScreen';
import ProfileScreen from './screens/ProfileScreen';
import PostScreen from './screens/PostScreen';
import NotificationScreen from './screens/NotificationScreen';

import * as firebase from 'firebase';

var firebaseConfig = FirebaseKeys
firebase.initializeApp(firebaseConfig);

export default function App() {

    if (this.isLoading) {
        return <LoadingScreen />;
    }

    return (
        <Stack.Navigator>
            {this.state.userToken == null ? (
                // No token found, user isn't signed in
                <>
                    <Stack.Screen name="Login" component={LoginScreen} options={{
                        title: 'Login',
                        // When logging out, a pop animation feels intuitive
                        // You can remove this if you want the default 'push' animation
                        animationTypeForReplace: this.state.isSignout ? 'pop' : 'push',
                    }}
                    />
                    <Stack.Screen name="SignUp" component={SignUpScreen} />
                </>
            ) : (
                    // User is signed in
                    <>
                        <Stack.Screen name="Home" component={HomeScreen} />
                        <Stack.Screen name="Post" component={PostScreen} />
                        <Stack.Screen name="Message" component={MessageScreen} />
                        <Stack.Screen name="Notification" component={NotificationScreen} />
                        <Stack.Screen name="Profile" component={ProfileScreen} />
                    </>
                )}
        </Stack.Navigator>
    );
}

I tried everything to see if the code works, but I don't even understand the error any solutions? I think it is because of react navigation 4 or something but it is sorta confusing. I got all this information directly from the documentation too, so I don't see what the problem here is.

user2243481 · Accepted Answer · 2020-05-05 01:57:18Z

First, you need to wrap the whole app in

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

Next you need to create a stack navigator component

const Stack = createStackNavigator();

Then add screens to the Stack and enclose it in Navigation Container

   <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>

Your code should look something like this :

const AuthScreens = ()  => {
     <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} options={{
           title: 'Login',
           animationTypeForReplace: this.state.isSignout ? 'pop' : 'push',
           }}
         />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
     </Stack.Navigator>
}

const HomeScreens = ()  => {
     <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Post" component={PostScreen} />
        <Stack.Screen name="Message" component={MessageScreen} />
        <Stack.Screen name="Notification" component={NotificationScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
     </Stack.Navigator>
}

<NavigationContainer>
    {this.state.userToken == null ? AuthScreens : HomeScreens}
</NavigationContainer>

Collectives™ on Stack Overflow

TypeError: undefined is not an object (evaluating '_reactNative.Stack.Navigator')

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related