Handling back button in React Native, Navigator on Android

Question

I have a Navigator in an Android react native application.

I'm using navigator.push() to navigate to a different page. It would seem natural that the back button would pop the navigator and to go back one page, but that's not what's happening (it quits the app).

Do the react-native Navigator really has no back button support, do I need to plug it myself with a BackAndroid?

Answer 1

In addition to answer above, handling code should be something like this

var navigator;   React.BackAndroid.addEventListener('hardwareBackPress', () => {     if (navigator && navigator.getCurrentRoutes().length > 1) {         navigator.pop();         return true;     }     return false; }); 

in render code:

<Navigator ref={(nav) => { navigator = nav; }} /> 

Answer 2

Not sure when the API changed but as of react native 0.31 (potentially earlier versions as well) BackAndroid is a component that must be imported from react-native:

import {..., BackAndroid} from 'react-native'

Also be sure to remove the listener on componentWillUnmount:

componentWillUnmount(){     BackAndroid.removeEventListener('hardwareBackPress', () => {         if (this.navigator && this.navigator.getCurrentRoutes().length > 1) {             this.navigator.pop();             return true;         }         return false;     }); } 

*UPDATE: In react native 0.44 this module has been renamed to BackHandler. Navigator has also been officially deprecated but can still be found here: https://github.com/facebookarchive/react-native-custom-components

import { BackHandler } from 'react-native';