react-native Android - Hardware Back Button Example of BackAndroid along with Navigator
Example
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} />
} />
);
}
};
