From d368ddac41efe20abf2fc1a4c48e496b8a5acc16 Mon Sep 17 00:00:00 2001
From: Adam Miskiewicz <adam@sk3vy.com>
Date: Fri, 20 Apr 2018 07:03:25 -0700
Subject: [PATCH] Make StackNavigator keyboard aware (#3951)

* Make StackNavigator keyboard aware

One thing that has always annoyed me in React Navigation is the handling of the keyboard. When a keyboard is visible on screen and a navigation action occurs (either by tapping a button or using a gesture), the keyboard tends to stay on screen until the transition completes. This feels janky and broken. On native iOS, for instance, the keyboard hides immediately when the navigation starts, and if the transition is cancelled (say, when the user releases the gesture), the keyboard reappears.

This PR introduces a "KeyboardAwareNavigator" higher order component that is enabled on the StackNavigator, unless a `disableKeyboardHandling` prop is passed into the StackNavigator's configuration.

* Set status bar in keyboard handling example

* Call gesture props in keyboard aware navigator if available

* Fix formatting
---
 .../examples/NavigationPlayground/js/App.js   |  7 +++
 .../js/KeyboardHandlingExample.js             | 62 +++++++++++++++++++
 .../createKeyboardAwareNavigator.js           | 49 +++++++++++++++
 .../src/navigators/createNavigator.js         |  1 +
 .../src/navigators/createStackNavigator.js    |  7 ++-
 .../react-navigation/src/react-navigation.js  |  3 +-
 .../src/views/StackView/StackView.js          |  3 +
 .../src/views/StackView/StackViewLayout.js    |  6 ++
 8 files changed, 136 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-navigation/examples/NavigationPlayground/js/KeyboardHandlingExample.js
 create mode 100644 packages/react-navigation/src/navigators/createKeyboardAwareNavigator.js

diff --git a/packages/react-navigation/examples/NavigationPlayground/js/App.js b/packages/react-navigation/examples/NavigationPlayground/js/App.js
index a5abafca..c091ca6c 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/App.js
+++ b/packages/react-navigation/examples/NavigationPlayground/js/App.js
@@ -34,6 +34,7 @@ import StackWithTranslucentHeader from './StackWithTranslucentHeader';
 import SimpleTabs from './SimpleTabs';
 import SwitchWithStacks from './SwitchWithStacks';
 import TabsWithNavigationFocus from './TabsWithNavigationFocus';
+import KeyboardHandlingExample from './KeyboardHandlingExample';
 
 const ExampleInfo = {
   SimpleStack: {
@@ -114,6 +115,11 @@ const ExampleInfo = {
     name: 'withNavigationFocus',
     description: 'Receive the focus prop to know when a screen is focused',
   },
+  KeyboardHandlingExample: {
+    name: 'Keyboard Handling Example',
+    description:
+      'Demo automatic handling of keyboard showing/hiding inside StackNavigator',
+  },
 };
 
 const ExampleRoutes = {
@@ -143,6 +149,7 @@ const ExampleRoutes = {
     path: 'settings',
   },
   TabsWithNavigationFocus,
+  KeyboardHandlingExample,
 };
 
 type State = {
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/KeyboardHandlingExample.js b/packages/react-navigation/examples/NavigationPlayground/js/KeyboardHandlingExample.js
new file mode 100644
index 00000000..7a0674a5
--- /dev/null
+++ b/packages/react-navigation/examples/NavigationPlayground/js/KeyboardHandlingExample.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { StatusBar, View, TextInput, InteractionManager } from 'react-native';
+import { createStackNavigator, withNavigationFocus } from 'react-navigation';
+import { Button } from './commonComponents/ButtonWithMargin';
+
+class ScreenOne extends React.Component {
+  static navigationOptions = {
+    title: 'Home',
+  };
+
+  render() {
+    const { navigation } = this.props;
+    return (
+      <View style={{ paddingTop: 30 }}>
+        <Button
+          onPress={() => navigation.push('ScreenTwo')}
+          title="Push screen with focused text input"
+        />
+        <Button onPress={() => navigation.goBack(null)} title="Go Home" />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+}
+
+class ScreenTwo extends React.Component {
+  static navigationOptions = {
+    title: 'Screen w/ Input',
+  };
+
+  componentDidMount() {
+    InteractionManager.runAfterInteractions(() => {
+      this._textInput.focus();
+    });
+  }
+
+  render() {
+    const { navigation } = this.props;
+    return (
+      <View style={{ paddingTop: 30 }}>
+        <View style={{ alignSelf: 'center', paddingVertical: 20 }}>
+          <TextInput
+            ref={c => (this._textInput = c)}
+            style={{
+              backgroundColor: 'white',
+              height: 24,
+              width: 150,
+              borderColor: '#555',
+              borderWidth: 1,
+            }}
+          />
+        </View>
+        <Button onPress={() => navigation.pop()} title="Pop" />
+      </View>
+    );
+  }
+}
+
+export default createStackNavigator({
+  ScreenOne,
+  ScreenTwo: withNavigationFocus(ScreenTwo),
+});
diff --git a/packages/react-navigation/src/navigators/createKeyboardAwareNavigator.js b/packages/react-navigation/src/navigators/createKeyboardAwareNavigator.js
new file mode 100644
index 00000000..8da2d5bf
--- /dev/null
+++ b/packages/react-navigation/src/navigators/createKeyboardAwareNavigator.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+
+export default Navigator =>
+  class KeyboardAwareNavigator extends React.Component {
+    static router = Navigator.router;
+    _previouslyFocusedTextInput = null;
+
+    render() {
+      return (
+        <Navigator
+          {...this.props}
+          onGestureBegin={this._handleGestureBegin}
+          onGestureCanceled={this._handleGestureCanceled}
+          onGestureFinish={this._handleGestureFinish}
+          onTransitionStart={this._handleTransitionStart}
+        />
+      );
+    }
+
+    _handleGestureBegin = () => {
+      this._previouslyFocusedTextInput = TextInput.State.currentlyFocusedField();
+      if (this._previouslyFocusedTextInput) {
+        TextInput.State.blurTextInput(this._previouslyFocusedTextInput);
+      }
+      this.props.onGestureBegin && this.props.onGestureBegin();
+    };
+
+    _handleGestureCanceled = () => {
+      if (this._previouslyFocusedTextInput) {
+        TextInput.State.focusTextInput(this._previouslyFocusedTextInput);
+      }
+      this.props.onGestureFinish && this.props.onGestureFinish();
+    };
+
+    _handleGestureFinish = () => {
+      this._previouslyFocusedTextInput = null;
+      this.props.onGestureCanceled && this.props.onGestureCanceled();
+    };
+
+    _handleTransitionStart = (transitionProps, prevTransitionProps) => {
+      const currentField = TextInput.State.currentlyFocusedField();
+      if (currentField) {
+        TextInput.State.blurTextInput(currentField);
+      }
+      this.props.onTransitionStart &&
+        this.props.onTransitionStart(transitionProps, prevTransitionProps);
+    };
+  };
diff --git a/packages/react-navigation/src/navigators/createNavigator.js b/packages/react-navigation/src/navigators/createNavigator.js
index 7d0e16d7..6401aeb6 100644
--- a/packages/react-navigation/src/navigators/createNavigator.js
+++ b/packages/react-navigation/src/navigators/createNavigator.js
@@ -95,6 +95,7 @@ function createNavigator(NavigatorView, router, navigationConfig) {
 
       return (
         <NavigatorView
+          {...this.props}
           screenProps={screenProps}
           navigation={navigation}
           navigationConfig={navigationConfig}
diff --git a/packages/react-navigation/src/navigators/createStackNavigator.js b/packages/react-navigation/src/navigators/createStackNavigator.js
index 9a85467b..a9ca5535 100644
--- a/packages/react-navigation/src/navigators/createStackNavigator.js
+++ b/packages/react-navigation/src/navigators/createStackNavigator.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import createNavigationContainer from '../createNavigationContainer';
+import createKeyboardAwareNavigator from './createKeyboardAwareNavigator';
 import createNavigator from './createNavigator';
 import StackView from '../views/StackView/StackView';
 import StackRouter from '../routers/StackRouter';
@@ -11,6 +12,7 @@ function createStackNavigator(routeConfigMap, stackConfig = {}) {
     initialRouteParams,
     paths,
     navigationOptions,
+    disableKeyboardHandling,
   } = stackConfig;
 
   const stackRouterConfig = {
@@ -24,7 +26,10 @@ function createStackNavigator(routeConfigMap, stackConfig = {}) {
   const router = StackRouter(routeConfigMap, stackRouterConfig);
 
   // Create a navigator with StackView as the view
-  const Navigator = createNavigator(StackView, router, stackConfig);
+  let Navigator = createNavigator(StackView, router, stackConfig);
+  if (!disableKeyboardHandling) {
+    Navigator = createKeyboardAwareNavigator(Navigator);
+  }
 
   // HOC to provide the navigation prop for the top-level navigator (when the prop is missing)
   return createNavigationContainer(Navigator);
diff --git a/packages/react-navigation/src/react-navigation.js b/packages/react-navigation/src/react-navigation.js
index e61031f0..1ed5565c 100644
--- a/packages/react-navigation/src/react-navigation.js
+++ b/packages/react-navigation/src/react-navigation.js
@@ -51,7 +51,8 @@ module.exports = {
     console.warn(
       'TabNavigator is deprecated. Please use the createBottomTabNavigator or createMaterialTopNavigator instead.'
     );
-    return require('react-navigation-deprecated-tab-navigator').createTabNavigator;
+    return require('react-navigation-deprecated-tab-navigator')
+      .createTabNavigator;
   },
   get createBottomTabNavigator() {
     return require('react-navigation-tabs').createBottomTabNavigator;
diff --git a/packages/react-navigation/src/views/StackView/StackView.js b/packages/react-navigation/src/views/StackView/StackView.js
index 952c1020..2d1a61a7 100644
--- a/packages/react-navigation/src/views/StackView/StackView.js
+++ b/packages/react-navigation/src/views/StackView/StackView.js
@@ -60,6 +60,9 @@ class StackView extends React.Component {
     return (
       <StackViewLayout
         {...navigationConfig}
+        onGestureBegin={this.props.onGestureBegin}
+        onGestureCanceled={this.props.onGestureCanceled}
+        onGestureEnd={this.props.onGestureEnd}
         screenProps={screenProps}
         descriptors={this.props.descriptors}
         transitionProps={transitionProps}
diff --git a/packages/react-navigation/src/views/StackView/StackViewLayout.js b/packages/react-navigation/src/views/StackView/StackViewLayout.js
index 141a41c8..60de2430 100644
--- a/packages/react-navigation/src/views/StackView/StackViewLayout.js
+++ b/packages/react-navigation/src/views/StackView/StackViewLayout.js
@@ -241,12 +241,14 @@ class StackViewLayout extends React.Component {
           onPanResponderTerminate: () => {
             this._isResponding = false;
             this._reset(index, 0);
+            this.props.onGestureCanceled && this.props.onGestureCanceled();
           },
           onPanResponderGrant: () => {
             position.stopAnimation((value: number) => {
               this._isResponding = true;
               this._gestureStartValue = value;
             });
+            this.props.onGestureBegin && this.props.onGestureBegin();
           },
           onMoveShouldSetPanResponder: (event, gesture) => {
             if (index !== scene.index) {
@@ -345,10 +347,12 @@ class StackViewLayout extends React.Component {
               // If the speed of the gesture release is significant, use that as the indication
               // of intent
               if (gestureVelocity < -0.5) {
+                this.props.onGestureCanceled && this.props.onGestureCanceled();
                 this._reset(immediateIndex, resetDuration);
                 return;
               }
               if (gestureVelocity > 0.5) {
+                this.props.onGestureFinish && this.props.onGestureFinish();
                 this._goBack(immediateIndex, goBackDuration);
                 return;
               }
@@ -356,8 +360,10 @@ class StackViewLayout extends React.Component {
               // Then filter based on the distance the screen was moved. Over a third of the way swiped,
               // and the back will happen.
               if (value <= index - POSITION_THRESHOLD) {
+                this.props.onGestureFinish && this.props.onGestureFinish();
                 this._goBack(immediateIndex, goBackDuration);
               } else {
+                this.props.onGestureCanceled && this.props.onGestureCanceled();
                 this._reset(immediateIndex, resetDuration);
               }
             });