I'm making screen which is for writing some information. And when user try to leave the screen, I want to show confirm message like :
"If you leave, the information, which you've written, will lost. Do you want to leave though or stay ?"
And If user choose to stay, I want to prevent the back behavior of navigator. How can I do it?
You can read the docs here
You need to figure out a way to handle back press in different screens or globally.
react-navigation-backhandler is a quick way to go.
import { AndroidBackHandler } from 'react-navigation-backhandler';
class SomeComponent extends React.Component {
onBackButtonPressAndroid = () => {
/*
* Returning `true` from `onBackButtonPressAndroid` denotes that we have handled the event,
* and react-navigation's lister will not get called, thus not popping the screen.
*
* Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
* */
if (youWantToHandleTheBackButtonPress) {
// do something
return true;
}
return false; };
render() {
return (
<AndroidBackHandler onBackPress={this.onBackButtonPressAndroid}>
<BodyOfYourScreen />
</AndroidBackHandler>
);
}
Also look into official react-navigation docs
More options here
This is works like your question,
import React, {Component} from 'react';
import {StyleSheet, Text, View,BackHandler,Alert,Modal,TouchableOpacity,TextInput} from 'react-native';
export default class App extends Component {
state={
modalVisible:false,
}
componentDidMount(){
BackHandler.addEventListener("hardwareBackPress",
this.backpress,this.backHandler)
}
backpress=()=>{
this.setState({modalVisible:!this.state.modalVisible})
return true;
}
backHandler=()=>{
BackHandler.exitApp()
}
render() {
return (
<View style={styles.container}>
<TextInput
style={{height: 40,width:200,marginLeft:50,marginVertical:20,borderBottomWidth:1}}
placeholder="Mobile Number"
onChangeText={(mobilenumber) => this.setState({mobilenumber})}
/>
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{flex:1,justifyContent:'center',alignItems:'center',
backgroundColor:'rgba(52,52,52,0.5)'}}>
<View style={{width:300,height:250,backgroundColor:'#FFF',padding:20,
borderRadius:20,alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:20,color:'black',alignSelf:'center'}}>Are you sure to EXIT</Text>
<View style={{flexDirection:'row'}}>
<TouchableOpacity onPress={()=>this.backpress()}
style={{padding:10,marginHorizontal:10 ,backgroundColor:'#0596C5',alignItems:'center',justifyContent:'center',borderRadius:20}}>
<Text style={{color:'white',padding:5}}>STAY</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>this.backHandler()}
style={{padding:10,marginHorizontal:10 ,backgroundColor:'red',alignItems:'center',justifyContent:'center',borderRadius:20}}>
<Text style={{color:'#FFF',padding:5}}>EXIT</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
Not sure how your business logic works "If user choose to stay, I want to prevent the back behavior of navigator. How can I do it?" What happen if the user press wrongly? Anyway..
You might be looking for disable android back button
Based on your business logic, I think you should disable the back button at navigation bar too when they decided to stay.
