Enable useNativeDriver

jacklam718 · Mar 28, 2019 · 480419f · 480419f
1 parent 989cd4b
commit 480419f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 19 deletions.
diff --git a/src/DualShock4.js b/src/DualShock4.js
@@ -88,35 +88,43 @@ export default class DualShock4 extends Component {
         Animated.parallel([
           Animated.timing(this.cardSize.x, {
             toValue: CARD_WIDTH,
-            duration: 200
+            duration: 200,
+            useNativeDriver: false,
           }),
           Animated.timing(this.cardSize.y, {
             toValue: CARD_HEIGHT,
-            duration: 200
+            duration: 200,
+            useNativeDriver: false,
           }),
           Animated.spring(this.titleTranslateX, {
             toValue: 0,
             friction: 4.5,
             tension: 0.5,
+            useNativeDriver: true,
           }),
           Animated.spring(this.imageTranslateY, {
             toValue: 0,
+            useNativeDriver: true,
           }),
           Animated.timing(this.imageRotate, {
             toValue: 0,
             duration: 200,
+            useNativeDriver: true,
           }),
           Animated.spring(this.footerImageScale, {
             toValue: 0,
+            useNativeDriver: true,
           }),
           Animated.timing(this.activeTextOpacity, {
             toValue: 0,
             duration: 0,
+            useNativeDriver: false,
           }),
           Animated.timing(this.previewTextOpacity, {
             toValue: 1,
             duration: 200,
             delay: 300,
+            useNativeDriver: true,
           }),
         ]).start();
       });
@@ -128,46 +136,45 @@ export default class DualShock4 extends Component {
         Animated.parallel([
           Animated.timing(this.cardSize.x, {
             toValue: DEVICE_WIDTH,
-            duration: 200
+            duration: 200,
+            useNativeDriver: false,
           }),
           Animated.timing(this.cardSize.y, {
             toValue: DEVIC_HEIGHT,
-            duration: 200
+            duration: 200,
+            useNativeDriver: false,
           }),
           Animated.spring(this.titleTranslateX, {
             toValue: DEVIC_HEIGHT,
-            // friction: 1,
-            // tension: 1,
-            // speed: 12,
             friction: 4.5,
             tension: 0.5,
+            useNativeDriver: true,
           }),
           Animated.spring(this.imageTranslateY, {
             toValue: DEVIC_HEIGHT/2,
-            // friction: 4,
-            // tension: 15,
-            // speed: 1,
+            useNativeDriver: true,
           }),
           Animated.timing(this.imageRotate, {
             toValue: 1,
             duration: 200,
+            useNativeDriver: true,
           }),
           Animated.spring(this.footerImageScale, {
             toValue: 1,
-            // friction: 4,
-            // tension: 1,
             friction: 5.5,
-            tension: 10
-            // speed: 12,
+            tension: 10,
+            useNativeDriver: true,
           }),
           Animated.timing(this.activeTextOpacity, {
             toValue: 1,
             duration: 200,
             delay: 300,
+            useNativeDriver: false,
           }),
           Animated.timing(this.previewTextOpacity, {
             toValue: 0,
             duration: 0,
+            useNativeDriver: true,
           }),
         ]).start();
       });
@@ -203,7 +210,7 @@ export default class DualShock4 extends Component {
           top: 90,
           position: 'absolute',
           opacity: this.previewTextOpacity,
-          height: 40,
+          // height: 40,
           transform: [{
             translateX: this.props.scrollX.interpolate({
               inputRange: this.inputRange,

diff --git a/src/Indicator.js b/src/Indicator.js
@@ -10,8 +10,14 @@ const styles = StyleSheet.create({
   },
   dot: {
     borderRadius: 10 / 2,
-    margin: 6,
+    marginLeft: 8,
+    marginRight: 8,
+  },
+  dotInner: {
+    borderRadius: 10 / 2,
     backgroundColor: '#fff',
+    width: 1,
+    height: 1,
   }
 });
 
@@ -33,9 +39,15 @@ export default function Indicator({ scrollX, count, style }) {
         style={StyleSheet.flatten([
           styles.dot,
           { opacity },
-          { width: size, height: size },
+          {
+            transform: [{
+              scale: size,
+            }]
+          }
         ])}
-      />
+      >
+        <View style={styles.dotInner} />
+      </Animated.View>
     ));
   }
   return (

diff --git a/src/ProductCarousel.js b/src/ProductCarousel.js
@@ -64,7 +64,7 @@ export default class ProductCarousel extends Component {
               },
             ],
             {
-              useNativeDriver: false,
+              useNativeDriver: true,
             }
           )}
         >