Expo: Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'props.navigation')]

Question

I have been working on React Native and I am getting this error any help will be appreciable!

My App.js Screen

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

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

My HomeScreen.js Screen

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, ActivityIndicator, Image,View,Text } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
import AsyncStorage from '@react-native-async-storage/async-storage';
// <View style={styles.container}>
const HomeScreen=(props)=> {
    const logout =(props)=>{
        AsyncStorage.removeItem("token").then(()=>{
          props.navigation.replace("login")
        })
     }

    return (
        <View style={styles.container}>
        <Text> Your Email is XYZ </Text>
        <Button
          style={styles.btnStyle}
          mode="contained"
          onPress={() => logout()}
        >
          LOG OUT
        </Button>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        fontSize:18,
        justifyContent: 'center',
    },
    btnStyle: {
        marginLeft: 18,
        marginRight: 18,
        marginTop: 30,
        backgroundColor: "black",
        textShadowColor: "white",
        borderRadius: 35,
    },
  
});

export default HomeScreen;

My AppNavigator.js

import React, { useEffect, useState } 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";
import AsyncStorage from '@react-native-async-storage/async-storage';
const Stack = createStackNavigator();

function AppNavigator() {
  const [isLoggedin, setLogged] = useState(null)
  useEffect(() => {
    const token = AsyncStorage.getItem('token')
    if (token) {
      setLogged(true)
    }
    else {
      setLogged(false)
    }
  }, [])
  return (
    <Stack.Navigator
      headerMode="none"
      screenOptions={{
        headerStyle: { elevation: 0 },
        cardStyle: { backgroundColor: '#fff' }
      }}
    >


      <Stack.Screen name="loading" component={LoadingScreen}></Stack.Screen>
      <Stack.Screen name="home" component={HomeScreen}></Stack.Screen>

      <Stack.Screen name="login" component={LoginScreen}></Stack.Screen>
      <Stack.Screen name="signup" component={SignUp}></Stack.Screen>


    </Stack.Navigator>
  );
}

export default AppNavigator;

The error I am getting is

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'props.navigation')] at screens\HomeScreen.js:9:8 in logout 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

Kartikey Kartikey · Accepted Answer · 2021-05-01T09:46:36

In your HomeScreen.js change your Logout function to this -

  const logout = () => { // You were passing a props variable here that was undefined..
    AsyncStorage.removeItem('token').then(() => {
      props.navigation.replace('login');
    });
  };

Check out this Snack that I created... Just to show you the implementation

I would also suggest you to not restore token in your AppNavigator.js. Instead you should install expo-app-loading and restore your token inside your App.js

And also, its not a good practice to perform async operations inside a useEffect.. Check out the Snack link above for how you should implement it.. I've created a somewhat clone of it..Have a look

Expo: Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'props.navigation')]

2 Answers