shimmer animation recursion removed + stoping animation visible true …

…revised
tomzaku · May 13, 2020 · ee1242d · ee1242d
1 parent 564e703
commit ee1242d
Showing 1 changed file with 18 additions and 13 deletions.
diff --git a/lib/ShimmerPlaceholder.js b/lib/ShimmerPlaceholder.js
@@ -12,6 +12,7 @@ class ShimmerPlaceHolder extends Component {
     this.state = {
       beginShimmerPosition: new Animated.Value(-1)
     };
+    this.animationValue = this.getAnimated();
   }
   componentDidMount() {
     const { autoRun } = this.props;
@@ -20,28 +21,32 @@ class ShimmerPlaceHolder extends Component {
     }
   }
   componentWillUnmount() {
-    const shimmerAnimated = this.getAnimated();
-    shimmerAnimated.stop();
+    this.animationValue.stop()
   }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.visible && (this.props.visible !== prevProps.visible)) {
+      this.animationValue.stop()
+      // console.log('componentDidUpdate on stop', this.props.visible)
+    } else if ((!this.props.visible) && (this.props.visible !== prevProps.visible)){
+      this.animationValue.start()
+      // console.log('componentDidUpdate on start', this.props.visible)
+    }
+  }
+
   loopAnimated() {
-    const shimmerAnimated = this.getAnimated();
-    const { visible } = this.props;
-    shimmerAnimated.start(({ finished }) => {
-      if (!visible && finished) {
-        this.loopAnimated();
-      }
-    });
+    this.animationValue.start()
   }
   getAnimated = () => {
-    this.state.beginShimmerPosition.setValue(-1);
-    return Animated.timing(this.state.beginShimmerPosition, {
+    return Animated.loop(Animated.timing(this.state.beginShimmerPosition, {
       toValue: 1,
       delay: this.props.delay,
       duration: this.props.duration,
       useNativeDriver: true,
       isInteraction: this.props.isInteraction
-    });
-  };
+    }))
+  }
+
   render() {
     const {
       width,