Use useNativeDriver=true for performance

[kbrandwijk]

For performance reasons, please consider using useNativeDriver on the Animated object. For this, you'll need to change from animating 'top' directly, to using translateY. I've 'hacked in' those changes locally, and it's a lot smoother.

[stanica]

Can you share your code?

[kbrandwijk]

This is the patch diff. I noticed the bar being slightly too low after my change, not sure why, maybe there's a slight difference between top and y, I didn't have time to investigate, so I just put the top at -5 for now. You could probably tweak the animated value of 10 that's used, but like I said, it was just a quick hack. If I find the time to properly tweak those, I'll submit a PR.

If you're not interested in the performance side, but just want the warning in RN 0.62 to go away, you can just add useNativeDriver: false and ignore the other changes.

diff --git a/node_modules/react-native-barcode-mask/index.js b/node_modules/react-native-barcode-mask/index.js
index 718a4ef..594fbe3 100644
--- a/node_modules/react-native-barcode-mask/index.js
+++ b/node_modules/react-native-barcode-mask/index.js
@@ -67,8 +67,14 @@ class BarcodeMask extends React.Component {
       top: new Animated.Value(10),
       maskCenterViewHeight: 0,
     };
+    this.transformStyle = {
+      transform : [{ 
+        translateY : this.state.top,
+      }]
   }
 
+  
+}
   componentDidMount() {
     this._startLineAnimation();
   }
@@ -97,10 +103,12 @@ class BarcodeMask extends React.Component {
         Animated.timing(this.state.top, {
           toValue: this.state.maskCenterViewHeight - 10,
           duration: this.props.lineAnimationDuration,
+          useNativeDriver: true,
         }),
         Animated.timing(this.state.top, {
           toValue: 10,
           duration: this.props.lineAnimationDuration,
+          useNativeDriver: true,
         })
       ])
     );
@@ -176,8 +184,9 @@ class BarcodeMask extends React.Component {
                 {
                   backgroundColor: this.props.animatedLineColor,
                   height: this.props.animatedLineHeight,
-                  top: this.state.top,
+                  top: -5,
                 },
+                this.transformStyle
               ]}
             />
           )}
@@ -196,6 +205,7 @@ class BarcodeMask extends React.Component {
                 {
                   width: this.props.width,
                   height: this.props.height,
+
                 },
               ]}
             />

[shahnawaz]

🎉 This issue has been resolved in version 1.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀