update dependecies

Author: basemcodelab

README.md

@@ -56,11 +56,11 @@ var ChildComponent = React.createClass({
                 <TouchableOpacity style={{ backgroundColor: "#ddd",padding:10 }} onPress={() => { this.setState({ isOpen: true }) }}>
                     <Text style={{fontSize:18,textAlign:"center"}}>Show Modal</Text>
                 </TouchableOpacity>
-                <ResponsiveModal sizeMatching="content"
+                <ResponsiveAppModal sizeMatching="content"
                     isOpen={this.state.isOpen} onClosed={() => { this.setState({ isOpen: false }) }} >
                     <View style={{ height: 200, backgroundColor: "red" }}>
                     </View>
-                </ResponsiveModal>
+                </ResponsiveAppModal>
             </View>
         );
     }

package.json

@@ -1,14 +1,15 @@
 {
   "name": "react-native-responsive-app-modal",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Create responsive modals easily by auto injecting it to the app root.",
   "main": "src/index.js",
   "scripts": {
     "test": "test"
   },
   "dependencies": {
-    "react-native-modalbox": "1.3.8",
-	"react-native-root-siblings":"1.2.1"
+    "react-native-modalbox": "^1.4.2",
+    "react-native-root-siblings": "^2.2.0",
+	"prop-types": "^15.6.0"
   },
    "peerDependencies": {
     "react-native": "*"

src/index.js

@@ -2,55 +2,38 @@ import React, { Component } from 'react';
 import {
     View,
     Platform,
-    I18nManager
+    I18nManager,
+    Dimensions
 } from 'react-native';
 import Modalbox from 'react-native-modalbox';
 import RootSiblings from 'react-native-root-siblings';
-import Dimensions from 'Dimensions';
+import PropTypes from 'prop-types';
 
-var ResponsiveAppModal = React.createClass({
-    propTypes: {
-        ...Modalbox.propTypes,
-        screenHeight: React.PropTypes.number,
-        screenWidth: React.PropTypes.number,
-        verticalMargin: React.PropTypes.number,
-        horizontalMargin: React.PropTypes.number,
-        sizeMatching: React.PropTypes.oneOf(['content', 'screen']).isRequired
-    },
-    getInitialState: function () {
+export default class ResponsiveAppModal extends Component<{}> {
+    constructor(props) {
+        super(props);
         const { width, height } = Dimensions.get('window');
-        return {
+        this.state = {
             width: width,
             height: height,
         };
-    },
-    getDefaultProps() {
-        return {
-            swipeToClose: false,
-            backButtonClose: true,
-            isOpen: false,
-            style: {
-                height: null,
-                width: null
-            }
-        };
-    },
+    }
     componentWillMount() {
         this.modal = new RootSiblings(this.renderModal(this.props, this.state));
         if (typeof Dimensions.addEventListener === 'function')
             Dimensions.addEventListener('change', this._dimensionsChanged);
-    },
+    }
     componentWillUpdate(nextProps, nextState) {
         this.modal.update(this.renderModal(nextProps, nextState));
-    },
+    }
     componentWillUnmount() {
         this.modal.destroy();
         this.modal = null;
 
         if (typeof Dimensions.addEventListener === 'function')
             Dimensions.removeEventListener('change', this._dimensionsChanged);
-    },
-    _dimensionsChanged(Dimensions) {
+    }
+    _dimensionsChanged = (Dimensions) => {
         const { width, height } = Dimensions.window;
 
         let newDimensions = {
@@ -60,8 +43,8 @@ var ResponsiveAppModal = React.createClass({
         if (newDimensions.width != this.state.width || newDimensions.height != this.state.height) {
             this.setState(newDimensions);
         }
-    },
-    _renderAndroid(props, state) {
+    }
+    _renderAndroid = (props, state) => {
         let { screenHeight, screenWidth, verticalMargin, horizontalMargin, sizeMatching, style } = this.props;
         if (!screenHeight >= 0 || !screenHeight >= 0) {
             let { width, height } = state;
@@ -85,8 +68,8 @@ var ResponsiveAppModal = React.createClass({
                 </View>
             </Modalbox>
         );
-    },
-    _renderIOS(props, state) {
+    }
+    _renderIOS = (props, state) => {
         let { screenHeight, screenWidth, verticalMargin, horizontalMargin, sizeMatching, style } = props;
         if (!screenHeight >= 0 || !screenHeight >= 0) {
             let { width, height } = state;
@@ -107,17 +90,33 @@ var ResponsiveAppModal = React.createClass({
                 {props.children}
             </Modalbox>
         );
-    },
-    renderModal(props, state) {
+    }
+    renderModal = (props, state) => {
         return Platform.select({
             ios: this._renderIOS(props, state),
             android: this._renderAndroid(props, state),
         })
-    },
+    }
     render() {
         //the render function is not used, instead
         return (<View></View>);
     }
-});
+}
 
-module.exports = ResponsiveAppModal;
+ResponsiveAppModal.propTypes = {
+    ...Modalbox.propTypes,
+    screenHeight: PropTypes.number,
+    screenWidth: PropTypes.number,
+    verticalMargin: PropTypes.number,
+    horizontalMargin: PropTypes.number,
+    sizeMatching: PropTypes.oneOf(['content', 'screen']).isRequired
+}
+ResponsiveAppModal.defaultProps = {
+    swipeToClose: false,
+    backButtonClose: true,
+    isOpen: false,
+    style: {
+        height: null,
+        width: null
+    }
+}