React-native android back button in react-navigation

Question

Well, I have a react-native app with multiple screen, each screen having a top bar where a back button is situated, it's main behavior is that the app returns to the main screen when this button is pressed. What I want to do is to copy this behavior to the hardware back button (now by pressing on hardware back button the app closes), how can I do this?

UPDATE:

I'm using react-navigation and redux

Answer 1

You can do it by below example

import { BackHandler } from 'react-native';

class App extends Component {
  constructor(props){
    super(props);
    this.backButtonClick = this.backButtonClick.bind(this);
  }

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

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

  backButtonClick(){
    if(this.props.navigation && this.props.navigation.goBack){
      this.props.navigation.goBack(null);
      return true;
    }
    return false;
  }
}

Answer 2

You can:

1. import the BackHandler from "react-native"
2. Add in the componentDidMount (componentWillMount deprecated) BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
3. Implement handleBackButton like this handleBackButton(){ this.props.navigation.popToTop(); return true; }

popToTop goes back to the first screen in the stack.

If you are using react-navigation with Redux you should implement the popToTop as an action to dispatch.