BackHandler is not working in react-native side-menu when using react-native router-flux

Question

I am working on react-native to develop a sample application. Here I got an issue when I was using backHandler in the react-native side-menu component.

Actually, the side menu contains more pages! But when clicking the Android back button in the side menu pages, only once the back handler works. Here I am using react-native router-flux.

Here the back button action is called only once!

This is my code:

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}

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

handleBackPress = () => {
    let {isGoback} = this.props.isGoback
    //alert("Hi " + isGoback)

    if(isGoback === "Contact Us"){
        //alert("Hi: " + isGoback)
        Actions.BasicSideMenuMain({selectedItem:'Home'});
        //Actions.replace('BasicSideMenuMain')
    }
}

Tameratamerlane

What do you mean by "once the back handler function calls here main screen is Home"? Can you fix it (by editing your question, not by responding here in comments)? – Waffle

Hi I don't know about this exactly – Tameratamerlane

Answer 1

I had the same issue this is how I solved it: As you are using router-flux you can use Actions.currentScene to find which page you are on

handleBackPress = () => {
        if(Actions.currentScene === 'mainPage'){   // 'mainPage' is kay of your scene
            BackHandler.exitApp();  // or anything you want
            return false;
        } 
        Actions.pop();  // for all the pages beside mainPage in side menu always go back
        return true;
    }

Hope it works.

Weatherboard