Dismiss Alert in React Native

Question

So I have an app that shows an alert when you go idle for a few seconds, and there is 'YES' button in the alert when you pressed it it will refresh the timer and shows the alert again, and if i do nothing with the alert it goes to next page somehow the Alert still open in the next page and I want it to be closed. Is there anyway to close it? Thanks in advance

here is my code

 componentDidMount(){ this.timer = setTimeout(this.sessionTimeout, 3000); //auto reset after 60 seconds of inactivity } componentWillUnmount(){ clearTimeout(this.timer); } sessionTimeout(){ this.timer = setTimeout(this.onSubmit, 3000) Alert.alert('You ran out of time', 'still editing?', [ {text: 'YES', onPress:this.resetTimer.bind(this)} ], {cancelable: false} ) } resetTimer(){ clearTimeout(this.timer); this.timer = setTimeout(this.sessionTimeout, 3000); } onSubmit() { clearTimeout(this.timer); this.setState({ submitted: true }); //shows activity indicator const data = this.state; const result = validate(data, this.props.validationLang); if (!result.success) { this.setState({ error: result.error }); this.setState({ submitted: false }); //terminate activity indicator } else this.props.onSubmit(this.extractData(data), () => this.setState({ submitted: false })); } 

Answer 1

You can use react-native-modalbox like this:

    modal = null;

    render(){
       return (
         <Modal
           ref={(ref) => { this.modal = ref }}
           coverScreen={true}
           position={"center"}
           onClosed={() => { console.log('modal closed') }}
           swipeToClose={true} 
           backdropPressToClose={true} >
           <View>
              <Text>Message</Text>
              <TouchableOpacity 
                  onPress={() => { this.modal.close() }}
              >
                  <Text>close</Text>
              </TouchableOpacity>
           </View>
         </Modal>
       )
   }

Now you can show modal with this.modal.open() and close it with this.modal.open() and track closing modal with props of your Modal component. For more information please read the Documentation .

I hope this can helo you.

Answer 2

无法关闭“警报”，因此您可以通过在警报内部设置“否”按钮来更改导航方案，并仅在不按任何按钮后不按任何操作即可导航到另一个屏幕，它应该停留在该屏幕上，您可以设置按钮名称对于任何事情，而不是对用户有意义的“否”，那么如果我不想通过按“是”来刷新计时器，则可以导航到其他屏幕。

Answer 3

You reset when the alert appears, you press OK , you press No , you want the screen to move.

       Alert.alert('You ran out of time', 'still editing?',
        [
          {text: 'YES', onPress: () => this.resetTimer()},
                {
                  text: "Cancel",
                  onPress: () => this.props.navigation.navigate("nextScreen"),
                  style: "cancel"
                }
        ],
        {cancelable: false}
        )