Fix issue react-navigation#618 - TabBarBottom should hide itself when Keyboard is activated (react-navigation#1764)

mmalfertheiner · vonovak · commit 79317e83aef9 · 2017-11-05T00:44:03.000+01:00
* Fix issue react-navigation#618 - TabBarBottom should hide when Keyboard is activated * fix undefined check for _keyboardDidHideSub * fix prettier * Update TabBarBottom.js * Update TabBarBottom.js * Update TabBarBottom.js * Update TabBarBottom.js * Update TabBarBottom.js
diff --git a/src/views/TabView/TabBarBottom.js b/src/views/TabView/TabBarBottom.js
@@ -7,6 +7,7 @@ import {
   StyleSheet,
   View,
   Platform,
+  Keyboard,
 } from 'react-native';
 import TabBarIcon from './TabBarIcon';
 import SafeAreaView from '../SafeAreaView';
@@ -46,11 +47,15 @@ type Props = {
   isLandscape: boolean,
 };
 
+type State = {
+  isVisible: boolean,
+};
+
 const majorVersion = parseInt(Platform.Version, 10);
 const isIos = Platform.OS === 'ios';
 const useHorizontalTabs = majorVersion >= 11 && isIos;
 
-class TabBarBottom extends React.PureComponent<Props> {
+class TabBarBottom extends React.PureComponent<Props, State> {
   // See https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/UITabBar.html
   static defaultProps = {
     activeTintColor: '#3478f6', // Default active tint color in iOS 10
@@ -64,6 +69,41 @@ class TabBarBottom extends React.PureComponent<Props> {
 
   props: Props;
 
+  state: State = {
+    isVisible: true,
+  };
+
+  _keyboardDidShowSub = undefined;
+  _keyboardDidHideSub = undefined;
+
+  componentWillMount() {
+    this._keyboardDidShowSub = Keyboard.addListener(
+      'keyboardDidShow',
+      this._keyboardDidShow
+    );
+    this._keyboardDidHideSub = Keyboard.addListener(
+      'keyboardDidHide',
+      this._keyboardDidHide
+    );
+  }
+
+  componentWillUnmount() {
+    this._keyboardDidShowSub !== undefined && this._keyboardDidShowSub.remove();
+    this._keyboardDidHideSub !== undefined && this._keyboardDidHideSub.remove();
+  }
+
+  _keyboardDidShow = () => {
+    this.setState({
+      isVisible: false,
+    });
+  };
+
+  _keyboardDidHide = () => {
+    this.setState({
+      isVisible: true,
+    });
+  };
+
   _renderLabel = (scene: TabScene) => {
     const {
       position,
@@ -178,7 +218,7 @@ class TabBarBottom extends React.PureComponent<Props> {
       style,
     ];
 
-    return (
+    return this.state.isVisible ? (
       <Animated.View>
         <SafeAreaView
           style={tabBarStyle}
@@ -228,7 +268,7 @@ class TabBarBottom extends React.PureComponent<Props> {
           })}
         </SafeAreaView>
       </Animated.View>
-    );
+    ) : null;
   }
 }
 
