From 71566509e6dff87676ebe15af63d7a6d64a8ec36 Mon Sep 17 00:00:00 2001
From: Ovidiu Stoica <ovidiu.stoica1094@gmail.com>
Date: Sun, 13 Sep 2020 13:45:54 +0300
Subject: [PATCH] Added useNativeDriver to shine animations

---
 src/animations/Shine.tsx        | 17 ++++++++++-------
 src/animations/ShineOverlay.tsx | 26 +++++++++++++++++---------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/animations/Shine.tsx b/src/animations/Shine.tsx
index eee63fd..6999991 100644
--- a/src/animations/Shine.tsx
+++ b/src/animations/Shine.tsx
@@ -26,13 +26,16 @@ export class Shine extends React.Component<IShine> {
   public render() {
     const { children, style } = this.props;
 
-    const left = this.animation.interpolate({
+    const translateX = this.animation.interpolate({
       inputRange: [START_VALUE, END_VALUE],
-      outputRange: ["0%", "100%"],
+      outputRange: ["0%", "250%"],
+      extrapolateRight: "extend"
     });
 
     return (
-      <Provider value={[styles.shine, { left }, style]}>{children}</Provider>
+      <Provider value={[styles.shine, { transform: [{ translateX }] }, style]}>
+        {children}
+      </Provider>
     );
   }
 
@@ -43,8 +46,8 @@ export class Shine extends React.Component<IShine> {
       duration: this.props.duration || 750,
       isInteraction,
       toValue: END_VALUE,
-      useNativeDriver: false,
-    }).start((e) => {
+      useNativeDriver: true
+    }).start(e => {
       if (e.finished) {
         this.start();
       }
@@ -57,6 +60,6 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     height: "100%",
     opacity: 0.5,
-    width: "40%",
-  },
+    width: "40%"
+  }
 });
diff --git a/src/animations/ShineOverlay.tsx b/src/animations/ShineOverlay.tsx
index d5738a9..d1c11e5 100644
--- a/src/animations/ShineOverlay.tsx
+++ b/src/animations/ShineOverlay.tsx
@@ -10,11 +10,15 @@ export interface IShine {
   duration?: number;
 }
 
-export class ShineOverlay extends React.Component<IShine> {
+export class ShineOverlay extends React.Component<IShine, { width: number }> {
   private animation: Animated.Value;
   constructor(props: IShine) {
     super(props);
 
+    this.state = {
+      width: 0
+    };
+
     this.animation = new Animated.Value(0);
   }
 
@@ -25,15 +29,19 @@ export class ShineOverlay extends React.Component<IShine> {
   public render() {
     const { children } = this.props;
 
-    const left = this.animation.interpolate({
+    const translateX = this.animation.interpolate({
       inputRange: [START_VALUE, END_VALUE],
-      outputRange: ["0%", "100%"],
+      outputRange: [0, this.state.width]
     });
 
     return (
-      <View>
+      <View
+        onLayout={e => this.setState({ width: e.nativeEvent.layout.width })}
+      >
         {children}
-        <Animated.View style={[styles.shine, { left }]} />
+        <Animated.View
+          style={[styles.shine, { transform: [{ translateX }] }]}
+        />
       </View>
     );
   }
@@ -45,8 +53,8 @@ export class ShineOverlay extends React.Component<IShine> {
       duration: this.props.duration || 750,
       isInteraction,
       toValue: END_VALUE,
-      useNativeDriver: false,
-    }).start((e) => {
+      useNativeDriver: true
+    }).start(e => {
       if (e.finished) {
         this.start();
       }
@@ -60,6 +68,6 @@ const styles = StyleSheet.create({
     height: "100%",
     opacity: 0.4,
     position: "absolute",
-    width: 30,
-  },
+    width: 30
+  }
 });