bubble messages within renderBubble function can't re-rendered after setState

Hi every one, I want to animate a progressbar for every sound message duration when gets played, I have a PLAY ICON for any sound message, when I click on play icon, sound starts as well and I update the progressbar by setState, actually the progress gets update but the problem is my progressbar doesnt re-render to get progress value for progressbar. and also the play icon does not re-render to get red color.

I got something from:

Jordan Daniels

my code is:

render(){
 return (
   <GiftedChat
         messages={this.state.messages}
          onSend={messages => this.onSend(messages)}
          user={{
              _id: this.state.userId,
           }}
           renderBubble={this.renderBubble}
           renderInputToolbar={this.renderInputToolbar.bind(this)}
      />
 );
}

renderBubble = props => {
        if (props.currentMessage.audio) {
            return (
                <View style={[{ width: 150, height: 70, backgroundColor: 'lightgray' }, props.position === 'left' ? { left: -41 } : {}]}>
                    <EIcon
                        name="google-play"
                        size={30}
                        color={this.state.playAudio ? "red" : "blue"}
                        style={{
                            left: 90,
                            position: "relative",
                            shadowColor: "#000",
                            shadowOffset: { width: 0, height: 0 },
                            shadowOpacity: 0.5,
                            backgroundColor: "transparent"
                        }}
                        onPress={() => {
                            this.setState({
                                playAudio: true
                            });
                            const sound = new Sound(props.currentMessage.audio, "", error => {

                                if (error) {
                                    console.log("failed to load the sound", error);
                                }

                                const duration = sound.getDuration();
                                const progressPhase = 1 / duration;

                                if (duration !== 0) {
                                    this._interval = setInterval(() => {

                                        this.setState({
                                            progress: this.state.progress += progressPhase
                                        });

                                        if (this.state.progress >= 1) {
                                            clearInterval(this._interval);
                                            this.setState({
                                                progress: 0.0,
                                                playAudio: false
                                            });
                                        }

                                    }, 1000);
                                }

                                sound.play(success => {
                                    console.log(success, "success play");
                                    if (!success) {
                                        Alert.alert("There was an error playing this audio");
                                    }
                                });

                            });
                        }}
                    />

          
                    <Progress.Circle progress={this.state.progress} showsText size={35} />

                </View>
            );
        } else {
            return (
                <Bubble
                    {...props}
                    textStyle={{
                        right: {
                            color: '#fff',
                        },
                        left: {
                            color: '#fff',
                        },
                    }}
                    wrapperStyle={{
                        left: {
                            backgroundColor: "orange",
                            left: -41
                        },
                        right: {
                            backgroundColor: 'green'
                        }
                    }}
                />
            );
        }
    }

My Expections

I want to re-render progressbar with updating state { progress: 0.0 } when I call

 this.setState({
           progress: this.state.progress += progressPhase
 });

// this should be re-render on every update
<Progress.Circle progress={this.state.progress} showsText size={35} />

Additional Information

• Nodejs version: v11.3.0
• React version: 16.6.3
• React Native version: 0.57.8
• react-native-gifted-chat version: 0.7.2
• Platform(s) (iOS, Android, or both?): on macos for Android

[xcarpentier]

Sorry about that. Maybe try to use extraData props?

[muhammadwfa]

Actually I found the problem but still I dont know what is the solutions, The problem is with react-native-gifted-chat version 0.7.2 The above code works well on react-native-gifted-chat version 0.4.3

In version 0.4.3 there when I click play icon all sound message progessbar starts progressing instead of the one I clicked. I want just the one should start progressing which I have clicked.