Modals support BackHandler

closes #2840

e2e/BackHandler.test.js

@@ -0,0 +1,55 @@
+const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
+const Android = require('./AndroidUtils');
+
+const { elementByLabel, elementById, sleep } = Utils;
+
+describe(':android: screen stack', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+  });
+
+  it('override hardware back button', async () => {
+    await elementByLabel('BACK HANDLER').tap();
+    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
+
+    await elementByLabel('ADD BACK HANDLER').tap();
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
+
+    await elementByLabel('REMOVE BACK HANDLER').tap();
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+  });
+
+  it('override hardware back button in modal with stack', async () => {
+    await elementByLabel('BACK HANDLER').tap();
+    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
+
+    await elementByLabel('SHOW MODAL WITH STACK').tap();
+    await elementByLabel('ADD BACK HANDLER').tap();
+
+    // Back is handled in Js
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementByLabel('Back button pressed!')).toBeVisible();
+
+    // pop
+    await elementByLabel('REMOVE BACK HANDLER').tap();
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
+
+    // modal dismissed
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
+
+    // main
+    Android.pressBack();
+    await sleep(100);
+    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+  });
+});

e2e/ScreenStack.test.js

@@ -74,19 +74,4 @@ describe('screen stack', () => {
     await expect(elementById('TestLabel')).toBeVisible();
     await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
   });
-
-  it(':android: override hardware back button', async () => {
-    await elementByLabel('BACK HANDLER').tap();
-    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
-
-    await elementByLabel('ADD BACK HANDLER').tap();
-    Android.pressBack();
-    await sleep(100);
-    await expect(elementByLabel('Back Handler Screen')).toBeVisible();
-
-    await elementByLabel('REMOVE BACK HANDLER').tap();
-    Android.pressBack();
-    await sleep(100);
-    await expect(elementByLabel('React Native Navigation!')).toBeVisible();
-  });
 });

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ModalStack.java

@@ -93,4 +93,8 @@ class ModalStack implements ModalListener {
     private void performOnModal(@Nullable Modal modal, Task<Modal> task) {
         if (modal != null) task.run(modal);
     }
+
+    public boolean handleBack() {
+        return !modals.isEmpty() && peek().handleBack();
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/Navigator.java

@@ -46,7 +46,7 @@ public class Navigator extends ParentController implements ModalListener {
 
     @Override
     public boolean handleBack() {
-        return root != null && root.handleBack();
+        return modalStack.isEmpty() ? root.handleBack() : modalStack.handleBack();
     }
 
     @Override

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/Modal.java

@@ -52,11 +52,9 @@ public class Modal implements DialogInterface.OnKeyListener, DialogInterface.OnD
     public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
         if (keyCode == KeyEvent.KEYCODE_BACK) {
             if (event.getAction() == KeyEvent.ACTION_UP) {
-                if (viewController.handleBack()) {
-                    return true;
-                }
-                dialog.dismiss();
+                viewController.getActivity().onBackPressed();
             }
+            return true;
         }
         return false;
     }
@@ -73,4 +71,11 @@ public class Modal implements DialogInterface.OnKeyListener, DialogInterface.OnD
     public void onShow(DialogInterface dialog) {
         modalListener.onModalDisplay(this);
     }
+
+    public boolean handleBack() {
+        if (!viewController.handleBack()) {
+            dialog.dismiss();
+        }
+        return true;
+    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/NavigatorTest.java

@@ -206,12 +206,19 @@ public class NavigatorTest extends BaseTest {
 
     @Test
     public void handleBack_DelegatesToRoot() throws Exception {
-        assertThat(uut.handleBack()).isFalse();
-        ViewController spy = spy(child1);
-        uut.setRoot(spy, new MockPromise());
-        when(spy.handleBack()).thenReturn(true);
+        ViewController root = spy(child1);
+        uut.setRoot(root, new MockPromise());
+        when(root.handleBack()).thenReturn(true);
         assertThat(uut.handleBack()).isTrue();
-        verify(spy, times(1)).handleBack();
+        verify(root, times(1)).handleBack();
+    }
+
+    @Test
+    public void handleBack_modalTakePrecedenceOverRoot() throws Exception {
+        ViewController root = spy(child1);
+        uut.setRoot(root, new MockPromise());
+        uut.showModal(child2, new MockPromise());
+        verify(root, times(0)).handleBack();
     }
 
     @Test

playground/src/screens/BackHandlerModalScreen.js

@@ -0,0 +1,71 @@
+const React = require('react');
+const { Component } = require('react');
+
+const { View, Text, Button, BackHandler } = require('react-native');
+
+class BackHandlerModalScreen extends Component {
+  static get options() {
+    return {
+      topBar: {
+        title: 'Back Handler'
+      }
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    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 = BackHandlerModalScreen;

playground/src/screens/BackHandlerScreen.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const { Component } = require('react');
-
+const { Navigation } = require('react-native-navigation');
 const { View, Text, Button, BackHandler } = require('react-native');
 
 class BackHandlerScreen extends Component {
@@ -16,8 +16,6 @@ class BackHandlerScreen extends Component {
 
   constructor(props) {
     super(props);
-    this.addBackHandler = this.addBackHandler.bind(this);
-    this.removeBackHandler = this.removeBackHandler.bind(this);
     this.backHandler = () => {
       this.setState({
         backPress: 'Back button pressed!'
@@ -34,8 +32,10 @@ class BackHandlerScreen extends Component {
       <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} />
+        <Button title='add back handler' onPress={() => this.addBackHandler()} />
+        <Button title='remove back handler' onPress={() => this.removeBackHandler()} />
+        <Button title='show single component modal' onPress={() => this.showModal()} />
+        <Button title='show modal with stack' onPress={() => this.showModalWitchStack()} />
       </View>
     );
   }
@@ -48,6 +48,33 @@ class BackHandlerScreen extends Component {
     BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
   }
 
+  showModal() {
+    Navigation.showModal({
+      component: {
+        name: 'navigation.playground.BackHandlerModalScreen'
+      }
+    });
+  }
+
+  showModalWitchStack() {
+    Navigation.showModal({
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'navigation.playground.BackHandlerModalScreen'
+            }
+          },
+          {
+            component: {
+              name: 'navigation.playground.BackHandlerModalScreen'
+            }
+          }
+        ]
+      }
+    });
+  }
+
   componentWillUnmount() {
     BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
   }

playground/src/screens/index.js

@@ -18,6 +18,7 @@ const TopTabScreen = require('./TopTabScreen');
 const TopTabOptionsScreen = require('./TopTabOptionsScreen');
 const CustomTopBar = require('./CustomTopBar');
 const Alert = require('./Alert');
+const BackHandlerModalScreen = require('./BackHandlerModalScreen');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -39,6 +40,7 @@ function registerScreens() {
   Navigation.registerComponent('navigation.playground.TopTabOptionsScreen', () => TopTabOptionsScreen);
   Navigation.registerComponent('navigation.playground.CustomTopBar', () => CustomTopBar);
   Navigation.registerComponent('navigation.playground.alert', () => Alert);
+  Navigation.registerComponent('navigation.playground.BackHandlerModalScreen', () => BackHandlerModalScreen);
 }
 
 module.exports = {