Prop screenHeight added to handle react native issue facebook/react-native#7340

Author: raynor85

README.md

@@ -112,16 +112,17 @@ This component supports all the properties of the original react native modal co
 | animateOnMount | false | `bool` | Determine whether or not animate the modal if it's visible when it mounts. |
 | animationDuration | 300 | `number` | Duration of the animation. |
 | position | bottom | `string` | Position where the sliding animation of the modal should start. Accepted values: "top", "bottom", "left", "right". |
-| containerStyle | - | `object` | Container styles used for positioning the modal with flexbox (default: alignItems: 'center', flex: 1, justifyContent: 'center'). See the examples. |
+| containerStyle | - | `any` | Container styles used for positioning the modal with flexbox (default: alignItems: 'center', flex: 1, justifyContent: 'center'). See the examples. |
 | isNative | true | `bool` | Determine the usage of the react native modal component or a simple view wrapper instead. It can be set to false to overcome some react native modal limitations (for example to have more than one modal open at the same time). |
 | onAnimateClose | () => null | `func` | Callback executed after the modal is closed. |
 | onAnimateOpen | () => null | `func` | Callback executed after the modal is open. |
-| overlayStyle | - | `object` | Styles used to define the overlay backgroundColor (default: "#000") and opacity (default: 0.5). |
+| overlayStyle | - | `any` | Styles used to define the overlay backgroundColor (default: "#000") and opacity (default: 0.5). |
+| screenHeight | computed screen height | `number` | Allow the user to manually set the right screen height to adjust the keyboardSpacer due to an issue on iPad in react native https://github.com/facebook/react-native/issues/7340. |
 | shouldAnimateOnOverlayPress | true | `bool` | Determine whether or not animate the modal closing down when the overlay is pressed. |
 | shouldAnimateOnRequestClose | false | `bool` | Determine whether or not animate the modal closing down when the onRequestClose callback is executed. |
 | shouldCloseOnOverlayPress | true | `bool` | Determine whether or not allow the modal closing down if the overlay is pressed. |
 | showOverlay | true | `bool` | Determine whether or not showing the overlay. In combination with isNative={false} it is possible to interact with the background of the application when the modal is still open. |
-| style | - | `object` | Styles of the modal (default: backgroundColor: '#fff', justifyContent: 'center'). |
+| style | - | `any` | Styles of the modal (default: backgroundColor: '#fff', justifyContent: 'center'). |
 
 Note: this component sets some properties of the underlying native modal component to allow sliding flexibility in each direction and the clickable overlay behavior, therefore we suggest not to change those. However, you can set to 0 the animationDuration prop to avoid the component sliding logic from top, bottom, left or right and therefore turning on the react native modal animationType prop, disabled by default. Here the list of the react native modal properties set by default:
 

index.js

@@ -144,8 +144,9 @@ export default class ModalWrapper extends Component {
       }
       return previous;
     }, {});
-    const { children, containerStyle, isNative, overlayStyle, showOverlay, style,
+    const { children, containerStyle, isNative, overlayStyle, showOverlay, screenHeight, style,
           ...modalProps } = Object.keys(this.props).reduce((previous, current) => {
+      // the reducer is used to get the correct set of ...modalProps
       if (!Modal.propTypes.hasOwnProperty(current) && current !== 'position') {
         previous[current] = this.props[current];
       }
@@ -161,7 +162,8 @@ export default class ModalWrapper extends Component {
     const modal = <Animated.View style={modalStyle} {...modalProps}>
       {children}
     </Animated.View>;
-    const keyboardSpacer = Platform.OS === 'ios' ? <KeyboardSpacer /> : null;
+    const computedScreenHeight = screenHeight ? screenHeight : Dimensions.get('window').height;
+    const keyboardSpacer = Platform.OS === 'ios' ? <KeyboardSpacer screenHeight={computedScreenHeight} /> : null;
     const renderContainer = (hasKeyboardSpacer) => ( // eslint-disable-line no-extra-parens
       <View style={[styles.container, containerStyle]}>
         {showOverlay &&
@@ -193,6 +195,7 @@ ModalWrapper.propTypes = {
   onAnimateOpen: React.PropTypes.func,
   overlayStyle: React.PropTypes.any,
   position: React.PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  screenHeight: React.PropTypes.number,
   showOverlay: React.PropTypes.bool,
   shouldAnimateOnOverlayPress: React.PropTypes.bool,
   shouldAnimateOnRequestClose: React.PropTypes.bool,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-modal-wrapper",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Wrapper component that extends the react native Modal component, adding overlay clickable behavior and allowing swipe in and out in all directions",
   "main": "index.js",
   "scripts": {
@@ -33,7 +33,7 @@
     "lint"
   ],
   "dependencies": {
-    "react-native-keyboard-spacer": "^0.3.0"
+    "react-native-keyboard-spacer": "miguelsm/react-native-keyboard-spacer#screen-height-prop"
   },
   "devDependencies": {
     "babel-eslint": "7.1.1",