React-native android back button in react-navigation

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.


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;
  }
}