Add native driver support for Bar and smooth animation

[nerdmed]

@oblador thanks for that great lib! I have had some issues with the progress bar being jaggy while animating. Here is a suggestion that encourages the new RN native driver, i

I have tried to do the same to the circles but i get stuck with a JSON error. I think its coming from the SVG parsing or something. If you are interested to try it out see e80c8f7

[nerdmed]

@oblador any chance to merge this? Or any kind of feedback?

[MrHubble]

@nerdmed would this pull request help to address the following type of issue?

Animation in react-native-progress is done on the JS thread so anything slowing it down
will cause the animations to stutter. This should be addressed by offloading the animations
using native / declarative animation.
#35 (comment)

[nerdmed]

@MrHubble possibly yes! But i have only implemented it for the progress bar. The Circle animation code is quite harry and not straight forward to work with, but it should be also possible to implement it there.

[oblador]

This is cool @nerdmed! Why did you change the animation to a timing instead of a spring?

[nerdmed]

@oblador we are using the progress bar like a real one for audio playback. As soon as you use spring easing and changing the value frequently it also stutters and looks strange. A progressbar used for imperative progress should not animate with a spring? Do you think its legit here or not really whats intended?

[oblador]

OK, gotcha. However I don't want to make an unnecessary breaking change and also break my use case . Perhaps it would be better to expose some props to configure the animation? Like duration/bounciness/easing etc.

[nerdmed]

will do! I think i will find some time at the weekend!

[nerdmed]

@oblador alright now i have changed the way it works. Users can optionally override the animation function and config. I tried a little bit with a function as a prob but it gets quite messy and complicated to pass a function that returns a functions that takes the internal progress. What do you think of this kind of API? The current state does not change or break the behaviour compared to the old version.

[nerdmed]

@oblador here is an example how i am using it in my project with the new optional API
works like a charm and is ultra fluid as Animated.timing with linear easing is way faster

<ProgressBar
  useNativeDriver
  style={styles.progressBar}
  progress={progress}
  width={this.state.previewPlayerWidth}
  height={progressBarHeight}
  borderRadius={0}
  borderWidth={0}
  color={primary}
  unfilledColor={lightGray}
  animationOptions={{
      animationFunction: Animated.timing,
      config: { easing: Easing.linear },
  }}
/>

[nerdmed]

@oblador Any feedback?

[kesha-antonov]

Would love to try this 👍

[oblador]

Looks good @nerdmed, just need to find some time to properly review and test it again. Thanks for your patience!

[oblador]

Looks great! I'm going to merge this and make some change to the props API myself. Thanks again!

[oblador]

Released in 3.4.0.

[MrHubble]

@nerdmed @oblador thanks so much for adding this functionality. When I use useNativeDriver my progressBar indicator is no longer displayed correctly. It goes from this:

to this:

with code:

<ProgressBar
  useNativeDriver
  indeterminate={true}
  height={50} width={300} color={"#df691a"} unfilledColor={"#4e5d6c"} borderWidth={0}
/>

Any idea what I'm doing wrong here?

Update

When I use the correct syntax of useNativeDriver={true} I see no indicator at all.

[nerdmed]

@MrHubble can you try to disable: indeterminate={true}

[MrHubble]

@nerdmed thanks for taking the time to response. I'm actually not updating the progress in this instance and am using the ProgressBar as a sort of loading spinner. Because of this disabling indeterminate means the progress indicator does not move. Do you know of anything else I could try to make both indeterminate and useNativeDriver work together?

[nerdmed]

@MrHubble I am not sure what the problem is. I was just guessing cause after reading the source code i was impressed how complicated this indeterminate stuff makes all the code. If you could provide a small react native example with your problem i could try to debug it with you.

[MrHubble]

@nerdmed I'm really stumped with this one. I created a sample app with create-react-native-app (CRNA) and it worked fine, I then copied that code to my app (with a few minor modifications ie using AppRegistry) and it doesn't display the same (as per my screenshots above )

I've checked that versions match in package.json, I've tried deleting and moving around lots of parts of the code but like I mentioned it's essentially the same working code I copied across from my CRNA app.

The only thing I can think to try is to manually set the innerWidth but I can't quite figure out how to do this from the code. Are you aware if this is possible?

https://github.com/oblador/react-native-progress/blob/e26623be7229acbb3526327199fb6812d57dfee3/Bar.js