[Animation Stutter in Production Environment] Slider value should be changed via setState or not?

[themakerman]

Hi Guys,

I am developing a music player where i am trying to make the performance of animation and slider more fluid. I was using slider provided by vanilla react native and implemented the setState logic. The result was ok but as soon as i start panResponder gesture processing, the animation looses its smoothness.

I saw this library where @jeanregisser said instead of setState, Animated is being used which is an ideal scenario as it won't cause unnecessary re-rendering. But even after using this library i face the same lag.

This is the result i get in production environment.
https://drive.google.com/open?id=1Q_QbUWpLTF9QsO1h8zyXzN_mlVVNzRhf

state = { currentStateBasedTime: 0, isPlaying: true, isLiked: true, onRepeat: true, songChanged: false };
.
.
.

> fetchCurrentTrackTime() {
>       this.audioFile.getCurrentTime((seconds, isPlaying) => {
>         if (isPlaying) {
>           this.setState({ currentStateBasedTime: seconds });
>         }
>       }
>     );
>     return this.state.currentStateBasedTime;
>   }
> .
> .
> .
> somewhere inside render() {
>  <Slider
>                 maximumValue={this.getTrackLength()}
>                 maximumTrackTintColor='#971C1C'
>                 minimumTrackTintColor='#FF5252'
>                 thumbTintColor='#971C1C'
>                 style={styles.sliderStyle}
>                 value={this.fetchCurrentTrackTime()}
>    />
> }
> fetchCurrentTrackTime() {
>       this.audioFile.getCurrentTime((seconds, isPlaying) => {
>         if (isPlaying) {
>           this.setState({ currentStateBasedTime: seconds });
>         }
>       }
>     );
>     return this.state.currentStateBasedTime;
>   }
> .
> .
> .
> somewhere inside render() {
>  <Slider
>                 maximumValue={this.getTrackLength()}
>                 maximumTrackTintColor='#971C1C'
>                 minimumTrackTintColor='#FF5252'
>                 thumbTintColor='#971C1C'
>                 style={styles.sliderStyle}
>                 value={this.fetchCurrentTrackTime()}
>    />
> }