Navigation from one page to another in react native using navigate

Question

I am currently learning react native. I want to navigate from one screen to another using navigate() function. Navigate function is placed inside a fetch() function, so after i get the response from the server, I should be redirected to the next page. But currently i an having problem as the navigation code is not working if i put inside the fetch(). If i remove the code and place it outside the fetch then it is working.

Below is my written code (StepOne):

---

import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, TextInput, TouchableOpacity, Alert } from 'react-native';
import { Tile } from 'react-native-elements';


export default class StepOne extends Component {

  static navigationOptions = {
    header: null
  };


  constructor(props) {

    super(props);
    this.state = {
      userEmail : '',
      userPhone : ''
    }

  }

  moveToStepTwo = () => {

      const {userEmail} = this.state;
      const {userPhone} = this.state;

      if(userEmail == '' || userPhone == '') {

        Alert.alert('Warning' , 'Please Insert All the Required Details !!!!');

      } else {

                    let url = 'registerProcessGetEmailValidity.jsp?';
      let param_one = 'user_email='+userEmail;

      let seperator_param = '&';
      let full_url = ''; 
      full_url = url + param_one;

      let header = {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
      };


      fetch( full_url, {
        method: 'GET',
        headers: header,
      })        
      .then(function(response) {
          return response.json();
      })
      .then(function(myJson) {
          console.log(myJson);

          if(myJson.message == 'No User') {

             this.props.navigation.navigate('StepTwo', { userEmail: this.state.userEmail , userPhone: this.state.userPhone } );

          } else if (myJson.message == 'Got User') {

              Alert.alert('Warning' , 'Email is registered, Choose different email !!!!');

          } 

      });

      }

  }


  render() {

    const { navigate } = this.props.navigation;

    return (

        <View style={styles.container}>
            <ImageBackground source={require('../../img/background1.jpg')} style={styles.backgroundImage}>
                <View style={styles.content}>

                    <Text style={styles.logo}> -- STEP 1 -- </Text>

                    <View style={styles.inputContainer}>
                        <TextInput 
                              underlineColorAndroid='transparent' style={styles.input} placeholder='ENTER EMAIL'
                              onChangeText = {userEmail => this.setState({userEmail})} >
                        </TextInput>
                        <TextInput 
                              underlineColorAndroid='transparent' keyboardType = {'numeric'}  maxLength={12} 
                              style={styles.input} placeholder='ENTER PHONE NUMBER' onChangeText = {userPhone => this.setState({userPhone})} >
                        </TextInput> 
                    </View>

                    <View style={styles.buttonHolder}>
                        <TouchableOpacity style={styles.buttonContainer} onPress={ this.moveToStepTwo }>
                            <Text style={styles.buttonText}>NEXT</Text>
                        </TouchableOpacity>
                        <TouchableOpacity  style={styles.buttonContainer} onPress={ ()=> navigate('Home') } >
                            <Text style={styles.buttonText}>CANCEL</Text>
                        </TouchableOpacity>
                    </View>

                </View>
            </ImageBackground>
        </View>

    );

  }


}

---

When I navigate to the 'StepTwo' screen after the fetch call, there is no response. I can't navigate to the next screen. It is like the navigate call inside the fetch is not working. Can anyone help me to solve this problem ?

And one more thing. Is the any fault in my code ? Since i am new to react native, i have no idea what I am writing is correct or not. Maybe regarding the this. something element.

---

I give another example (App.js):

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Expo from 'expo';


import HomeScreen from './app/screens/HomeScreen';
import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';

const NavigationApp = StackNavigator({
 Home: { screen: HomeScreen },
 Login: { screen: LoginScreen },
 Register: { screen: RegisterScreen },
});


export default class App extends React.Component {

  render() {

    return (
        <NavigationApp />
    );

  }

}

Then Login file (Login.js)

import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, TextInput, TouchableOpacity, Alert } from 'react-native';
import { FormLabel, FormInput } from 'react-native-elements'

export default class Login extends Component {

  static navigationOptions = {
    header: null
  };

  constructor(props) {

    super(props);
    this.state = {
      userName : '',
      userPass : ''
    }

  }


  login = () => {

      const {userName} = this.state;
      const {userPass} = this.state;

      if(userName == '' || userPass == '') {

        Alert.alert('Warning' , 'Please Insert All the Required Details !!!!');

      } else {


          let url = 'loginProcessGetUserDetails.jsp?';
          let param_one = 'user_name='+userName;
          let param_two = 'user_pass='+userPass;
          let param_three = 'user_group=JOMLOKA';
          let seperator_param = '&';
          let full_url = ''; 
          full_url = url + param_one + seperator_param + param_two + seperator_param + param_three;

          let header = {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          };


          fetch( full_url, {
            method: 'GET',
            headers: header,
          })        
          .then(function(response) {
              return response.json();
          })
          .then(function(myJson) {
              console.log(myJson);

              if(myJson.message == 'No User') {
                  Alert.alert('Warning' , 'No User !!!!');
              } else if (myJson.message == 'Wrong Password') {
                  Alert.alert('Warning' , 'Wrong Password !!!!');
              } else if (myJson.message == 'Login') {
                  //Alert.alert('Success' , 'Login !!!!');
                  const { navigate } = this.props.navigation;
                  navigate("Register",{ userEmail: this.state.userEmail , userPhone: this.state.userPhone });
              }

          });


      }

  }



  render() {

    const { navigate } = this.props.navigation;

    return (
        <View style={styles.container}>

            <ImageBackground source={require('../img/background1.jpg')} style={styles.backgroundImage}>
                <View style={styles.content}>

                    <Text style={styles.logo}> -- LOGIN DEMO -- </Text>

                    <View style={styles.inputContainer}>
                        <TextInput underlineColorAndroid='transparent' style={styles.input} placeholder='ENTER USERNAME' onChangeText = {userName => this.setState({userName})} >
                        </TextInput>
                        <TextInput underlineColorAndroid='transparent' secureTextEntry={true} style={styles.input} placeholder='ENTER PASSWORD' onChangeText = {userPass => this.setState({userPass})} >
                        </TextInput> 
                    </View>


                    <View style={styles.buttonHolder}>
                        <TouchableOpacity onPress={this.login} style={styles.buttonContainer}>
                            <Text style={styles.buttonText}>LOGIN</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={ ()=> navigate('Home') }  style={styles.buttonContainer}>
                            <Text style={styles.buttonText}>CANCEL</Text>
                        </TouchableOpacity>
                    </View>

                </View>
            </ImageBackground>

        </View>
    );

  }


}

---

That is another example with the same problem.

Answer 1

I assume that you have installed react-navigation plugin.

Now import your files in the app.js

like below :

import login from './login';
import StepTwo from './StepTwo';

const Nav = StackNavigator({
    login : {screen: login},
    StepTwo : {screen: StepTwo},
});

export default class FApp extends Component {
  render() {
    return (
      <Nav/>
    );
  }
}

And in your login file. (Considering your this file as a login file)

if(myJson.message == 'No User') {
    const { navigate } = this.props.navigation;
    navigate("StepTwo",{ userEmail: this.state.userEmail , userPhone: this.state.userPhone });
} else if (myJson.message == 'Got User') {
    Alert.alert('Warning' , 'Email is registered, Choose different email !!!!');
} 

Answer 2

this.props.navigation.navigate('StepTwo', { userEmail: this.state.userEmail , userPhone: this.state.userPhone } );

Are you sure your this is correct?

If you don't use Arrow Function, you need to do this var _this = this, then _this.props.navigation.navigate('StepTwo', { userEmail: this.state.userEmail , userPhone: this.state.userPhone } );

You can use Arrow functiom in fetch:

fetch(url, options)
  .then(response => {
    // ...
  })
  .catch(error => {
    // ...
  })

Answer 3

Replace

onPress={ this.moveToStepTwo }

with

onPress={()=> this.moveToStepTwo() }