react-native-router-flux backAndroidHandler not working

Question

I am working on a react-native mobile application where I have used react-native-router-flux I have a scene as below

1- Screen1
2- Screen2
3- Screen3
4- Screen4

when I press android backbutton on screen 4 it goes to screen 3 then 2 then 1 but when I press android backbutton on screen1 it should exit from the application, but its not working

Here is my Router Stack

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} navBarTintColor={'white'} navBarButtonImageColor={'white'} tintColor={'white'} sceneStyle={styles.routerScene} >
        <Stack key="root">
          <Scene
            key="Screen1"
            component={Screen1}
            animation="fade"
            hideNavBar={true}
            initial={true}
            type='replace'
          />
          <Scene
            key="Screen2"
            component={Screen2}
            animation="fade"
            hideNavBar={true}
            type='replace'
          />
          <Scene
            key="Screen3"
            component={Screen3}
            title="Enrollment"
            animation="slide"
            hideNavBar={false}
            type='replace'
          />
          <Scene
            key="Screen4"
            component={Screen4}
            title="Enrollment"
            animation="slide"
            hideNavBar={false}
            type='replace'
          />

I also tried using below code

componentWillMount(){
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress.bind(this));
  }

  componentWillUnmount(){
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress.bind(this));
    }

  onBackPress() {
        if (backButtonPressedOnceToExit) {
            BackAndroid.exitApp();
        } else {
            if (Actions.currentScene !== 'Home') {
                Actions.pop();
                return true;
            } else {
                backButtonPressedOnceToExit = true;
                ToastAndroid.show("Press Back Button again to exit",ToastAndroid.SHORT);
                //setting timeout is optional
                setTimeout( () => { backButtonPressedOnceToExit = false }, 2000);
                return true;
            }
        }
    }

and when I try to debug this my debugger doesn't go inside the function. Please let me know what I am doing wrong.

Answer 1

Use backAndroidHandler prop of Router component.

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} navBarTintColor={'white'} navBarButtonImageColor={'white'} tintColor={'white'} sceneStyle={styles.routerScene} backAndroidHandler={this.onBackPress}>

and in onBackPress, you mentioned the wrong screen. Home is not present in your router stack. Make it Screen1. Also 'return true` in first if condition.