rafaelmotta / react-native-progress-bar-animated

📊 Simple, customizable and animated progress bar for React Native
52 stars 39 forks source link

Native Driver warning leads to force close and apps reload. #20

Open johfarrell opened 4 years ago

johfarrell commented 4 years ago

WARN useNativeDriver was not specified. This is a required option and must be explicitly set to true or false. In my case, after getting this warn, the view reload itself.

t880216t commented 3 years ago

me too

bfarrgaynor commented 3 years ago

I fixed this by adding: userNativeDriver: true,

To AnimatedProgressBar.js

animateWidth() {
    const toValue = ((this.props.width * this.state.progress) / 100) - this.props.borderWidth * 2;

    Animated.timing(this.widthAnimation, {
      easing: Easing[this.props.barEasing],
      toValue: toValue > 0 ? toValue : 0,
      duration: this.props.barAnimationDuration,
      userNativeDriver: true,
    }).start();
  }

  animateBackground() {
    Animated.timing(this.backgroundAnimation, {
      toValue: 1,
      duration: this.props.backgroundAnimationDuration,
      userNativeDriver: true,
    }).start();
  }
johfarrell commented 3 years ago

I fixed this by adding: userNativeDriver: true,

To AnimatedProgressBar.js

animateWidth() {
    const toValue = ((this.props.width * this.state.progress) / 100) - this.props.borderWidth * 2;

    Animated.timing(this.widthAnimation, {
      easing: Easing[this.props.barEasing],
      toValue: toValue > 0 ? toValue : 0,
      duration: this.props.barAnimationDuration,
      userNativeDriver: true,
    }).start();
  }

  animateBackground() {
    Animated.timing(this.backgroundAnimation, {
      toValue: 1,
      duration: this.props.backgroundAnimationDuration,
      userNativeDriver: true,
    }).start();
  }

I already made a pull request on that the day I reported the issue. Still no response from the owner.

denisvely commented 3 years ago

Any update?

jejecrunch commented 3 years ago

I resolved. You should add library code useNativeDriver: true (or false)!

denisvely commented 3 years ago

I resolved. You should add library code useNativeDriver: true (or false)!

Not Working

denisvely commented 3 years ago

Any updates? it's just one row please update it that warn drives me mad.

johfarrell commented 3 years ago

Any updates? it's just one row please update it that warn drives me mad.

Still waiting for the merge mate.😅

MuflahNasir commented 3 years ago

Any updates?? I am also getting this useNativeDriver warning.

itamarbareket commented 2 years ago

Hi just as a quick fix you can create this file as patches/react-native-progress-bar-animated+1.0.6.patch in your root repo dir and set it's value to

diff --git a/node_modules/react-native-progress-bar-animated/src/AnimatedProgressBar.js b/node_modules/react-native-progress-bar-animated/src/AnimatedProgressBar.js
index 8ba19be..4963b58 100644
--- a/node_modules/react-native-progress-bar-animated/src/AnimatedProgressBar.js
+++ b/node_modules/react-native-progress-bar-animated/src/AnimatedProgressBar.js
@@ -61,6 +61,7 @@ class ProgressBar extends React.Component {
       easing: Easing[this.props.barEasing],
       toValue: toValue > 0 ? toValue : 0,
       duration: this.props.barAnimationDuration,
+      useNativeDriver: false
     }).start();
   }

then run yarn patch-package to fix that.

You can also add it to your package.json file for a more automated workflow:

 "scripts": {
+  "postinstall": "patch-package"
 }
toniellenk commented 2 years ago

Any updates??

Jip-bot commented 2 years ago

Any updates??

Hey man, i dont think this will ever be merged but its easy to apply yourself. Since he probably isn't ever going to be updated again i've made my own patch using https://www.npmjs.com/package/patch-package including Lineargradient from expo-linear-gradient https://docs.expo.dev/versions/latest/sdk/linear-gradient/. I also did as some here have done and added useNativeDriver: false on 3 lines in the AnimatedProgressBar.js file. My full patch is on the LinearGradient issue: #22 Hope this helps !