react-native-modal - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

package.json

 {
   "name": "react-native-modal",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "An enhanced React-Native modal",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -67,6 +67,7 @@ # react-native-modal
 | --- | --- | --- | --- |
-| animationIn | string | 'slideInUp' | Modal show animation |
+| animationIn | string or object | 'slideInUp' | Modal show animation |
 | animationInTiming | number | 300 | Timing for the modal show animation (in ms) |
-| animationOut | string | 'slideOutDown' | Modal hide animation |
+| animationOut | string or object | 'slideOutDown' | Modal hide animation |
 | animationOutTiming | number | 300 | Timing for the modal hide animation (in ms) |
+| avoidKeyboard | bool | false | Move the modal up if the keyboard is open |
 | backdropColor | string | 'black' | The backdrop background color |
@@ -86,5 +87,6 @@ | backdropOpacity | number | 0.70 | The backdrop opacity when the modal is visible |
 
-Take a look at [react-native-animatable](https://github.com/oblador/react-native-animatable) for available animations.     
+Take a look at [react-native-animatable](https://github.com/oblador/react-native-animatable) to see the dozens of animations available out-of-the-box. You can also pass in custom animation definitions and have them automatically register with react-native-animatable. For more information on creating custom animations, see the react-native-animatable [animation definition schema](https://github.com/oblador/react-native-animatable#animation-definition-schema).
+
 Pull requests, feedbacks and suggestions are welcome!  
   
 P.S.: Thanks [@oblador](https://github.com/oblador) for react-native-animatable, [@brentvatne](https://github.com/brentvatne) for the npm namespace and to anyone who contributed to this library!  

src/index.js

 import React, { Component } from 'react';
-import { Dimensions, Modal, DeviceEventEmitter, TouchableWithoutFeedback } from 'react-native';
+import {
+  Dimensions,
+  Modal,
+  DeviceEventEmitter,
+  TouchableWithoutFeedback,
+  KeyboardAvoidingView,
+} from 'react-native';
 import PropTypes from 'prop-types';
-import { View, initializeRegistryWithDefinitions } from 'react-native-animatable';
+import {
+  View,
+  initializeRegistryWithDefinitions,
+  registerAnimation,
+  createAnimation,
+} from 'react-native-animatable';
 import * as ANIMATION_DEFINITIONS from './animations';
@@ -12,8 +23,18 @@
 
+// Utility for creating custom animations
+const makeAnimation = (name, obj) => {
+  registerAnimation(name, createAnimation(obj));
+};
+
+const isObject = obj => {
+  return obj !== null && typeof obj === 'object';
+};
+
 export class ReactNativeModal extends Component {
   static propTypes = {
-    animationIn: PropTypes.string,
+    animationIn: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     animationInTiming: PropTypes.number,
-    animationOut: PropTypes.string,
+    animationOut: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     animationOutTiming: PropTypes.number,
+    avoidKeyboard: PropTypes.bool,
     backdropColor: PropTypes.string,
@@ -37,4 +58,5 @@ backdropOpacity: PropTypes.number,
     animationOutTiming: 300,
+    avoidKeyboard: false,
     backdropColor: 'black',
-    backdropOpacity: 0.70,
+    backdropOpacity: 0.7,
     backdropTransitionInTiming: 300,
@@ -60,2 +82,7 @@ backdropTransitionOutTiming: 300,
 
+  constructor(props) {
+    super(props);
+    this._buildAnimations(props);
+  }
+
   componentWillReceiveProps(nextProps) {
@@ -65,2 +92,8 @@ if (!this.state.isVisible && nextProps.isVisible) {
     }
+    if (
+      this.props.animationIn !== nextProps.animationIn ||
+      this.props.animationOut !== nextProps.animationOut
+    ) {
+      this._buildAnimations(nextProps);
+    }
   }
@@ -95,2 +128,21 @@
 
+  // User can define custom react-native-animatable animations, see PR #72
+  _buildAnimations = props => {
+    let animationIn = props.animationIn;
+    let animationOut = props.animationOut;
+
+    if (isObject(animationIn)) {
+      makeAnimation('animationIn', animationIn);
+      animationIn = 'animationIn';
+    }
+
+    if (isObject(animationOut)) {
+      makeAnimation('animationOut', animationOut);
+      animationOut = 'animationOut';
+    }
+
+    this.animationIn = animationIn;
+    this.animationOut = animationOut;
+  };
+
   _handleDimensionsUpdate = dimensionsUpdate => {
@@ -110,3 +162,3 @@ // Here we update the device dimensions in the state if the layout changed (triggering a render)
     );
-    this.contentRef[this.props.animationIn](this.props.animationInTiming).then(() => {
+    this.contentRef[this.animationIn](this.props.animationInTiming).then(() => {
       this.props.onModalShow();
@@ -118,3 +170,3 @@ });
     this.backdropRef.transitionTo({ opacity: 0 }, this.props.backdropTransitionOutTiming);
-    this.contentRef[this.props.animationOut](this.props.animationOutTiming).then(() => {
+    this.contentRef[this.animationOut](this.props.animationOutTiming).then(() => {
       this.setState({ isVisible: false });
@@ -131,2 +183,3 @@ this.props.onModalHide();
       animationOutTiming,
+      avoidKeyboard,
       backdropColor,
@@ -145,2 +198,20 @@ backdropOpacity,
     const { deviceWidth, deviceHeight } = this.state;
+
+    const computedStyle = [
+      { margin: deviceWidth * 0.05, transform: [{ translateY: 0 }] },
+      styles.content,
+      style,
+    ];
+
+    const containerView = (
+      <View
+        ref={ref => (this.contentRef = ref)}
+        style={computedStyle}
+        pointerEvents={'box-none'}
+        {...otherProps}
+      >
+        {children}
+      </View>
+    );
+
     return (
@@ -167,14 +238,14 @@ <Modal
         </TouchableWithoutFeedback>
-        <View
-          ref={ref => (this.contentRef = ref)}
-          style={[
-            { margin: deviceWidth * 0.05, transform: [{ translateY: 0 }] },
-            styles.content,
-            style,
-          ]}
-          pointerEvents="box-none"
-          {...otherProps}
-        >
-          {children}
-        </View>
+
+        {avoidKeyboard && (
+          <KeyboardAvoidingView
+            behavior={'padding'}
+            pointerEvents={'box-none'}
+            style={computedStyle.concat([{ margin: 0 }])}
+          >
+            {containerView}
+          </KeyboardAvoidingView>
+        )}
+
+        {!avoidKeyboard && containerView}
       </Modal>
@@ -181,0 +252,0 @@ );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17003

increased by13.5%

Lines of code

290

increased by25.54%

Number of lines in readme file

91

increased by2.25%

No dependency changes