BackAndroid.addEventListener('hardwareBackPress', function() {
if (!this.onMainScreen()) {
this.goBack();
return true;
}
return false;
});
Note: this.onMainScreen()
and this.goBack()
are not built in functions, you also need to implement those.
(https://github.com/immidi/react-native/commit/ed7e0fb31d842c63e8b8dc77ce795fac86e0f712)
This is an example on how to use React Native's BackAndroid
along with the Navigator
.
componentWillMount
registers an event listener to handle the taps on the back button. It checks if there is another view in the history stack, and if there is one, it goes back -otherwise it keeps the default behaviour.
More information on the BackAndroid
docs and the Navigator
docs.
import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
import {
BackAndroid,
Navigator,
} from 'react-native';
import SceneContainer from './Navigation/SceneContainer';
import RouteMapper from './Navigation/RouteMapper';
export default class AppContainer extends Component {
constructor(props) {
super(props);
this.navigator;
}
componentWillMount() {
BackAndroid.addEventListener('hardwareBackPress', () => {
if (this.navigator && this.navigator.getCurrentRoutes().length > 1) {
this.navigator.pop();
return true;
}
return false;
});
}
renderScene(route, navigator) {
this.navigator = navigator;
return (
<SceneContainer
title={route.title}
route={route}
navigator={navigator}
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
{...this.props} />
);
}
render() {
return (
<Navigator
initialRoute={<View />}
renderScene={this.renderScene.bind(this)}
navigationBar={
<Navigator.NavigationBar
style={{backgroundColor: 'gray'}}
routeMapper={RouteMapper} />
} />
);
}
};
Since BackAndroid is deprecated. Use BackHandler instead of BackAndroid.
import { BackHandler } from 'react-native';
{...}
ComponentWillMount(){
BackHandler.addEventListener('hardwareBackPress',()=>{
if (!this.onMainScreen()) {
this.goBack();
return true;
}
return false;
});
}
This example will show you back navigation which is expected generally in most of the flows. You will have to add following code to every screen depending on expected behavior. There are 2 cases:
Case 1: Show previous screen
import { BackHandler } from 'react-native';
constructor(props) {
super(props)
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}
componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}
handleBackButtonClick() {
this.props.navigation.goBack(null);
return true;
}
Important: Don't forget to bind method in constructor and to remove listener in componentWillUnmount.
Case 2: Exit App
In this case, no need to handle anything on that screen where you want to exit app.
Important: This should be only screen on stack.