react-native-modal - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

Modal.ios.js

@@ -16,2 +16,3 @@ 'use strict';
 var Transitions = require('./Transitions');
+var ModalBackdrop = require('./ModalBackdrop.ios');
 var merge = require('merge');
@@ -46,3 +47,3 @@ var styles = require('./Style');
     hideCloseButton: PropTypes.bool,
-    hideBackdrop: PropTypes.bool,
+    backdropType: PropTypes.string,
     onClose: PropTypes.func,
@@ -101,12 +102,43 @@ onPressBackdrop: PropTypes.func,
 
-  renderBackdrop() {
+  renderBody() {
+    return (
+      <View>
+        {this.renderCloseButton()}
+        <View style={styles.modal}>
+          {React.Children.map(this.props.children, React.addons.cloneWithProps)}
+        </View>
+      </View>
+    );
+  },
+
+  renderModal() {
     var {
       onPressBackdrop,
-      hideBackdrop,
+      backdropType,
+      backdropBlur,
     } = this.props;
 
-    if (!hideBackdrop) {
+    var body = this.renderBody();
+
+    if (typeof backdropType == 'undefined' || backdropType == null || backdropType == 'plain') {
       return (
+        <View style={[styles.container, this.transitionStyles()]}>
+          <TouchableWithoutFeedback onPress={onPressBackdrop}>
+            <View style={styles.backdrop} />
+          </TouchableWithoutFeedback>
+          {body}
+        </View>
+      );
+    } else if (backdropType === 'none') {
+      return (
+        <View style={[styles.container, this.transitionStyles()]}>
+          {body}
+        </View>
+      );
+    } else {
+      return (
         <TouchableWithoutFeedback onPress={onPressBackdrop}>
-          <View style={styles.backdrop} />
+          <ModalBackdrop effect={backdropBlur} style={[styles.container, this.transitionStyles()]}>
+            {body}
+          </ModalBackdrop>
         </TouchableWithoutFeedback>
@@ -117,14 +149,2 @@ );
 
-  renderBody() {
-    return (
-      <View style={[styles.container, this.transitionStyles()]}>
-        {this.renderBackdrop()}
-        {this.renderCloseButton()}
-        <View style={styles.modal}>
-          {React.Children.map(this.props.children, React.addons.cloneWithProps)}
-        </View>
-      </View>
-    );
-  },
-
   render() {
@@ -138,5 +158,9 @@ var {
       if (forceToFront) {
-        return (<RNModal visible={true} style={styles.container}>{this.renderBody()}</RNModal>);
+        return (
+          <RNModal visible={true} style={styles.container}>{this.renderModal()}</RNModal>
+        );
       } else {
-        return (<View style={styles.container}>{this.renderBody()}</View>);
+        return (
+          <View style={styles.container}>{this.renderModal()}</View>
+        );
       }
@@ -143,0 +167,0 @@ } else {

package.json

 {
   "name": "react-native-modal",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A <Modal /> component for react-native",
@@ -23,4 +23,5 @@ "main": "Modal.ios.js",
     "react-native": "^0.3.10",
-    "react-tween-state": "^0.0.5"
+    "react-tween-state": "^0.0.5",
+    "react-native-blur": "^0.1.0"
   }
 }

README.md

@@ -88,3 +88,3 @@ ## react-native-modal
         </Text>
-        <Modal isVisible={this.state.isModalOpen} onClose={() => this.closeModal()}>
+        <Modal backdropType="blur" isVisible={this.state.isModalOpen} onClose={() => this.closeModal()}>
           <Text>Hello world!</Text>
@@ -106,3 +106,4 @@ </Modal>
 - **`hideCloseButton`** _(Bool)_
-- **`hideBackdrop`** _(Bool)_
+- **`backdropType`** _(String)_ `plain`, `none`, or `blur`. Default is `plain`.
+- **`backdropBlur`** _(String)_ If `backdropType` is `blur`, this can be either `dark`, `light`, or `extra-light`. Default is `light`.
 - **`isVisible`** _(Bool)_
@@ -109,0 +110,0 @@ - **`onClose`** _(Function)_

No alert changes

Improved metrics

Total package byte prevSize

5386048

increased by0.06%

Number of package files

20

increased by33.33%

Lines of code

293

increased by19.59%

Number of lines in readme file

117

increased by0.86%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedreact-native-blur@^0.1.0

• + Addedreact-native-blur@0.1.1(transitive)