Different Bubble color for each user.

[tonnth]

Issue Description

If more than 2 user in a conversation.
How can I set Bubble color for each user?
Thank you in advance!

Additional Information

• React Native version: 0.50.3

[mafiusu]

Yes use the renderBubble prop of the GiftedChat and pass a function like this

renderBubble={this.renderBubble}

there you will return your Custom Bubble.js (Copy the code from the src folder in the node module)

  renderBubble(props) {
    return <Bubble {...props} />;
  }

In Bubble.js you will find the styles. You have to look at the wrapper in left and right and set the backgroundColor you want to.

[tonnth]

Thanks @mafiusu
It work with 2 user in a conversation. But i want to set different corlor for each user in leftside like picture below and i dont know how to do that?

[mafiusu]

Yes, I use this pattern to display usernames in different colors. You could use this function:

  getColor(username){
    let sumChars = 0;
    for(let i = 0;i < username.length;i++){
      sumChars += username.charCodeAt(i);
    }

    const colors = [
      '#e67e22', // carrot
      '#2ecc71', // emerald
      '#3498db', // peter river
      '#8e44ad', // wisteria
      '#e74c3c', // alizarin
      '#1abc9c', // turquoise
      '#2c3e50', // midnight blue
    ];
    return colors[sumChars % colors.length];
  }

Then you will pass the backgroundColor style in the Render Method of Bubble.js. You have to decide if it's left or right using this.props.position === 'left' ? DO_Something : something else
You just pass it like backgroundColor: getColor(username)

[tonnth]

You saves my life.
Thank you @mafiusu .

[xcarpentier]

I close this issue but create a FAQ in readme to refer it: https://github.com/FaridSafi/react-native-gifted-chat#questions

[gianpaj]

FYI this is the code example you want:

  renderBubble={props => {
    return (
      <Bubble
        {...props}
        textStyle={{
          right: {
            color: 'yellow',
          },
        }}
        wrapperStyle={{
          left: {
            backgroundColor: 'red',
          },
        }}
      />
    );
  }}

[PrimeTimeTran]

Hey guys, I've been struggling with understanding what you guys mean.

Could you please help me out a little bit more?

This is what my Gifted Chat looks like.

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        renderBubble={this.renderBubble}
        onSend={messages => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    )
  }

Here are the two helper functions you guys mentioned. I'm not sure how to use them in order to pass each individual bubble a color in order to get a distinct color. Please advise.

  renderBubble = (props) => {
    let usernames = props.messages.map(message => message.user.full_name)
    let colors = usernames.map(username => this.getColor(username))

    return (
      <Bubble
        {...props}
        textStyle={{
          right: {
            color: 'yellow',
          },
        }}
        wrapperStyle={{
          left: {
            backgroundColor: colors,
          },
        }}
      />
    );
  }

  getColor(username){
    let sumChars = 0;
    for(let i = 0;i < username.length;i++){
      sumChars += username.charCodeAt(i);
    }

    const colors = [
      '#e67e22', // carrot
      '#2ecc71', // emerald
      '#3498db', // peter river
      '#8e44ad', // wisteria
      '#e74c3c', // alizarin
      '#1abc9c', // turquoise
      '#2c3e50', // midnight blue
    ];
    return colors[sumChars % colors.length];
  }

I'm uncertain where I should pass a single user in, because GiftedChat takes an array of messages so I don't know how to pass in a username so that it'll be used accordingly.
Thanks for an awesome library btw. First time using it is today and have had a blast so far =)

[jameshuynh]

Hey Loi,

Inside renderBubble function props, you could actually get the currentMessage and its user, then you could decide on the color of that bubble like below:

renderBubble = props => {
    let username = props.currentMessage.user.name
    let color = this.getColor(username)

    return (
      <Bubble
        {...props}
        textStyle={{
          right: {
            color: 'white'
          }
        }}
        wrapperStyle={{
          left: {
            backgroundColor: color
          }
        }}
      />
    )
  }

[PrimeTimeTran]

@jameshuynh Ohhh, thanks bud!

[gianpaj]

How would you customize the color of the message timestamp?

This works from 0.5.0 after #942 has been merged

<GiftedChat
  messages={this.state.messages}
  onSend={this.onSend}
  renderCustomView={CustomView}
  keyboardShouldPersistTaps="never"
  user={{ _id: 1 }}
  renderBubble={props => {
    return (
      <Bubble
        {...props}
        timeTextStyle={{
          right: { color: 'red' }
        }}
      />
    );
  }}
  parsePatterns={this.parsePatterns}
/>

---

Previous comment

i.e.

react-native-gifted-chat/src/Time.js

Lines 12 to 15 in 36082ff

	export default function Time({ position, containerStyle, currentMessage, timeFormat, textStyle }, context) {
	return (
	<View style={[styles[position].container, containerStyle[position]]}>
	<Text style={[styles[position].text, textStyle[position]]}>

This doesn't work:

    <Bubble
        {...props}
        timeProps={{
          textStyle: {
            right: { color: 'black' },
          },
        }}
    />

[AndresTIY]

any luck @gianpaj ?

[lincolnfraley93]

so, the only way to achieve this behavior is by copying the source code for Bubble, which itself depends on other files in the source folder, as well as outside packages? shouldn't there be a 'getBubbleColor' prop? i mean, this is the first link under the Questions section on the readme, seems like a common enough issue that it warrants a better solution than basically forking the project...

[gianpaj]

The prop is not being passed down to the Time component. I've made a pull request:

#942

[gianpaj]

@AndresTIY my PR #942 has been merged to master 🎉. Hopefully, a new release will be out soon 🙏

[Delfshkrimm]

Just a tiny bit of additional information:
Combining @mafiusu and @gianpaj's answers, you don't actually need to write your own Bubble.js (or scaffold code out of the node_module). You can just import the Bubble component like so:

import { Bubble } from 'react-native-gifted-chat';
...
          renderBubble={props => {
            return (
              <Bubble
                {...props}
                wrapperStyle={{
                  left: {
                    backgroundColor: 'white',
                  },
                }}
              />
            );
          }}

[Nagasai97]

FYI this is the code example you want:

  renderBubble={props => {
    return (
      <Bubble
        {...props}
        textStyle={{
          right: {
            color: 'yellow',
          },
        }}
        wrapperStyle={{
          left: {
            backgroundColor: 'red',
          },
        }}
      />
    );
  }}

how to pass the props in the render
this.renderBubble()----------------------???????

[gianpaj]

@Nagasai97 renderBubble is a prop of the <GiftedChat> component.

See my updated comment

All props on README.

[Nagasai97]

@gianpaj can i get the code of onSend function for class component...?

[dexark]

Does anyone have an example of how to change the bubble styling when using typescript props?

[MarquezMoore]

How is this done with functional component?

[GoyoBjS]

How is this done with functional component?

This is the version with Functional Components

const renderBubble = props => { return ( <Bubble {...props} textStyle={{ right: { color: 'yellow', }, }} wrapperStyle={{ left: { backgroundColor: 'red', }, }} /> ); }

And then:

<GiftedChat messages={messages} onSend={messages => onSend(messages)} user={{ _id: 1 }} **renderBubble={renderBubble}** />

[rytilahti-juuso]

A more complete example on how to modify the styles of the text bubbles using functional components: #640 (comment)