New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different Bubble color for each user. #672

Closed
tonnth opened this Issue Dec 20, 2017 · 14 comments

Comments

Projects
None yet
8 participants
@tonnth

tonnth commented Dec 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mafiusu

mafiusu Dec 20, 2017

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.

mafiusu commented Dec 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@tonnth

tonnth Dec 20, 2017

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?
nh ch p man hinh 2017-12-20 luc 20 12 38

tonnth commented Dec 20, 2017

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?
nh ch p man hinh 2017-12-20 luc 20 12 38

@mafiusu

This comment has been minimized.

Show comment
Hide comment
@mafiusu

mafiusu Dec 20, 2017

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)

mafiusu commented Dec 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@tonnth

tonnth Dec 21, 2017

You saves my life.
Thank you @mafiusu .

tonnth commented Dec 21, 2017

You saves my life.
Thank you @mafiusu .

@xcarpentier

This comment has been minimized.

Show comment
Hide comment
@xcarpentier

xcarpentier Dec 21, 2017

Collaborator

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

Collaborator

xcarpentier commented Dec 21, 2017

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

@gianpaj

This comment has been minimized.

Show comment
Hide comment
@gianpaj

gianpaj Mar 30, 2018

Contributor

FYI this is the code example you want:

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

gianpaj commented Mar 30, 2018

FYI this is the code example you want:

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

This comment has been minimized.

Show comment
Hide comment
@PrimeTimeTran

PrimeTimeTran Jun 2, 2018

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 =)

PrimeTimeTran commented Jun 2, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jameshuynh

jameshuynh Jun 4, 2018

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
          }
        }}
      />
    )
  }

jameshuynh commented Jun 4, 2018

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

This comment has been minimized.

Show comment
Hide comment
@PrimeTimeTran

PrimeTimeTran commented Jun 6, 2018

@jameshuynh Ohhh, thanks bud!

@gianpaj

This comment has been minimized.

Show comment
Hide comment
@gianpaj

gianpaj Jun 17, 2018

Contributor

How would you customize the color of the message timestamp?

i.e.

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' },
          },
        }}
    />
Contributor

gianpaj commented Jun 17, 2018

How would you customize the color of the message timestamp?

i.e.

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

This comment has been minimized.

Show comment
Hide comment
@AndresTIY

AndresTIY commented Jul 26, 2018

any luck @gianpaj ?

@lincolnfraley93

This comment has been minimized.

Show comment
Hide comment
@lincolnfraley93

lincolnfraley93 Aug 3, 2018

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...

lincolnfraley93 commented Aug 3, 2018

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

This comment has been minimized.

Show comment
Hide comment
@gianpaj

gianpaj Aug 3, 2018

Contributor

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

#942

Contributor

gianpaj commented Aug 3, 2018

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

#942

@gianpaj

This comment has been minimized.

Show comment
Hide comment
@gianpaj

gianpaj Sep 7, 2018

Contributor

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

Contributor

gianpaj commented Sep 7, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment