undefined is not an object (evaluating 'this.props.navigation') - React Native

Megan Yap :

undefined is not an object (evaluating 'this.props.navigation')

I keep on getting this error, and I can't figure out what's wrong with my code. The program is meant to check if the user is logged in, and if they aren't, they are directed to the Sign Up page. However, it doesn't seem to work. Could anybody tell me what is wrong?

Loading Screen:

import React, {Component} from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native'

import firebase from 'firebase'

export default class Loading extends React.Component{
  componentDidMount() {
    firebase.auth().onAuthStateChanged(function(user) {
      console.log(user)
      if (user) {
        console.log('user is signed in')
      } else {
        console.log('user is not signed in')
        this.props.navigation.navigate('SignUp')
        
      }
    });
    
  }
  render() {
    return (
      
      <View style={styles.container}>
        <Text>Loading</Text>
        <ActivityIndicator size="large" />
      </View>
    )
  }
}

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

App.js:

import {createAppContainer, createSwitchNavigator, SwitchNavigator} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

import Ion from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import Home from './src/screens/Home';
import Following from './src/screens/Following';
import Add from './src/screens/Add';
import Groups from './src/screens/Groups';
import Profile from './src/screens/Profile';
import Loading from './src/screens/Loading';
import SignUp from './src/screens/SignUp';
import Login from './src/screens/Login';

import React, {Component} from 'react';

const MainTabs = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "HOME",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="home" color={tintColor} size={24} />
        )
      }
    },
    Following: {
      screen: Following,
      navigationOptions: {
        tabBarLabel: "FOLLOWING",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome5 name="user-friends" color={tintColor} size={24} />
        )
      }
    },
    Add: {
      screen: Add,
      navigationOptions: {
        tabBarLabel: () => null,
        tabBarIcon: () => (
          <Ion name="ios-add-circle" color="white" size={50} />
        )
      }
    },
    Groups: {
      screen: Groups,
      navigationOptions: {
        tabBarLabel: "GROUPS",
        tabBarIcon: ({ tintColor }) => (
          <MaterialIcons name="group-work" color={tintColor} size={30} />
        )
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: "PROFILE",
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome5 name="user-circle" color={tintColor} size={24} />
        )
      }
  },
},

{
  tabBarOptions: {
    activeTintColor: "white",
    inactiveTintColor: "#CFC8EF",
    style: {
      backgroundColor: "#2C2061",
      borderTopWidth: 0,
      shadowOffset: { width: 5, height: 3 },
      shadowColor: "black",
      shadowOpacity: 0.5,
      elevation: 5
    }
  }
},
);

const switchNavigator = createSwitchNavigator(
  { Loading, SignUp, Login, MainTabs},
  { initialRouteName: "Loading" }
  );

const App = createAppContainer(switchNavigator);
export default App;

Jaydeep Galani :

try ES6 method, which binds this automatically,

  componentDidMount = () => { // changes are here
    firebase.auth().onAuthStateChanged((user)=> { // changes are here
      console.log(user)
      if (user) {
        console.log('user is signed in')
      } else {
        console.log('user is not signed in')
        this.props.navigation.navigate('SignUp')

      }
    });

  }

if the error still persists which logically should not, but if then try this,

import {withNavigation} from 'react-navigation';

...
class Loading extends React.Component{
...
...
...
}
export default withNavigation(Loading)