React-native-gifted-chat: Bubble doesn't rerender

[MamyChow]

Issue Description

Hi,
I'm making audio message. So the bubble for audio display a play icon and if the user click on play it display a pause icon. I change the icon with a state to re-render bubble. It's working for the last audio message but for the others the icon doesn't change. I think that just the last bubble re-render.
Do you have any idea to handle the problem ?

Additional Information

• React version: 16.9.0
• React Native version: 0.61.1
• react-native-gifted-chat version: 16.3.0
• Platform(s) (iOS, Android, or both?): Both

[venkatesh-inspiredge]

Hi, @MamyChow did you solve this?

[MamyChow]

Nope

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[luco]

Same here. @MamyChow no fix yet?

[MamyChow]

No fix yet :'(

[luco]

@MamyChow I'm using Apollo, and got it to rerender by updating the query.

[isumesh]

hi @xcarpentier
Can you help us with this ? facing the same issue. only 1st and last message bubble are rendered

[luco]

@xcarpentier I'm seeing the same behavior as @isumesh does. Only the first and last message get's updated. This way I can't update the old messages.

[oleksiikiselov]

I am also facing this issue with RN 0.63, only first and last bubble is getting updated for some reason, any advice is appreciated 👍

[isumesh]

Hi guys any update on this ? This bug is a blocker for us, is there any plan to fix the same ?

[djaoui]

I'm facing this issue as well.
Only last message with Audio will rerender modifications on state change (ie toggle play/pause button).
It's too bad because it doesn't allow to use Gifted Chat for production App although it's such a great solution.
I can see this issue has been reported since June. Any hope ?

Our plan was to implement video next to offer as a solution for production Apps but is it worth it ? Logically, it will be the same issue.

Please @moderator can we have any visibility ? Thanks !

[xcarpentier]

Hi,
Sorry about that!
Did you try to use extraData prop? If you have a prop like isPlaying you may try to pass it thought extraData and see if that triggers a rerendering.

[djaoui]

Hi Xavier, Thanks for your prompt reply.

I found later on in this forum 2 ways to solve this "extraData" and shouldUpdateMessage.

I added extraData={[this.state]} or even extraData={[this.state.sound.isPlaying]} since the button updates the state but it didn't change anything,

As for shouldUpdateMessage, I found only this thread https://github.com/FaridSafi/react-native-gifted-chat/issues/1114 with a start of documentation but it didn't allow me to understand how to implement it.

Can you give me any indication on either or both of the method. I'm happy to help and write a Medium post on "how to control GiftedChat message bubble rendering" with a practical doc on these methods so people will have some material and will stick to using this amazing solution.

Thanks ! Go France 💯 !

EDIT: I just managed to get rerendering. Yayyy !!! Though, I'm not sure why it's working because I don't fully get the understanding on shouldUpdateMessage implementation but it's working so that's some victory.

I did the folowing:
shouldUpdateMessage={(props, nextProps) => { return props.currentMessage.audio == nextProps.currentMessage.audio ? true : false }}
extraData={this.state.soundPlaying}

Though, I commented out the //extraData={this.state.soundPlaying} and it kept working ...

@Xavier if you could help us to make some kind of doc on this specific point and props that would help a lot of people I'm sure.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.