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

@@ -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 = {

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),
+});

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);
+    };
+  };

src/navigators/createNavigator.js

@@ -95,6 +95,7 @@ function createNavigator(NavigatorView, router, navigationConfig) {
 
       return (
         <NavigatorView
+          {...this.props}
           screenProps={screenProps}
           navigation={navigation}
           navigationConfig={navigationConfig}

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);

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;

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}

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);
               }
             });