Android back handler (#2282)

* Reorder dependencies

Keep vs code happy

* Make markdown files readable on MacDown

* BackHandler compatibility

Give precedence to react's BackHandler when hardware back button is pressed

* f

* Update test

* Restore deps

AndroidE2E/app/src/androidTest/java/com/reactnativenavigation/e2e/androide2e/BackHandlerTest.java

@@ -0,0 +1,22 @@
+package com.reactnativenavigation.e2e.androide2e;
+
+import android.support.test.uiautomator.By;
+
+import org.junit.Test;
+
+public class BackHandlerTest extends BaseTest {
+    @Test
+    public void overrideHardwareBackButton() throws Exception {
+        elementByText("BACK HANDLER").click();
+        assertExists(By.text("Back Handler Screen"));
+
+        elementByText("ADD BACK HANDLER").click();
+        device().pressBack();
+        assertExists(By.text("Back Handler Screen"));
+
+
+        elementByText("REMOVE BACK HANDLER").click();
+        device().pressBack();
+        assertMainShown();
+    }
+}

AndroidE2E/app/src/androidTest/java/com/reactnativenavigation/e2e/androide2e/BaseTest.java

@@ -24,8 +24,8 @@ import static org.assertj.core.api.Java6Assertions.assertThat;
 
 @RunWith(AndroidJUnit4.class)
 public abstract class BaseTest {
-	public static final String PACKAGE_NAME = "com.reactnativenavigation.playground";
-	public static final long TIMEOUT = 60000;
+	static final String PACKAGE_NAME = "com.reactnativenavigation.playground";
+	private static final long TIMEOUT = 60000;
 
 	@Before
 	public void beforeEach() throws Exception {

docs/docs/usage.md

@@ -21,12 +21,14 @@ Navigation.events().onAppLaunched(() => {
 
 ### registerContainer(screenID, generator)
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
+
 ```js
 Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
 ```
 
 ### setRoot({params})
 Start a Single page app with two side menus:
+
 ```js
 Navigation.setRoot({
   container: {
@@ -53,6 +55,7 @@ Navigation.setRoot({
 });
 ```
 Start a tab based app:
+
 ```js
 Navigation.setRoot({
   bottomTabs: [
@@ -80,6 +83,7 @@ Navigation.setRoot({
 
 ### push(params)
 Push a new screen into this screen's navigation stack.
+
 ```js
 Navigation.push(this.props.containerId, {
   name: 'navigation.playground.PushedScreen',
@@ -88,6 +92,7 @@ Navigation.push(this.props.containerId, {
 ```
 ### pop(containerId)
 Pop the top screen from this screen's navigation stack.
+
 ```js
 Navigation.pop(this.props.containerId);
 ```
@@ -97,11 +102,13 @@ Navigation.popTo(previousScreenId);
 ```
 ### popToRoot()
 Pop all the screens until the root from this screen's navigation stack
+
 ```js
 Navigation.popToRoot(this.props.containerId);
 ```
 ### showModal(params = {})
 Show a screen as a modal.
+
 ```js
 Navigation.showModal({
   container: {
@@ -114,6 +121,7 @@ Navigation.showModal({
 ```
 ### dismissModal(containerId)
 Dismiss modal.
+
 ```js
 Navigation.dismissModal(this.props.containerId);
 ```

docs/docs/v1tov2diff.md

@@ -188,12 +188,14 @@ Navigation.events().onAppLaunched(() => {
 
 #### registerContainer(screenID, generator)
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
+
 ```js
 Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
 ```
 
 #### setRoot({params})
 Start a Single page app with two side menus:
+
 ```js
 Navigation.setRoot({
       container: {
@@ -220,6 +222,7 @@ Navigation.setRoot({
     });
 ```
 Start a tab based app:
+
 ```js
 Navigation.setRoot({
       tabs: [
@@ -247,6 +250,7 @@ Navigation.setRoot({
 
 #### push(params)
 Push a new screen into this screen's navigation stack.
+
 ```js
 Navigation.push(this.props.containerId, {
       name: 'navigation.playground.PushedScreen',
@@ -255,20 +259,24 @@ Navigation.push(this.props.containerId, {
 ```
 #### pop(containerId)
 Pop the top screen from this screen's navigation stack.
+
 ```js
 Navigation.pop(this.props.containerId);
 ```
 #### popTo(params)
+
 ```js
 Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
 ```
 #### popToRoot()
 Pop all the screens until the root from this screen's navigation stack
+
 ```js
 Navigation.popToRoot(this.props.containerId);
 ```
 #### showModal(params = {})
 Show a screen as a modal.
+
 ```js
 Navigation.showModal({
       container: {
@@ -281,11 +289,13 @@ Navigation.showModal({
 ```
 #### dismissModal(containerId)
 Dismiss modal.
+
 ```js
 Navigation.dismissModal(this.props.containerId);
 ```
 #### dismissAllModals()
 Dismiss all the current modals at the same time.
+
 ```js
 Navigation.dismissAllModals();
 ```

lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java

@@ -41,14 +41,14 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
 
 	@Override
 	public void invokeDefaultOnBackPressed() {
-		onBackPressed();
+        if (!navigator.handleBack()) {
+		    super.onBackPressed();
+        }
 	}
 
 	@Override
 	public void onBackPressed() {
-		if (!navigator.handleBack()) {
-			super.onBackPressed();
-		}
+        app().getReactGateway().onBackPressed();
 	}
 
 	@Override

lib/android/app/src/main/java/com/reactnativenavigation/react/ReactGateway.java

@@ -46,4 +46,8 @@ public class ReactGateway {
 	public boolean onKeyUp(final int keyCode) {
 		return jsDevReloadHandler.onKeyUp(keyCode);
 	}
+
+    public void onBackPressed() {
+	    reactNativeHost.getReactInstanceManager().onBackPressed();
+    }
 }

playground/src/containers/BackHandlerScreen.js

@@ -0,0 +1,75 @@
+const React = require('react');
+const { Component } = require('react');
+
+const { View, Text, Button, BackHandler } = require('react-native');
+
+class BackHandlerScreen extends Component {
+  static get navigationOptions() {
+    return {
+      topBar: {
+        title: 'Back Handler',
+        textColor: 'black',
+        textFontSize: 16
+      }
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.addBackHandler = this.addBackHandler.bind(this);
+    this.removeBackHandler = this.removeBackHandler.bind(this);
+    this.backHandler = () => {
+      this.setState({
+        backPress: 'Back button pressed!'
+      });
+      return true;
+    };
+    this.state = {
+      backPress: ''
+    };
+  }
+
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>{`Back Handler Screen`}</Text>
+        <Text style={styles.h2}>{this.state.backPress}</Text>
+        <Button title="add back handler" onPress={this.addBackHandler} />
+        <Button title="remove back handler" onPress={this.removeBackHandler} />
+      </View>
+    );
+  }
+
+  addBackHandler() {
+    BackHandler.addEventListener('hardwareBackPress', this.backHandler);
+  }
+
+  removeBackHandler() {
+    BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
+  }
+}
+
+const styles = {
+  root: {
+    flex: 1,
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  h2: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 10
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+};
+
+module.exports = BackHandlerScreen;

playground/src/containers/WelcomeScreen.js

@@ -12,6 +12,7 @@ class WelcomeScreen extends Component {
     this.onClickLifecycleScreen = this.onClickLifecycleScreen.bind(this);
     this.onClickPushOptionsScreen = this.onClickPushOptionsScreen.bind(this);
     this.onClickPushOrientationMenuScreen = this.onClickPushOrientationMenuScreen.bind(this);
+    this.onClickBackHandler = this.onClickBackHandler.bind(this);
   }
 
   render() {
@@ -23,6 +24,7 @@ class WelcomeScreen extends Component {
         <Button title="Push Lifecycle Screen" onPress={this.onClickLifecycleScreen} />
         <Button title="Push" onPress={this.onClickPush} />
         <Button title="Push Options Screen" onPress={this.onClickPushOptionsScreen} />
+        <Button title="Back Handler" onPress={this.onClickBackHandler} />
         <Button title="Show Modal" onPress={this.onClickShowModal} />
         <Button title="Show Redbox" onPress={this.onClickShowRedbox} />
         <Button title="Orientation" onPress={this.onClickPushOrientationMenuScreen} />
@@ -134,6 +136,12 @@ class WelcomeScreen extends Component {
     });
   }
 
+  onClickBackHandler() {
+    Navigation.push(this.props.containerId, {
+      name: 'navigation.playground.BackHandlerScreen'
+    });
+  }
+
   onClickPushOrientationMenuScreen() {
     Navigation.push(this.props.containerId, {
       name: 'navigation.playground.OrientationSelectScreen'

playground/src/containers/index.js

@@ -9,6 +9,7 @@ const OrientationSelectScreen = require('./OrientationSelectScreen');
 const OrientationDetectScreen = require('./OrientationDetectScreen');
 const ScrollViewScreen = require('./ScrollViewScreen');
 const CustomDialog = require('./CustomDialog');
+const BandHandlerScreen = require('./BackHandlerScreen');
 
 function registerContainers() {
   Navigation.registerContainer(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
@@ -21,6 +22,7 @@ function registerContainers() {
   Navigation.registerContainer(`navigation.playground.OrientationSelectScreen`, () => OrientationSelectScreen);
   Navigation.registerContainer(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);
   Navigation.registerContainer('navigation.playground.CustomDialog', () => CustomDialog);
+  Navigation.registerContainer('navigation.playground.BackHandlerScreen', () => BandHandlerScreen);
 }
 
 module.exports = {