TypeError: undefined is not an object (evaluating 'this.props = props')

Question

I was trying to implement stack navigation and I got this error it says that this. props give the error I tried :

• deleting this.props because I used function in App.js it didn't work

I have tried many solutions and cannot find a good answer please do explain your answer so that everyone can understand it very well

here is my code

APP.JS

 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator} from '@react-navigation/stack';
    
    
 import Login from './pages/Login';
 import Register from './pages/Register';


const Stack = createStackNavigator()

function MystackNav(){
  return(
    <Stack.Navigator>
      <Stack.Screen name='Login' component={Login} options={{headerShown:false}}/>
      <Stack.Screen name='Register' component={Register} options={{headerShown:false}}/>
    </Stack.Navigator>
  )
}


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

LOGIN.JS

import React, { Component } from 'react';
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TextInput,
    TouchableHighlight,
    useColorScheme,
    Image,
    View,
} from 'react-native';

import Register from './Register';



export default class Login extends Component {

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.container2}>
                    <View>
                        <TextInput placeholder='username' placeholderTextColor={'#e02b70'} maxLength={12} style={styles.textinput}></TextInput>
                    </View>
                    <View>
                        <TextInput placeholder='password' placeholderTextColor={'#e02b70'} secureTextEntry={true} style={styles.textinput}></TextInput>
                    </View>
                    **<TouchableHighlight style={styles.button} 
                    onPress={()=>this.props.navigation.navigate('Register')}>
                        <Text style={styles.buttontext}>Login</Text>
                    </TouchableHighlight>**
                </View>
            </View>
        )
    }
}

here is the error

o reload the app press "r"
To open developer menu press "d"

 BUNDLE  ./index.js

 ERROR  TypeError: undefined is not an object (evaluating 'this.props = props')
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Answer 1

Change your Login class likewise :

//import Register from './Register'; //because you are not using this in your Login Class

export default class Login extends Component {

    constructor(props)
    {
      super(props);
    }


    render() {
        return (
            <View style={styles.container}>
            <View style={styles.container2}>
                <View>
                    <TextInput placeholder='username' placeholderTextColor={'#e02b70'} maxLength={12} style={styles.textinput}></TextInput>
                </View>
                <View>
                    <TextInput placeholder='password' placeholderTextColor={'#e02b70'} secureTextEntry={true} style={styles.textinput}></TextInput>
                </View>
                <TouchableHighlight style={styles.button} 
                onPress={()=>this.props.navigation.navigate('Register')}>
                    <Text style={styles.buttontext}>Login</Text>
                </TouchableHighlight>
            </View>
        </View>
    )
}

}