Unable to logout on react native app with nested navigators?

Question

I am having issues logging out on react native. I assume it has to to with my navigation nesting, here is my App.js:

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();




export default class App extends React.Component {

  state = {
    loggedIn: false
  }

  // componentDidMount() {
  //   Firebase.auth().onAuthStateChanged((user) => {
  //     if (user) {
  //       this.setState({ loggedIn: true })
  //     } else {
  //       this.setState({ loggedIn: false })
  //     }
  //   })
  // }

  render() {
    return (
      <Provider store = {store}>
        <NavigationContainer>
    
          <Stack.Navigator headerMode="none" initialRouteName="Login">
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Signup" component={Signup} />
            <Stack.Screen name="Tabs" component={Tabs} />
          </Stack.Navigator>
  
        </NavigationContainer>
      </Provider>
  
      
    );
  } 
}

function Tabs() {
  return (

    <Tab.Navigator
    initialRouteName="Home"
    activeColor="#161F3D"
    inactiveColor="#B8BBC4">

      <Tab.Screen 
        name="Home" 
        component={Home} 
        // options={{
        //   tabBarIcon: <Icon name="home" size={24} />
        // }}
      />

      <Tab.Screen 
        name="Leaderboard" 
        component={Leaderboard} 
        // options={{
        //   tabBarIcon= <Icon name="trophy" size={24} />
        // }}
      />

      <Tab.Screen 
        name="Create" 
        component={Create} 
        // options={{
        //   tabBarIcon= <Icon name="add" size={40} />
        // }}
      />

      <Tab.Screen 
        name="Notifications" 
        component={Notification} 
        // options={{
        //   tabBarIcon= <Icon name="notifications-circle-outline" size={24} />
        // }}
      />

      <Tab.Screen 
        name="Profile"
        component={Profile}
        // options={{
        //   tabBarIcon= <Icon name="person" size={24} />
        // }} 
      />

    </Tab.Navigator>


    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

As you can see, I have my auth (login and signup) as two routes, then I pass "tabs" as another route. My tabs navigator contains the profile page, where I have a log out button. Profile page:

class Profile extends React.Component {
    
    constructor(props) {
        super(props)
        this.state = {
            user: this.props.user
        }
        
    }
    
    logOut() {
        try {
            // this.props.clearUser()
            Firebase.auth()
            .signOut()
            .then(() => this.props.navigation.navigate('Login'))
           
       }
       catch(error) {
           console.log(error);
       }
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity 
                    onPress={this.logOut}>
                    <Text>Sign out 🤷 {this.state.user.username}</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(Profile);

When I click the sign out button on my profile page, I get this error:

undefined is not an object (evaluating '_this2.props')

So I assume my profile page does not have access to navigation. There are a bunch of questions that have been asked about the error, and after trying 10 of them I have not been able to solve my issue. How can I access navigation within my tabs navigator so that when I press a button like logout, it redirects to the login screen?

Answer 1

Change your logout function to an arrow function that it will have access to 'this'

logOut=()=> {
    try {
        // this.props.clearUser()
        Firebase.auth()
        .signOut()
        .then(() => this.props.navigation.navigate('Login'))
       
   }
   catch(error) {
       console.log(error);
   }
}