React-native-gifted-chat: Render custom component inside message area

[leonel-lordford]

Hi there and thanks for this amazing component... I have a question: can I add some "special messages" for the user to take some action in the app, like navigate to a specific screen or pop up a modal or similar?

Thank you.

[maieonbrix]

The documentation mentions those three props :

renderMessage (Function) - Custom message container
renderMessageText (Function) - Custom message text
renderMessageImage (Function) - Custom message image

The first one fits your needs as it can return some TouchableOpacity container that, onPress, trigger whatever action you'd like

[ownikss]

I thing props renderCustomView is easier for this aim. If you want show your message in same bubble as other messages.
But if you want show specific view see MehdiAlouafi solution

[leonel-lordford]

I'll check both solutions ! Thanks...

[xcarpentier]

@leonel-lordford any news?

[xcarpentier]

Feel free to re-open if you need more informations.

[zarackritter]

Hi there, I feel like my issue has something to do with that.

I'm working on a chatbot and sometimes the chatbot response comes with a file or custom text. My question is, how can I show a customView after a bubble in a conversation?

Example:
Person: What about my payment?
Chatbot: Here is some information for you:
Chatbot: (image or file in another bubble)

I tried to put renderMessageText param inside message object but didn't work.

Thanks for your time friends!

[xcarpentier]

https://snack.expo.io/@xcarpentier/gifted-chat <- here you can see example of renderCustomView

[zarackritter]

Works fine!! Thank you!