From 918ca2b3a85559bdcc64b7b64c3f16bb17a0915b Mon Sep 17 00:00:00 2001
From: Ediyu <peterhjhan@gmail.com>
Date: Thu, 3 Jan 2019 16:55:09 -0800
Subject: [PATCH 1/2] state change allows pulse animation to render with new
 states

---
 package-lock.json |  5 +++++
 pulse.js          | 29 +++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8bd344b
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-native-pulse",
+  "version": "1.0.7",
+  "lockfileVersion": 1
+}
diff --git a/pulse.js b/pulse.js
index e89cb58..107d857 100644
--- a/pulse.js
+++ b/pulse.js
@@ -72,6 +72,35 @@ export default class Pulse extends Component {
 
     mounted = true;
 
+  componentWillReceiveProps(props) {
+        if(props.color != this.state.color){
+            this.setState({
+                color: props.color
+            });
+        };
+        if(props.duration != this.state.duration) {
+            this.setState({
+                duration: props.duration
+            });
+        };
+        if(props.maxDiameter != this.state.maxDiameter) {
+            this.setState({
+                maxDiameter: props.maxDiameter
+            });
+        };
+        if(props.numPulses != this.state.numPulses) {
+            this.setState({
+                numPulses: props.numPulses
+            });
+        };
+        if(props.speed != this.state.speed) {
+            this.setState({
+                speed:props.speed
+            });
+        };
+    
+    }
+
     componentDidMount(){
         const {numPulses, duration, speed} = this.state;
 

From da2d11f1eba96f1906cd0f6e175017cf94a94b3f Mon Sep 17 00:00:00 2001
From: Ediyu <peterhjhan@gmail.com>
Date: Thu, 3 Jan 2019 16:56:26 -0800
Subject: [PATCH 2/2] update with getDerviedStateFromProps as
 componentWillRecieveProps is UNSAFE

---
 pulse.js | 62 ++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/pulse.js b/pulse.js
index 107d857..8d0d425 100644
--- a/pulse.js
+++ b/pulse.js
@@ -72,35 +72,53 @@ export default class Pulse extends Component {
 
     mounted = true;
 
-  componentWillReceiveProps(props) {
-        if(props.color != this.state.color){
-            this.setState({
-                color: props.color
-            });
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if(nextProps.color != prevState.color){
+            return { color: nextProps.color}
         };
-        if(props.duration != this.state.duration) {
-            this.setState({
-                duration: props.duration
-            });
+        if(nextProps.duration != prevState.duration) {
+            return { duration: nextProps.duration };
         };
-        if(props.maxDiameter != this.state.maxDiameter) {
-            this.setState({
-                maxDiameter: props.maxDiameter
-            });
+        if(nextProps.maxDiameter != prevState.maxDiameter) {
+            return { maxDiameter: nextProps.maxDiameter };
         };
-        if(props.numPulses != this.state.numPulses) {
-            this.setState({
-                numPulses: props.numPulses
-            });
+        if(nextProps.numPulses != prevState.numPulses) {
+            return { numPulses: nextProps.numPulses };
         };
-        if(props.speed != this.state.speed) {
-            this.setState({
-                speed:props.speed
-            });
+        if(nextProps.speed != prevState.speed) {
+            return { speed:nextProps.speed };
         };
-    
     }
 
+//   componentWillReceiveProps(props) {
+//         if(props.color != this.state.color){
+//             this.setState({
+//                 color: props.color
+//             });
+//         };
+//         if(props.duration != this.state.duration) {
+//             this.setState({
+//                 duration: props.duration
+//             });
+//         };
+//         if(props.maxDiameter != this.state.maxDiameter) {
+//             this.setState({
+//                 maxDiameter: props.maxDiameter
+//             });
+//         };
+//         if(props.numPulses != this.state.numPulses) {
+//             this.setState({
+//                 numPulses: props.numPulses
+//             });
+//         };
+//         if(props.speed != this.state.speed) {
+//             this.setState({
+//                 speed:props.speed
+//             });
+//         };
+    
+//     }
+
     componentDidMount(){
         const {numPulses, duration, speed} = this.state;