From faddb97ec9ef1d8cc4e48e84cf185cfeca72b906 Mon Sep 17 00:00:00 2001
From: Martin Malfertheiner <mortl8@hotmail.com>
Date: Sun, 5 Nov 2017 07:44:03 +0800
Subject: [PATCH] Fix issue #618 - TabBarBottom should hide itself when
 Keyboard is activated (#1764)

* Fix issue #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
---
 .../src/views/TabView/TabBarBottom.js         | 46 +++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/react-navigation/src/views/TabView/TabBarBottom.js b/packages/react-navigation/src/views/TabView/TabBarBottom.js
index d1fd6431..51a88381 100644
--- a/packages/react-navigation/src/views/TabView/TabBarBottom.js
+++ b/packages/react-navigation/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;
   }
 }