How to change screen after fetch in React Native? [Using Stack Navigator]

Question

I want to: (I am using stack navigator)

1. Execute a fetch (HTTP post to an API),
2. Evaluate the response and take appropriate action (whether its showing the user an error message, in case of failure or letting them progress by showing the next screen, if successful).

I am stuck on step 2, I am not able to not able to evaluate the result and change the screen without avoiding this error message:

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount

I only started React Native recently, sorry if this is too obvious. Below is my code:

render() {
    const { navigate } = this.props.navigation;
    return (
                <View style = {styles.container}>
                   <TextInput
                        placeholder='Email Address'
                        onChange={(event) => this.setState({email: event.nativeEvent.text})}
                        value={this.state.email}
                   />
                   <TouchableHighlight underlayColor={'transparent'} onPress={this._onPressButton.bind(this)}>
                       <Image source = {submit} style = { styles.error_separator } ></Image>
                   </TouchableHighlight>
                   <TouchableHighlight underlayColor={'transparent'} onPress={() => navigate('Login')}>
                            <Image source = {login} style = { styles.separator } ></Image>
                        </TouchableHighlight>
                        <TouchableHighlight underlayColor={'transparent'} onPress={() => navigate('Index')}>
                            <Ionicons name="ios-arrow-dropleft-circle" size={44} color="white" style={styles.backicon}/>
                        </TouchableHighlight>
                </View>
    )
}

_onPressButton () {
    this.setState({visible: true});
    fetch('the api url', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            email: this.state.email
        })
    })
        .then(response=>response.json())
        .then(response => {
            this.setState({visible: false});
            if(response.userContinue) {
                userDetails.email = this.state.email
                /*
         ******** This is where I want to be changing the screen, I already 
tried putting navigate (by passing it as a function parameter) here, but that fails ********
                */
            } else {
                this.setState({input: {
                    height: window.height*.07,
                    width: window.width*.75,
                    paddingLeft: window.height*.025,
                    marginTop: window.height*.018,
                    fontSize: window.height*.025,
                    borderWidth: 1,
                    borderColor: '#e74c3c',
                    borderRadius: 8,
                    color: '#ffffff',
                }, error: response.message });
            }
        })
}

Would really appreciate any help, thank you.

[EDIT] I purposefully removed some code as it was not relevant to the question, do not mind if it looks queer.

Answer 1

First of all you need to check whether response of web-service is TRUE or FALSE. If your response is FALSE then you have to show one alert or you have to display some message on your current screen. If you want to show alert -

 Alert.alert(
         'You need to add your message here...'
      )

And if you want to add some text then simply add Text element like

<Text style={style.yourStyle}>Your message</Text>

Now, if your response is TRUE then you have to navigate your screen using stack navigator. For that you have to make one Stack Modal like -

const ModalStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
});

Now you have to navigate whenever you have to navigate. So you have to write code in _OnPressEvent() -

this.props.navigation.navigate('Profile', {name: 'Lucy'})

Here 'Profile' your screen name and "name : 'Lucy'" is if you want to pass data like name or anything you want to pass the data then you can write like this.

I hope you understand. Ask me for any query.