React native navigation: '_this2.props.navigation.navigate'

Question

my App.js code

import React from 'react'
import { Icon } from 'react-native-elements'
import { StyleSheet, View, StatusBar } from 'react-native'
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import HomeScreen  from './screens/homeScreen'
import LoginScreen from './screens/loginScreen'
import SignupScreen from './screens/signup'
import Screen2 from './screens/screen2'
import Screen1 from './screens/screen1'

export default class App extends React.Component {

  setLogged(){
    this.setState({logged:true})
    this.forceUpdate()
  }
    //change to false when want to enable login feature else true
    state = {
        logged: false,
    }

  render() {
    if(this.state.logged){
      return(
        <View style={styles.container} >
          <StatusBar hidden = {false}/>
          <AppContainer />
        </View>
      )
    }else{
      return(
        <View style={styles.container} >
          <StatusBar hidden = {false}/>
              <LoginScreen signup={()=>this.props.navigation.navigate('Signup')} success={()=>this.setLogged()} />
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: '100%',
    height: '100%',
    backgroundColor: '#000000',
  },
})

const HomeAppContainer = createStackNavigator(
  {
    Home: {screen: HomeScreen},
    Signup: { screen: SignupScreen },
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
  },
  {initialRouteName: "Home"},
);

const AppContainer =  createAppContainer(HomeAppContainer)

and the login screen contains

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, TextInput, ToastAndroid } from 'react-native';
import Colors from '../constants/colors'
import GLOBAL from '../constants/global'

export default class LoginScreen extends Component {
    state = {
        email: '',
        password: '',
    }

    login() {
        if (userid == 'admin') {
            ToastAndroid.show('Invalid email/password', ToastAndroid.SHORT);
        } else {
            GLOBAL.userid = userid;
            this.props.success()
        }
    })
    }

    render() {
        return (
            <View style={styles.MainContainer}>
                    <Text style={styles.text}>Email:</Text>
                    <View style={styles.inputView}>
                        <TextInput
                            style={styles.inputs}
                            autoFocus
                            returnKeyType="next"
                            keyboardType="email-address"
                            onChangeText={(email) => { this.setState({ email: email }) }}
                        />
                    </View>
                    <Text style={styles.text}>Password:</Text>
                    <View style={styles.inputView}>
                        <TextInput
                            style={styles.inputs}
                            secureTextEntry
                            onChangeText={(password) => { this.setState({password:password}) }}
                        />
                </View>
                <View style={styles.buttonGroup}>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => { this.login() }} >
                        <Text style={{ fontSize: 24 }}>Sign in</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => { this.props.signup() }}>
                        <Text style={{ fontSize:24 }}>Sign up</Text>
                    </TouchableOpacity>
                </View>
            </View>
    );
  }
}


const styles = StyleSheet.create({
    //my styles here
});

the error is as follows

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

i am learning react-native and making this login screen. The app will check if the user is already logged in. if not then he will be prompted login screen which will have sign up option. If the user is already logged in the app will directly go to home screen where screen1 and screen2 is used in stack

Answer 1

Well, the navigation prop is only passed down the navigation tree. Your App component is not a navigation screen like Home/Signup... (it doesn't have a route)... So basically App is not part of a navigator, it's not created using createStackNavigator or the others.

So, in conclusion the navigation prop is not defined.

Basically, how to fix this: LoginScreen should also be a route inside a navigator, therefore the navigation prop will be defined. Your App component should not render anything besides the <AppContainer /> and further logic should be handled in the first screen defined in the routes, which in your case might be the LoginScreen . In there you'll check if the user is logged in or not and navigate accordingly.

There's a great guide on their website on how to accomplish authentication flow: https://reactnavigation.org/docs/en/4.x/auth-flow.html