React Native: TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate') when click on button. Why?

Question

I know it's duplicate question, I tried to solve it through all the solution since 3-4 days but didn't understand why it's coming again and again. I think i made somewhere stupid mistake, please help me to trace it out.

Following is the code for my Login and Forgot password Screen. On login screen when I click on forgot password button then it thown TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

// config/routes.js
import * as React from 'react';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import LoginScreen from "../layouts/LoginScreen";
import ForgotPasswordScreen from "../layouts/ForgetPassword";

const Stack = createStackNavigator();
const appName = "XXX";

const MyStack = () => {
    return (
        <Stack.Navigator initialRouteName='Login'>
            <Stack.Screen options={{
                            title: `Login - ${appName}`
                          }}
                          name='Login' component={LoginScreen} />
            <Stack.Screen options={{
                            headerLeft: ({props}) => (
                              <HeaderBackButton
                                {...props}
                                onPress={() => {
                                  navigation.navigate("Login")
                                }}
                              />
                            ),
                            title: `Forgot Password? - ${appName}`
                          }}
                          name='ForgotPasswordScreen'
                          component={ForgotPasswordScreen} />
        </Stack.Navigator>
    )
}

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

Following I've imported into the other file and add <ForgetPasswordText /> for adding button.

// layout/components/ForgetPasswordText.js
import React, { Component } from 'react'
import { View, Button } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';


class ForgetPasswordText extends Component {

  constructor(props) {
    super(props);
    this.goToForgotPassword = this.goToForgotPassword.bind(this);
    this.state = {
    };
  }
  static navigationOptions = ({ navigation }) => ({
    title: navigation,
  });
  render() {
    return (
      <View>
        {/* <Text style={styles.textRight}>Forgot Password Screen?</Text> */}
        <Button
            title="Forgot Password?"
            onPress={this.goToForgotPassword}
            titleStyle={{
                color: '#039BE5'
            }}
            type="clear"
        />
      </View>
    )
  }
  goToForgotPassword() {
    console.log(this.props.navigation)  //output: undefined
    this.props.navigation.navigate('ForgotPasswordScreen');
  }
}
export default ForgetPasswordText;

Accessing ForgetPasswordText inside following path.

// layout/Login.js
import React from 'react';
import { View } from 'react-native';
import ForgetPasswordText from './components/ForgetPasswordText';

class LoginScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    };
  }
  render() {
      return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>  
            <ForgetPasswordText />
        </View>
        )
    }
};
export default LoginScreen;

Please review and let me know your thoughts what's the problem with it.

Answer 1

You would have to use ForgetPasswordText as

const loginProps = this.props;
<ForgetPasswordText {...loginProps} />

This way, the props of LoginScreen is passed to ForgetPasswordText.