Merge pull request #4 from RSSfeed/fix-android

fix android adjustresize and ios when used with react navigation

index.js

@@ -1,7 +1,9 @@
 import KeyboardAccessoryView from './lib/KeyboardAccessoryView';
 import KeyboardAccessoryNavigation from './lib/KeyboardAccessoryNavigation';
+import KeyboardAwareTabBarComponent from './lib/KeyboardAwareTabBarComponent';
 
 export {
   KeyboardAccessoryView,
   KeyboardAccessoryNavigation,
+  KeyboardAwareTabBarComponent
 }

lib/KeyboardAccessoryView.js

@@ -20,16 +20,16 @@ const accessoryAnimation = (duration, easing, animationConfig = null) => {
 
   if (Platform.OS === 'android') {
     return {
-       duration: 200,
-       create: {
-         duration: 200,
-         type: LayoutAnimation.Types.linear,
-         property: LayoutAnimation.Properties.opacity
-       },
-       update: {
-         type: LayoutAnimation.Types.linear,
-       }
-     }
+      duration: 200,
+      create: {
+        duration: 200,
+        type: LayoutAnimation.Types.linear,
+        property: LayoutAnimation.Properties.opacity
+      },
+      update: {
+        type: LayoutAnimation.Types.linear,
+      }
+    }
   }
 
   return LayoutAnimation.create(
@@ -79,12 +79,34 @@ class KeyboardAccessoryView extends Component {
       return;
     }
 
-    const { animationConfig, animateOn } = this.props;
+    const keyboardHeight = Platform.select({
+      ios: keyboardEvent.endCoordinates.height,
+      android: this.props.androidWindowSoftInputAdjustResize
+        ? this.props.bumperHeight
+        : keyboardEvent.endCoordinates.height
+    });
 
-    if (animateOn === 'all' || Platform.OS === animateOn) {
-      LayoutAnimation.configureNext(
-        accessoryAnimation(keyboardEvent.duration, keyboardEvent.easing, animationConfig)
-      );
+    const keyboardAnimate = () => {
+      const { animationConfig, animateOn } = this.props;
+
+      if (animateOn === 'all' || Platform.OS === animateOn) {
+        LayoutAnimation.configureNext(
+          accessoryAnimation(keyboardEvent.duration, keyboardEvent.easing, animationConfig)
+        );
+      }
+
+      this.setState({
+        isKeyboardVisible: true,
+        keyboardHeight: keyboardHeight
+      })
+    };
+
+    if (Platform.OS === 'ios' || typeof this.props.onKeyboardShowDelay !== 'number') {
+      keyboardAnimate();
+    } else {
+      setTimeout(() => {
+        keyboardAnimate()
+      }, this.props.onKeyboardShowDelay);
     }
 
     this.setState({
@@ -113,6 +135,7 @@ class KeyboardAccessoryView extends Component {
   render() {
     const { isKeyboardVisible , accessoryHeight, keyboardHeight } = this.state;
     const { bumperHeight, alwaysVisible, visibleOpacity, hiddenOpacity, hideBorder, style } = this.props;
+
     return (
       <View style={{ height: (isKeyboardVisible || alwaysVisible ? accessoryHeight : 0) }}>
         <View style={[
@@ -144,6 +167,11 @@ KeyboardAccessoryView.propTypes = {
   bumperHeight: PropTypes.number,
   visibleOpacity: PropTypes.number,
   hiddenOpacity: PropTypes.number,
+  onKeyboardShowDelay: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.bool
+  ]),
+  androidWindowSoftInputAdjustResize: PropTypes.bool,
   alwaysVisible: PropTypes.bool,
   hideBorder: PropTypes.bool,
 }
@@ -153,6 +181,7 @@ KeyboardAccessoryView.defaultProps = {
   bumperHeight: 15,
   visibleOpacity: 1,
   hiddenOpacity: 0,
+  androidWindowSoftInputAdjustResize: false,
   alwaysVisible: false,
   hideBorder: false,
 }

lib/KeyboardAwareTabBarComponent.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import { Keyboard, Platform } from 'react-native'
+import { TabBarBottom } from 'react-navigation'
+
+export default class KeyboardAwareTabBarComponent extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.keyboardWillShow = this.keyboardWillShow.bind(this);
+    this.keyboardWillHide = this.keyboardWillHide.bind(this);
+
+    this.state = {
+      isVisible: true
+    }
+  }
+
+  componentWillMount() {
+    const keyboardShowEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const keyboardHideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    this.keyboardWillShowSub = Keyboard.addListener(keyboardShowEvent, this.keyboardWillShow);
+    this.keyboardWillHideSub = Keyboard.addListener(keyboardHideEvent, this.keyboardWillHide);
+  }
+
+  componentWillUnmount() {
+    this.keyboardWillShowSub.remove();
+    this.keyboardWillHideSub.remove();
+  }
+
+  keyboardWillShow(event) {
+    this.setState({
+      isVisible: false
+    })
+  }
+
+  keyboardWillHide(event) {
+    this.setState({
+      isVisible: true
+    })
+  }
+
+  render() {
+    const TabBarComponent = this.props.tabBarComponent;
+
+    return this.state.isVisible
+      ? <TabBarComponent {...this.props} />
+      : null
+  }
+}
+
+KeyboardAwareTabBarComponent.propTypes = {
+  tabBarComponent: PropTypes.func
+};
+
+KeyboardAwareTabBarComponent.defaultProps = {
+  tabBarComponent: TabBarBottom
+};
+