Chore/delete deprecated proptype

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-native-keyboard-accessory",
-  "version": "0.1.9",
+  "name": "@datacamp/react-native-keyboard-accessory",
+  "version": "0.5.0",
   "description": "A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.",
   "author": {
     "name": "Arda Oğulcan Pektaş",
@@ -35,7 +35,7 @@
     "android"
   ],
   "license": "MIT",
-  "main": "index.js",
+  "main": "src/index.js",
   "peerDependencies": {
     "prop-types": ">= 15",
     "react": ">= 16",

src/KeyboardAccessoryNavigation.js

@@ -131,12 +131,12 @@ KeyboardAccessoryNavigation.propTypes = {
   nextHidden: PropTypes.bool,
   previousHidden: PropTypes.bool,
   tintColor: PropTypes.string,
-  accessoryStyle: (View.propTypes||ViewPropTypes).style,
-  previousButtonStyle: (View.propTypes||ViewPropTypes).style,
-  nextButtonStyle: (View.propTypes||ViewPropTypes).style,
-  doneButtonStyle: (View.propTypes||ViewPropTypes).style,
-  doneButtonTitleStyle: Text.propTypes.style,
-  infoMessageStyle: Text.propTypes.style,
+  accessoryStyle: PropTypes.object,
+  previousButtonStyle: PropTypes.object,
+  nextButtonStyle: PropTypes.object,
+  doneButtonStyle: PropTypes.object,
+  doneButtonTitleStyle: PropTypes.object,
+  infoMessageStyle: PropTypes.object,
   nextButtonDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']),
   previousButtonDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']),
 }

src/KeyboardAccessoryView.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
 import {
   View,
@@ -9,18 +9,17 @@ import {
   StyleSheet,
   ViewPropTypes,
   Dimensions
-} from 'react-native';
+} from "react-native";
 
 const accessoryAnimation = (duration, easing, animationConfig = null) => {
-
   if (animationConfig) {
-    if (typeof animationConfig === 'function') {
+    if (typeof animationConfig === "function") {
       return animationConfig(duration, easing);
     }
     return animationConfig;
   }
 
-  if (Platform.OS === 'android') {
+  if (Platform.OS === "android") {
     return {
       duration: 200,
       create: {
@@ -29,20 +28,21 @@ const accessoryAnimation = (duration, easing, animationConfig = null) => {
         property: LayoutAnimation.Properties.opacity
       },
       update: {
-        type: LayoutAnimation.Types.linear,
+        type: LayoutAnimation.Types.linear
       }
-    }
+    };
   }
 
   return LayoutAnimation.create(
     duration,
     LayoutAnimation.Types[easing],
-    LayoutAnimation.Properties.opacity,
-  )
-}
+    LayoutAnimation.Properties.opacity
+  );
+};
 
-const { height, width } = Dimensions.get('window')
-const isSafeAreaSupported = Platform.OS === 'ios' && (height > 800 || width > 800)
+const { height, width } = Dimensions.get("window");
+const isSafeAreaSupported =
+  Platform.OS === "ios" && (height > 800 || width > 800);
 
 class KeyboardAccessoryView extends Component {
   constructor(props) {
@@ -52,31 +52,42 @@ class KeyboardAccessoryView extends Component {
       keyboardHeight: 0,
       accessoryHeight: 50,
       visibleAccessoryHeight: 50,
-      isKeyboardVisible: false,
-    }
+      isKeyboardVisible: false
+    };
   }
 
-  componentDidMount () {
-    const keyboardShowEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const keyboardHideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+  componentDidMount() {
+    const keyboardShowEvent =
+      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const keyboardHideEvent =
+      Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
 
-    this.keyboardShowEventListener = Keyboard.addListener(keyboardShowEvent, this.handleKeyboardShow);
-    this.keyboardHideEventListener = Keyboard.addListener(keyboardHideEvent, this.handleKeyboardHide);
+    this.keyboardShowEventListener = Keyboard.addListener(
+      keyboardShowEvent,
+      this.handleKeyboardShow
+    );
+    this.keyboardHideEventListener = Keyboard.addListener(
+      keyboardHideEvent,
+      this.handleKeyboardHide
+    );
   }
 
   componentWillUnmount() {
     this.keyboardShowEventListener.remove();
     this.keyboardHideEventListener.remove();
   }
 
-  handleChildrenLayout = (layoutEvent) => {
+  handleChildrenLayout = layoutEvent => {
     this.setState({
       visibleAccessoryHeight: layoutEvent.nativeEvent.layout.height,
-      accessoryHeight: this.props.alwaysVisible || this.state.isKeyboardVisible ? layoutEvent.nativeEvent.layout.height : 0,
+      accessoryHeight:
+        this.props.alwaysVisible || this.state.isKeyboardVisible
+          ? layoutEvent.nativeEvent.layout.height
+          : 0
     });
-  }
+  };
 
-  handleKeyboardShow = (keyboardEvent) => {
+  handleKeyboardShow = keyboardEvent => {
     if (!keyboardEvent.endCoordinates) {
       return;
     }
@@ -91,55 +102,73 @@ class KeyboardAccessoryView extends Component {
     const keyboardAnimate = () => {
       const { animationConfig, animateOn } = this.props;
 
-      if (animateOn === 'all' || Platform.OS === animateOn) {
+      if (animateOn === "all" || Platform.OS === animateOn) {
         LayoutAnimation.configureNext(
-          accessoryAnimation(keyboardEvent.duration, keyboardEvent.easing, animationConfig)
+          accessoryAnimation(
+            keyboardEvent.duration,
+            keyboardEvent.easing,
+            animationConfig
+          )
         );
       }
 
       this.setState({
         isKeyboardVisible: true,
         keyboardHeight: keyboardHeight
-      })
+      });
     };
 
-    if (Platform.OS === 'ios' || typeof this.props.onKeyboardShowDelay !== 'number') {
+    if (
+      Platform.OS === "ios" ||
+      typeof this.props.onKeyboardShowDelay !== "number"
+    ) {
       keyboardAnimate();
     } else {
       setTimeout(() => {
-        keyboardAnimate()
+        keyboardAnimate();
       }, this.props.onKeyboardShowDelay);
     }
 
     this.setState({
       isKeyboardVisible: true,
       keyboardHeight: keyboardHeight,
-      accessoryHeight: this.state.visibleAccessoryHeight,
-    })
-  }
+      accessoryHeight: this.state.visibleAccessoryHeight
+    });
+
+    if (this.props.onKeyboardShow) {
+      this.props.onKeyboardShow();
+    }
+  };
 
-  handleKeyboardHide = (keyboardEvent) => {
+  handleKeyboardHide = keyboardEvent => {
     const { animateOn, animationConfig } = this.props;
 
-    if (animateOn === 'all' || Platform.OS === animateOn) {
+    if (animateOn === "all" || Platform.OS === animateOn) {
       LayoutAnimation.configureNext(
-        animationConfig || accessoryAnimation(keyboardEvent.duration, keyboardEvent.easing, animationConfig)
+        animationConfig ||
+          accessoryAnimation(
+            keyboardEvent.duration,
+            keyboardEvent.easing,
+            animationConfig
+          )
       );
     }
 
     this.setState({
       isKeyboardVisible: false,
       keyboardHeight: 0,
-      accessoryHeight: this.props.alwaysVisible ? this.state.visibleAccessoryHeight : 0,
-    })
-  }
+      accessoryHeight: this.props.alwaysVisible
+        ? this.state.visibleAccessoryHeight
+        : 0
+    });
+
+    if (this.props.onKeyboardHide) {
+      this.props.onKeyboardHide();
+    }
+  };
 
   render() {
-    const {
-      isKeyboardVisible,
-      accessoryHeight,
-      keyboardHeight,
-    } = this.state;
+    const { isKeyboardVisible, accessoryHeight, keyboardHeight } = this.state;
 
     const {
       bumperHeight,
@@ -150,26 +179,44 @@ class KeyboardAccessoryView extends Component {
       style,
       inSafeAreaView,
       safeAreaBumper,
-      avoidKeyboard,
+      avoidKeyboard
     } = this.props;
 
-    const visibleHeight = accessoryHeight + (avoidKeyboard ? keyboardHeight : 0);
+    const visibleHeight =
+      accessoryHeight + (avoidKeyboard ? keyboardHeight : 0);
     const applySafeArea = isSafeAreaSupported && inSafeAreaView;
+    const isChildRenderProp = typeof this.props.children === "function";
 
     return (
-      <View style={{ height: (isKeyboardVisible || alwaysVisible ? visibleHeight  : 0) }}>
-        <View style={[
-          styles.accessory,
-          !hideBorder && styles.accessoryBorder,
-          style,
-          {
-            opacity: (isKeyboardVisible || alwaysVisible ? visibleOpacity : hiddenOpacity),
-            bottom: keyboardHeight - bumperHeight - (applySafeArea ? 20 : 0),
-            height: accessoryHeight + bumperHeight + (applySafeArea ? (!isKeyboardVisible ? 20 : -10) : 0),
-          }
-        ]}>
-          <View onLayout={this.handleChildrenLayout}>
-            { this.props.children }
+      <View
+        style={{
+          height: isKeyboardVisible || alwaysVisible ? visibleHeight : 0
+        }}
+        pointerEvents="box-none"
+      >
+        <View
+          style={[
+            styles.accessory,
+            !hideBorder && styles.accessoryBorder,
+            style,
+            {
+              opacity:
+                isKeyboardVisible || alwaysVisible
+                  ? visibleOpacity
+                  : hiddenOpacity,
+              bottom: keyboardHeight - bumperHeight - (applySafeArea ? 20 : 0),
+              height:
+                accessoryHeight +
+                bumperHeight +
+                (applySafeArea ? (!isKeyboardVisible ? 20 : -10) : 0)
+            }
+          ]}
+          pointerEvents="box-none"
+        >
+          <View onLayout={this.handleChildrenLayout} pointerEvents="box-none">
+            {isChildRenderProp
+              ? this.props.children({ isKeyboardVisible })
+              : this.props.children}
           </View>
         </View>
       </View>
@@ -178,49 +225,45 @@ class KeyboardAccessoryView extends Component {
 }
 
 KeyboardAccessoryView.propTypes = {
-  style: (View.propTypes||ViewPropTypes).style,
-  animateOn: PropTypes.oneOf(['ios', 'android', 'all', 'none']),
-  animationConfig: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.func
-  ]),
+  style: PropTypes.object,
+  animateOn: PropTypes.oneOf(["ios", "android", "all", "none"]),
+  animationConfig: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   bumperHeight: PropTypes.number,
   visibleOpacity: PropTypes.number,
   hiddenOpacity: PropTypes.number,
-  onKeyboardShowDelay: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.bool
-  ]),
+  onKeyboardShowDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
   androidAdjustResize: PropTypes.bool,
   alwaysVisible: PropTypes.bool,
   hideBorder: PropTypes.bool,
   inSafeAreaView: PropTypes.bool,
   avoidKeyboard: PropTypes.bool,
-}
+  onKeyboardShow: PropTypes.func,
+  onKeyboardHide: PropTypes.func
+};
 
 KeyboardAccessoryView.defaultProps = {
-  animateOn: 'ios',
+  animateOn: "ios",
   bumperHeight: 15,
   visibleOpacity: 1,
   hiddenOpacity: 0,
   androidAdjustResize: false,
   alwaysVisible: false,
   hideBorder: false,
   inSafeAreaView: false,
-  avoidKeyboard: false,
-}
+  avoidKeyboard: false
+};
 
 const styles = StyleSheet.create({
   accessory: {
-    position: 'absolute',
+    position: "absolute",
     right: 0,
     left: 0,
-    backgroundColor: '#EFF0F1',
+    backgroundColor: "#EFF0F1"
   },
   accessoryBorder: {
     borderTopWidth: 1,
-    borderTopColor: 'rgba(0,0,0,0.2)',
+    borderTopColor: "rgba(0,0,0,0.2)"
   }
-})
+});
 
 export default KeyboardAccessoryView;