react-navigation-tabs+1.0.2.patch

diff --git a/node_modules/react-navigation-tabs/src/views/BottomTabBar.js b/node_modules/react-navigation-tabs/src/views/BottomTabBar.js
index 219d26f..be514f3 100644
--- a/node_modules/react-navigation-tabs/src/views/BottomTabBar.js
+++ b/node_modules/react-navigation-tabs/src/views/BottomTabBar.js
@@ -6,7 +6,8 @@ import {
   TouchableWithoutFeedback,
   StyleSheet,
   View,
-  Platform,
+  Keyboard,
+  Platform
 } from 'react-native';
 import { SafeAreaView } from '@react-navigation/native';
 
@@ -24,7 +25,7 @@ export type TabBarOptions = {
   labelStyle: any,
   tabStyle: any,
   adaptive?: boolean,
-  style: any,
+  style: any
 };
 
 type Props = TabBarOptions & {
@@ -40,7 +41,7 @@ type Props = TabBarOptions & {
   renderIcon: any,
   dimensions: { width: number, height: number },
   isLandscape: boolean,
-  safeAreaInset: { top: string, right: string, bottom: string, left: string },
+  safeAreaInset: { top: string, right: string, bottom: string, left: string }
 };
 
 const majorVersion = parseInt(Platform.Version, 10);
@@ -83,7 +84,67 @@ class TabBarBottom extends React.Component<Props> {
     showIcon: true,
     allowFontScaling: true,
     adaptive: isIOS11,
-    safeAreaInset: { bottom: 'always', top: 'never' },
+    safeAreaInset: { bottom: 'always', top: 'never' }
+  };
+
+  state = {
+    layout: { height: 0, width: 0 },
+    keyboard: false,
+    visible: new Animated.Value(1)
+  };
+
+  componentDidMount() {
+    if (Platform.OS === 'ios') {
+      Keyboard.addListener('keyboardWillShow', this._handleKeyboardShow);
+      Keyboard.addListener('keyboardWillHide', this._handleKeyboardHide);
+    } else {
+      Keyboard.addListener('keyboardDidShow', this._handleKeyboardShow);
+      Keyboard.addListener('keyboardDidHide', this._handleKeyboardHide);
+    }
+  }
+
+  componentWillUnmount() {
+    if (Platform.OS === 'ios') {
+      Keyboard.removeListener('keyboardWillShow', this._handleKeyboardShow);
+      Keyboard.removeListener('keyboardWillHide', this._handleKeyboardHide);
+    } else {
+      Keyboard.removeListener('keyboardDidShow', this._handleKeyboardShow);
+      Keyboard.removeListener('keyboardDidHide', this._handleKeyboardHide);
+    }
+  }
+
+  _handleKeyboardShow = () =>
+    this.setState({ keyboard: true }, () =>
+      Animated.timing(this.state.visible, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true
+      }).start()
+    );
+
+  _handleKeyboardHide = () =>
+    Animated.timing(this.state.visible, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    }).start(() => {
+      this.setState({ keyboard: false });
+    });
+
+  _handleLayout = e => {
+    const { layout } = this.state;
+    const { height, width } = e.nativeEvent.layout;
+
+    if (height === layout.height && width === layout.width) {
+      return;
+    }
+
+    this.setState({
+      layout: {
+        height,
+        width
+      }
+    });
   };
 
   _renderLabel = ({ route, focused }) => {
@@ -93,7 +154,7 @@ class TabBarBottom extends React.Component<Props> {
       labelStyle,
       showLabel,
       showIcon,
-      allowFontScaling,
+      allowFontScaling
     } = this.props;
 
     if (showLabel === false) {
@@ -113,7 +174,7 @@ class TabBarBottom extends React.Component<Props> {
             showIcon && this._shouldUseHorizontalLabels()
               ? styles.labelBeside
               : styles.labelBeneath,
-            labelStyle,
+            labelStyle
           ]}
           allowFontScaling={allowFontScaling}
         >
@@ -136,7 +197,7 @@ class TabBarBottom extends React.Component<Props> {
       inactiveTintColor,
       renderIcon,
       showIcon,
-      showLabel,
+      showLabel
     } = this.props;
     if (showIcon === false) {
       return null;
@@ -160,7 +221,7 @@ class TabBarBottom extends React.Component<Props> {
         style={[
           styles.iconWithExplicitHeight,
           showLabel === false && !horizontal && styles.iconWithoutLabel,
-          showLabel !== false && !horizontal && styles.iconWithLabel,
+          showLabel !== false && !horizontal && styles.iconWithLabel
         ]}
       />
     );
@@ -202,7 +263,7 @@ class TabBarBottom extends React.Component<Props> {
       onTabLongPress,
       safeAreaInset,
       style,
-      tabStyle,
+      tabStyle
     } = this.props;
 
     const { routes } = navigation.state;
@@ -212,49 +273,73 @@ class TabBarBottom extends React.Component<Props> {
       this._shouldUseHorizontalLabels() && !Platform.isPad
         ? styles.tabBarCompact
         : styles.tabBarRegular,
-      style,
+      style
     ];
 
     return (
-      <SafeAreaView style={tabBarStyle} forceInset={safeAreaInset}>
-        {routes.map((route, index) => {
-          const focused = index === navigation.state.index;
-          const scene = { route, focused };
-          const accessibilityLabel = this.props.getAccessibilityLabel({
-            route,
-          });
-          const testID = this.props.getTestID({ route });
-
-          const backgroundColor = focused
-            ? activeBackgroundColor
-            : inactiveBackgroundColor;
-
-          const ButtonComponent =
-            this.props.getButtonComponent({ route }) ||
-            TouchableWithoutFeedbackWrapper;
-
-          return (
-            <ButtonComponent
-              key={route.key}
-              onPress={() => onTabPress({ route })}
-              onLongPress={() => onTabLongPress({ route })}
-              testID={testID}
-              accessibilityLabel={accessibilityLabel}
-              style={[
-                styles.tab,
-                { backgroundColor },
-                this._shouldUseHorizontalLabels()
-                  ? styles.tabLandscape
-                  : styles.tabPortrait,
-                tabStyle,
-              ]}
-            >
-              {this._renderIcon(scene)}
-              {this._renderLabel(scene)}
-            </ButtonComponent>
-          );
-        })}
-      </SafeAreaView>
+      <Animated.View
+        style={[
+          styles.container,
+          {
+            // When the keyboard is shown, slide down the tab bar
+            transform: [
+              {
+                translateY: this.state.visible.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [this.state.layout.height, 0]
+                })
+              }
+            ],
+            // Absolutely position the tab bar so that the content is below it
+            // This is needed to avoid gap at bottom when the tab bar is hidden
+            position: this.state.keyboard ? 'absolute' : null
+          }
+        ]}
+        pointerEvents={
+          this.state.keyboard ? 'none' : 'auto'
+        }
+        onLayout={this._handleLayout}
+      >
+        <SafeAreaView style={tabBarStyle} forceInset={safeAreaInset}>
+          {routes.map((route, index) => {
+            const focused = index === navigation.state.index;
+            const scene = { route, focused };
+            const accessibilityLabel = this.props.getAccessibilityLabel({
+              route
+            });
+            const testID = this.props.getTestID({ route });
+
+            const backgroundColor = focused
+              ? activeBackgroundColor
+              : inactiveBackgroundColor;
+
+            const ButtonComponent =
+              this.props.getButtonComponent({ route }) ||
+              TouchableWithoutFeedbackWrapper;
+
+            return (
+              <ButtonComponent
+                key={route.key}
+                onPress={() => onTabPress({ route })}
+                onLongPress={() => onTabLongPress({ route })}
+                testID={testID}
+                accessibilityLabel={accessibilityLabel}
+                style={[
+                  styles.tab,
+                  { backgroundColor },
+                  this._shouldUseHorizontalLabels()
+                    ? styles.tabLandscape
+                    : styles.tabPortrait,
+                  tabStyle
+                ]}
+              >
+                {this._renderIcon(scene)}
+                {this._renderLabel(scene)}
+              </ButtonComponent>
+            );
+          })}
+        </SafeAreaView>
+      </Animated.View>
     );
   }
 }
@@ -267,47 +352,47 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: 'rgba(0, 0, 0, .3)',
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   tabBarCompact: {
-    height: COMPACT_HEIGHT,
+    height: COMPACT_HEIGHT
   },
   tabBarRegular: {
-    height: DEFAULT_HEIGHT,
+    height: DEFAULT_HEIGHT
   },
   tab: {
     flex: 1,
-    alignItems: isIos ? 'center' : 'stretch',
+    alignItems: isIos ? 'center' : 'stretch'
   },
   tabPortrait: {
     justifyContent: 'flex-end',
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
   tabLandscape: {
     justifyContent: 'center',
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   iconWithoutLabel: {
-    flex: 1,
+    flex: 1
   },
   iconWithLabel: {
-    flex: 1,
+    flex: 1
   },
   iconWithExplicitHeight: {
-    height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
+    height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT
   },
   label: {
     textAlign: 'center',
-    backgroundColor: 'transparent',
+    backgroundColor: 'transparent'
   },
   labelBeneath: {
     fontSize: 11,
-    marginBottom: 1.5,
+    marginBottom: 1.5
   },
   labelBeside: {
     fontSize: 12,
-    marginLeft: 15,
-  },
+    marginLeft: 15
+  }
 });
 
 export default withDimensions(TabBarBottom);