React Native Navigation : undefined is not an object (evaluating '_this2.props.navigation.navigate

Question

I am new to react native and learning "Navigation". The flow of my practice-app is: App.js -> login.js -> dashboard.js -> updateUser.js , which is working fine. I am using a react-native-tab-view library as well. When the user navigates from login.js to dashboard.js there he sees 3 tabs, one of which is updateUser.js which has only one button and I want when I click on it, I should be redirected to the login.js again. It's giving error as:

TypeError: undefined is not an object (evaluating'_this2.props.navigation.navigate

When I paste the same code in dashboard.js then it works fine. (I am redirected to the login.js successfully). Any help would be highly appreciated. The possible cause of error is I don't know where to declare the route etc. Here is my updateUser.js

export default class UpdateInfo extends Component {
  render() {   
    return (
      <View style={styles.container}>
        <TouchableOpacity 
          style={styles.loginBtn}
          onPress={() => this.props.navigation.navigate('Login')}
          >
          <Text style={styles.loginText}>Go to Login</Text>
        </TouchableOpacity>
      </View>

    );
  }
}

Here is my App.js

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      initialRouteName="Login"
      screenOptions={{
        headerTitleAlign: 'center',
        headerStyle: {
          backgroundColor: '#fb5b5a',
        },
        headerTintColor: '#003f5c',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        
      }}>      
      <Stack.Screen 
        name="Login" 
        component={Login} 
        options={
          {title: 'Login'},
          {headerLeft: null} 
        }
      />
      <Stack.Screen 
       name="Dashboard" 
       component={Dashboard} 
       options={
         { title: 'Dashboards' },
         {headerLeft: null} 
       }
      />
    </Stack.Navigator>
  );
}


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

My dashboard.js

export default function Dashboard() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
        { key: 'first', title: 'ALL PROFILE'  },
        { key: 'second', title: 'ADD PROFILE' },
        { key: 'third', title: 'UPDATE INFO' },
      ]);
  const renderScene = ({ route }) => {
    switch (route.key) {
      case 'first':
        return <AllProfile />;
      case 'second':
        return <AddProfile />;
      case 'third':
        return <UpdateInfo/>
      default:
        return null;
    }
  }; 

  return (
    <TabView
      navigationState={{ index, routes }}
      renderTabBar={props => (
        <TabBar
          {...props}
          renderLabel={({ route, color }) => (
            <Text style={{ color: '#fb5b5a', fontWeight: "bold" }}>
              {route.title}
            </Text>
          )}
          style={{backgroundColor: '#003f5c'}}
        />
      )}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      style={styles.dashboardContainer}
    />
  );
}

Answer 1

With hooks

class UpdateInfo extends Component {
  render() {   
    return (
      <View style={styles.container}>
        <TouchableOpacity 
          style={styles.loginBtn}
          onPress={() => this.props.navigation.navigate('Login')}
          >
          <Text style={styles.loginText}>Go to Login</Text>
        </TouchableOpacity>
      </View>

    );
  }
}

// Wrap and export
export default function(props) {
  const navigation = useNavigation();

  return <UpdateInfo navigation={navigation} />;
}

Answer 2

You will have to pass the navigation manually as its not a screen like below, only screens in the navigation will get the navigation prop. if its a functional component you can use the useNavigation hook and get access to navigation. In your case you will have to do like below

export default function Dashboard({navigation}) {

And

<UpdateInfo navigation={navigation}/>