React-native android back button in react-navigation
You can:
- import the BackHandler from "react-native"
- Add in the componentDidMount (componentWillMount deprecated)
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
- 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;
}
}