Navigation problem React native ,stack navigator

Question

My first code of pushing data to api and every thing was going good but I got stuck at navigation to next page.

I have got phone and password textinput. my button click code is

<TouchableOpacity style={styles.buttonContainer} 
                    onPress={this.CheckTextInput 
                         }>
                    <Text style={styles.buttonText}>Login</Text>
                    </TouchableOpacity>

Now CheckTextInput method I have written HTTP POST method

CheckTextInput = () => {
//Handler for the Submit onPress
if (this.state.phone == '') {
    alert('Please Enter Phone/Email');
  //Check for the Name TextInput
} else if (this.state.password == '') {
    alert('Please Enter Password');
}else{

    var url = 'my_url';

    var data = {
            "phone":this.state.phone,
            "password": this.state.password
            }

            fetch(url, {
                method: "POST",
                headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        },
                body: JSON.stringify(data)
                })
                    .then(function(response){ 
                        return response.json();   
                    })
                    .then(function(data){ 
                        console.log(data)

                if(data.hasOwnProperty("success"))
                   {
                       let successmsg = data.success
                  // console.log('token is'+data.token)
                console.log('success is string'+ ''+ successmsg)

                       if(successmsg == true)
                          {

                       let token = data.token
                  // console.log('token is'+data.token)
                      console.log('token is string'+ ''+ token)

                    this.props.navigation.navigate( 'HomePage' ); //----> HERE THIS IS NOT NAVIGATING.

                          }else{
                              let message = data.message
                              alert(message);
                          }
                   }

                });

}



};

I am getting error

Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.props.navigation')]

well, I have gone through all solutions of this error but did not worked anything out.

Some one please help me how to navigate from one page to another page in condition.

score 1 · Accepted Answer · answered Aug 06 '19 at 09:03

1

After fetch your data and in then statement, try using arrow functions like this:

    fetch(url, {
          method: "POST",
          headers: {
               'Accept': 'application/json',
               'Content-Type': 'application/json',
          },
          body: JSON.stringify(data)
    })
    .then((response) => { 
          return response.json();   
    })
    .then((data) => { 
          console.log(data)
          .....
    })

answered Aug 06 '19 at 09:03

Ali SabziNezhad

3,050
1
17
31

got it :) but why is that like that? can u please explain? – john Doe Aug 06 '19 at 09:09
Arrow functions do not have their own `this` so `this` will refer to the parent's scope. Read https://stackoverflow.com/a/34361380/6744400 for more detail :) – Ali SabziNezhad Aug 06 '19 at 09:14

Navigation problem React native ,stack navigator

1 Answers1