React native slider not updating progress on state update

Question

I'm using react native version 0.61.5 and react version 16.8.3 with react native gifted chat version 0.9.11 to build a small chat app. I want to send audio messages. So I use react-native-audio-recorder-player library to record audio and play it. So far audio recording and playing is a success. Now I want to play the audio track progress when user play the audio. I used react-native-community/react-native-slider to display a seekbar. This is how the audio message look like

When user press the play button I want to show the audio track progress on this slider. So far this is how I did it.

Gifted Chat component

render() {
  return (
    <GiftedChat
      messages={this.state.messages}
      onSend={messages => this.onSend(messages)}
      scrollToBottom={true}
      renderUsernameOnMessage={true}
      renderComposer={this.renderComposer}
      renderBubble={this.renderBubble}
      user={{
        _id: 1,
        name:'You'
      }}
    />
  )
}

renderBubble component

renderBubble = (props) => {
  return(
    <View>
      <View style={{display:'flex',flexDirection:'row'}}>
        <Button iconLeft transparent onPress={this.onStartPlay}>
            <Icon name='ios-play' />
        </Button>
        <Slider
          style={{width: 150, height: 40}}
          minimumValue={0.0000}
          maximumValue={1.0000}
          value={this.state.audioProgress}
          minimumTrackTintColor="#FFFFFF"
          maximumTrackTintColor="#000000"
        />
      </View>
      <Bubble {...props}/>
    </View>
  )
}

onStartPlay function

onStartPlay = async () => {
  console.log('onStartPlay');
  const msg = await audioRecorderPlayer.startPlayer('sdcard/test_recording.aac');
  console.log(msg);
  audioRecorderPlayer.addPlayBackListener((e) => {
    if (e.current_position === e.duration) {
      console.log('finished');
      audioRecorderPlayer.stopPlayer();
    }
    this.setState({
      currentPositionSec: e.current_position,
      currentDurationSec: e.duration,
      playTime: audioRecorderPlayer.mmssss(Math.floor(e.current_position)),
      duration: audioRecorderPlayer.mmssss(Math.floor(e.duration)),
    });

    let currentProgress = Math.max(0,  e.current_position) /  e.duration;
    console.log('currentProgress',parseFloat(currentProgress).toFixed(4));
    this.setState({ audioProgress: parseFloat(currentProgress).toFixed(4) });
  });
};

and I can see in the console current progress is getting updated in the audioProgress state. And I'm setting the value of the Slider via the audioProgress but the position of the seek bar is not getting updated. I'm testing this on Nexus android emulator.

Answer 1

I believe you need to add the onValueChange to the Slider. Try adding either:

<Slider
          style={{width: 150, height: 40}}
          minimumValue={0.0000}
          maximumValue={1.0000}
          value={this.state.audioProgress}
          onValueChange = {this.state.audioProgress.bind(this)} <===
          minimumTrackTintColor="#FFFFFF"
          maximumTrackTintColor="#000000"
        />

or

<Slider
          style={{width: 150, height: 40}}
          minimumValue={0.0000}
          maximumValue={1.0000}
          value={this.state.audioProgress}
          onValueChange = {this.state.audioProgress} <===
          minimumTrackTintColor="#FFFFFF"
          maximumTrackTintColor="#000000"
        />

Let me know if it works!