Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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')
    }
}
like image 306
Lavaraju Avatar asked Nov 14 '18 04:11

Lavaraju


1 Answers

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.

like image 71
Pradnya Choudhari Avatar answered Oct 19 '22 09:10

Pradnya Choudhari