I'm trying to change the background color of the chat bubble from react native.

It seemed so simple here:

And that's exactly the code I added, but then I got

You likely forgot to export your ponent from the file it's defined in.
Check the render method of `Message`.

Which lead me to try a bunch of different things that didn't work. And I know it must be super simple, but I know next to nothing about React Native :/

Do you know why this is happening? Thanks in advance!

I'm trying to change the background color of the chat bubble from react native.

It seemed so simple here: https://github./FaridSafi/react-native-gifted-chat/issues/493

And that's exactly the code I added, but then I got

You likely forgot to export your ponent from the file it's defined in.
Check the render method of `Message`.

Which lead me to try a bunch of different things that didn't work. And I know it must be super simple, but I know next to nothing about React Native :/

Do you know why this is happening? Thanks in advance!

• javascript
• android
• react-native

• 1 Please add minimal reproducible example to your question. – bennygenel Commented Nov 1, 2017 at 14:16
• Can you show us the code for your Message ponent? – Dan Commented Nov 1, 2017 at 14:56
• @Dan I'm entering the project now, so I'm unfamiliar with the code, but it must be a pre-made ponent, because there's no file with that name. Looking around the code I also can't find anything with "Message" ponent – user5646514 Commented Nov 1, 2017 at 15:19
• It's not one of the framework ponents so they're probably pulling it from a third party library somewhere if its not defined explicitly in your project. Check your dependencies and then the documentation associated with it. – nordicnomad Commented Nov 1, 2017 at 17:04
• @nordicnomad oh ok, thank you! I though it was a normal react native thing – user5646514 Commented Nov 1, 2017 at 18:29

2 Answers 2

If you want to display different color for two users this will work. It also accepts other text styles.

import { GiftedChat, Bubble, Time} from 'react-native-gifted-chat';


 <GiftedChat
    messages={messages}
    onSend={newMessage => onSend(newMessage)}
    renderBubble={props => {
      return (
        <Bubble
          {...props}

          textStyle={{
            right: {
              color: 'white',
              fontFamily: "CerebriSans-Book"
            },
            left: {
              color: '#24204F',
              fontFamily: "CerebriSans-Book"
            },
          }}
          wrapperStyle={{
            left: {
              backgroundColor: '#E6F5F3',
            },
            right: {
              backgroundColor: "#3A13C3",
            },
          }}
        />
      );
    }}                
    user={{
        _id: 1,
    }}
/>

Do you have imported Bubble?

import { GiftedChat, Bubble } from 'react-native-gifted-chat';

Do you have set your renderBubble function as props of GiftedChat as below?

<GiftedChat
            messages={this.state.messages}
            onSend={this.onSend}
            renderBubble={this.renderBubble}
            user={this.state.currentUser}
            showUserAvatar={true}
 />