CODEWITHSUNDEEP
react-nativealert
Rajan Lagah
Rajan Lagah

Reputation: 2528

Alert in react native

I am setting error in state true/false and if error = true then want to show alert
So i did this.

constructor() {
    super()
    this.state = {
        email: "",
        password: "",
        error: false
    }
    this.handleSignUp = this.handleSignUp.bind(this)
}

and function

handleSignUp() {
    fetch('http://myIp:9999/signUp', {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.state),
    })
        .then((res) => {
            console.log("here")
            console.log(res)
            this.setState({error: false})
        }).catch((e) => {
        if (e) {
            console.log('e')
            console.log(e.status)
            this.setState({error: true})
        }
    })

}

and render method as

 render() {

    var alert1 = alert(
        "User exist",
        "User with same Email exist. Try some to login or use other Email",
        [
            {text: "Ok", style: 'cancle', onPress: () => this.setState({error: false})}
        ]
    )


    return (
        <View style={styles.container}>
            {this.state.error ? alert1 : ""}
            <Header function1={() => this.props.navigation.openDrawer()}/>
            ....
        </View>
    )
}

and the result is no matter if error is true or false when i open this screen then alert appears and then error

so I change alert1.

var alert1 =    (<View> 
                                    alert(
                                            "User exist",
                                            "User with same Email exist. Try some to login or use other Email",
                                            [
                                                {text:"Ok",style:'cancle',onPress:()=> this.setState({error:false})}
                                            ]
                                        )
                                    </View>)

and now error is resolved but on screen load alert is appearing.

Upvotes: 0

Views: 226

Answers (1)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

handleSignUp() {
    fetch('http://myIp:9999/signUp', {
        ...
    })
      .then((res) => {
          //insted of this line => this.setState({error: false}) call Alert directly

            Alert.alert(
              'Alert Title',
              'My Alert Msg',
              [
                {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
                {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                {text: 'OK', onPress: () => console.log('OK Pressed')},
              ],
              { cancelable: false }
            )
      })

}

Upvotes: 1

Related Questions