Using native driver property

README.md

@@ -1,14 +1,20 @@
-# react-native-simple-modal
+# react-native-resimple-modal
 
-A simple JavaScript modal component for React Native. Works on both iOS and Android.
+A simple JavaScript modal component for React Native. Works on iOS, Android and Windows.
 
-**Looking for maintainers! I'm not actively developing with React Native anymore and I don't have much time to keep this library up-to-date. If you're interested, hit me up: max.huttunen@gmail.com**
+**All credits goes to [maxjvh](https://github.com/maxjvh). If you're interested, hit him up on: max.huttunen@gmail.com**
+
+This is just a simple modification for the original package to elimenate some warnings especially for Windows platform.
 
 <img src="https://i.imgur.com/EiwkCWn.gif" width="300" />
 
 ## Installation
 
-`npm install react-native-simple-modal --save`
+`npm install react-native-resimple-modal --save`
+
+Or
+
+`yarn add react-native-resimple-modal`
 
 ## Usage
 
@@ -17,15 +23,16 @@ See example. Make sure to put the `<Modal>` at the end of the render function so
 ### Properties and their default values
 
 ```javascript
-import Modal from "react-native-simple-modal";
+import Modal from "react-native-resimple-modal";
 
 <Modal
+  useNativeDriver={true}
   animationDuration={200}
   animationTension={40}
   closeOnTouchOutside={true}
   containerProps={undefined}
   containerStyle={{
-    justifyContent: "center"
+    justifyContent: "center",
   }}
   disableOnBackPress={false}
   modalDidClose={() => undefined}
@@ -35,13 +42,13 @@ import Modal from "react-native-simple-modal";
     borderRadius: 2,
     margin: 20,
     padding: 10,
-    backgroundColor: "#F5F5F5"
+    backgroundColor: "#F5F5F5",
   }}
   offset={0}
   open={false}
   overlayStyle={{
     backgroundColor: "rgba(0, 0, 0, 0.75)",
-    flex: 1
+    flex: 1,
   }}
 />;
 ```
@@ -51,7 +58,7 @@ import Modal from "react-native-simple-modal";
 ```javascript
 import React from "react";
 import { Text, TouchableOpacity, View } from "react-native";
-import Modal from "react-native-simple-modal";
+import Modal from "react-native-resimple-modal";
 
 export default class App extends React.Component {
   state = { open: false };

index.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactNative from 'react-native';
+import * as React from "react";
+import * as ReactNative from "react-native";
 
 export interface ModalProps {
   open?: boolean;
@@ -15,6 +15,7 @@ export interface ModalProps {
   modalStyle?: ReactNative.ViewStyle;
   modalProps?: ReactNative.ViewProperties;
   disableOnBackPress?: boolean;
+  useNativeDriver?: boolean;
 }
 
 declare class Modal extends React.Component<ModalProps, {}> {

index.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,
@@ -8,8 +8,8 @@ import {
   TouchableOpacity,
   Animated,
   Platform,
-  BackHandler
-} from 'react-native';
+  BackHandler,
+} from "react-native";
 
 class Modal extends Component {
   static propTypes = {
@@ -21,7 +21,8 @@ class Modal extends Component {
     modalDidOpen: PropTypes.func,
     modalDidClose: PropTypes.func,
     closeOnTouchOutside: PropTypes.bool,
-    disableOnBackPress: PropTypes.bool
+    disableOnBackPress: PropTypes.bool,
+    useNativeDriver: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -32,23 +33,29 @@ class Modal extends Component {
     modalDidOpen: () => undefined,
     modalDidClose: () => undefined,
     closeOnTouchOutside: true,
-    disableOnBackPress: false
+    disableOnBackPress: false,
+    useNativeDriver: true,
   };
 
   state = {
     opacity: new Animated.Value(0),
     scale: new Animated.Value(0.8),
-    offset: new Animated.Value(this.props.offset)
+    offset: new Animated.Value(this.props.offset),
+    useNativeDriver: this.props.useNativeDriver,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.open) {
       this.setState({ children: this.props.children });
       this.open();
     }
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
+    if (props.useNativeDriver !== this.props.useNativeDriver) {
+      this.setState({ useNativeDriver: props.useNativeDriver });
+    }
+
     if (props.open && props.children !== this.state.children) {
       this.setState({ children: props.children });
     }
@@ -84,15 +91,15 @@ class Modal extends Component {
   };
 
   componentDidMount() {
-    if (Platform.OS === 'android') {
-      BackHandler.addEventListener('hardwareBackPress', this.hardwareBackPress);
+    if (Platform.OS === "android") {
+      BackHandler.addEventListener("hardwareBackPress", this.hardwareBackPress);
     }
   }
 
   componentWillUnmount() {
-    if (Platform.OS === 'android') {
+    if (Platform.OS === "android") {
       BackHandler.removeEventListener(
-        'hardwareBackPress',
+        "hardwareBackPress",
         this.hardwareBackPress
       );
     }
@@ -116,12 +123,14 @@ class Modal extends Component {
       } else {
         Animated.timing(this.state.opacity, {
           toValue,
-          duration: animationDuration
+          duration: animationDuration,
+          useNativeDriver: this.state.useNativeDriver,
         }).start();
 
         Animated.spring(this.state.scale, {
           toValue: toValue ? 1 : 0.8,
-          tension: animationTension
+          tension: animationTension,
+          useNativeDriver: this.state.useNativeDriver,
         }).start(() => this.executeCallbacks(toValue === 1));
       }
     }
@@ -132,7 +141,7 @@ class Modal extends Component {
     let containerStyles = [
       styles.absolute,
       styles.container,
-      this.props.containerStyle
+      this.props.containerStyle,
     ];
 
     if (!this.state.open) {
@@ -141,7 +150,7 @@ class Modal extends Component {
 
     return (
       <View
-        pointerEvents={open ? 'auto' : 'none'}
+        pointerEvents={open ? "auto" : "none"}
         style={containerStyles}
         {...this.props.containerProps}
       >
@@ -155,15 +164,15 @@ class Modal extends Component {
             style={[
               styles.defaultOverlayStyle,
               { opacity },
-              this.props.overlayStyle
+              this.props.overlayStyle,
             ]}
           />
         </TouchableOpacity>
         <Animated.View
           style={[
             styles.defaultModalStyle,
             this.props.modalStyle,
-            { opacity, transform: [{ scale }, { translateY: offset }] }
+            { opacity, transform: [{ scale }, { translateY: offset }] },
           ]}
           {...this.props.modalProps}
         >
@@ -183,38 +192,41 @@ class Modal extends Component {
   };
 
   animateOffset(offset) {
-    Animated.spring(this.state.offset, { toValue: offset }).start();
+    Animated.spring(this.state.offset, {
+      toValue: offset,
+      useNativeDriver: this.state.useNativeDriver,
+    }).start();
   }
 }
 
 const styles = StyleSheet.create({
   absolute: {
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0)'
+    backgroundColor: "rgba(0, 0, 0, 0)",
   },
   container: {
-    justifyContent: 'center'
+    justifyContent: "center",
   },
   defaultModalStyle: {
     borderRadius: 2,
     margin: 20,
     padding: 10,
-    backgroundColor: '#F5F5F5'
+    backgroundColor: "#F5F5F5",
   },
   defaultOverlayStyle: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.75)'
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
   },
   hidden: {
     top: -10000,
     left: 0,
     height: 0,
-    width: 0
-  }
+    width: 0,
+  },
 });
 
 export default Modal;

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-native-simple-modal",
-  "version": "9.0.1",
+  "name": "react-native-resimple-modal",
+  "version": "9.0.4",
   "description": "A simple JavaScript modal component for React Native.",
   "main": "index.js",
   "types": "index.d.ts",
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bodyflex/react-native-simple-modal.git"
+    "url": "git+https://github.com/Omar-Belghaouti/react-native-simple-modal.git"
   },
   "keywords": [
     "modal",
@@ -25,11 +25,18 @@
     "prop-types": "^15.5.10"
   },
   "author": "bodyflex",
+  "contributors": [
+    {
+      "name": "Omar Belghaouti",
+      "email": "omarbelghaouti@gmail.com",
+      "url": "https://omarbelghaouti.space/"
+    }
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/bodyflex/react-native-simple-modal/issues"
   },
-  "homepage": "https://github.com/bodyflex/react-native-simple-modal#readme",
+  "homepage": "https://github.com/Omar-Belghaouti/react-native-simple-modal#readme",
   "devDependencies": {
     "babel-eslint": "^8.2.3",
     "eslint": "^4.19.1",