2

How to change GetStream own/current bubble message background color in React Native?

const theme = {
  messageSimple: {
    content: {
      container: {
        backgroundColor: 'purple',
      },
    },
    file: {
      container: {
        backgroundColor: 'purple',
      },
    },
  },
};


<OverlayProvider value={{ style: theme }}>
    <Chat client={client}>
      <ChannelList />
    </Chat>
  </OverlayProvider>

Unfortunately nothing works and I can't find a documentation and thread about it, at least in RN.

Need to change the gray bubble and text color but the above code resulted to this. enter image description here

Bitwise DEVS
  • 2,858
  • 4
  • 24
  • 67

1 Answers1

2

I had this exact question, found your post, was bummed you were not answered and so found the solution for both of us! You're actually really close. It is textContainer instead of container that should be in messageSimple -> content in your theme. Here is the code and a screenshot of the result

enter image description here

enter image description here

If you want to, you can also customize the messages of the current user separately by creating a theme and passing it as myMessageTheme to Channel and it will override the specified parts of the theme only for that user.

enter image description here

Chat bubble with blue background

Hope this helps! :)

https://getstream.io/chat/docs/sdk/reactnative/guides/message-customization/#message-bubble-with-custom-text-styles--fonts

https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#mymessagetheme

tangledReader
  • 61
  • 1
  • 6
  • Wow thanks a lot! So the first sample changes the color for both outgoing and incoming message right? If so then in order for me to change the bubble and text color of both outgoing and incoming messages, I should implement both of your answers right? – Bitwise DEVS Feb 23 '23 at 04:37
  • 1
    The first answer (the purple one) changes both the incoming and outgoing messages. The second one (blue) changes only the outgoing messages. So if you want both (outgoing and incoming) to be the same colour, only the first solution is needed. However, if you want to change both but to have them be different colours, then you need to implement both solutions with said colours. In case you wanted to change only the outgoing messages, only the second solution (blue) would be needed. – tangledReader Feb 23 '23 at 14:15