Search code examples
react-nativegetstream-iogetstream-chat

GetStream: Change message bubble background

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

Solution

  • 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