React native : Android device back button

Question

I'm getting one issue on android device back button. When I'm login to the app and go to home screen and from home screen, if I'm pressing device back button then it's redirected to me login screen again instead of the background.

Please help me how app go to background state when I'm pressing back button once app successful login in the app i.e. from home screen.

Here My code,

Login.js

//Click on login button call this method
  home()
  {
    const { navigate } = this.props.navigation;
    navigate('Home', { name: 'Home'});

  }

Home.js:

constructor(props) {
    super(props)
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}

componentWillMount()
{
  console.disableYellowBox = true;
  console.log(this.props.navigation.state.routeName);

    this.callapi();
  }

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

handleBackButtonClick() {
  if (this.props.navigation.state.routeName == 'Home') {
  //  this.props.navigation.goBack(null);
//  BackHandler.exitApp()
this.props.navigation.dispatch(resetAction)
    }
    return false;

}

Ray Ray · Accepted Answer · 2018-01-20T14:52:23

This is because you are pushing the user to the homepage when the login returns true. You have to reset the router's stack instead.

I personally use react-native-navigation by Wix and never used react-navigation. But by looking at their docs, it shows that you can reset the stack by adding this block of code instead:

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile'})
  ]
})
this.props.navigation.dispatch(resetAction)

More info can be found here

React native : Android device back button

1 Answers