Preventing back behavior of react-navigation StackNavigator

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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,
     }
  });