how can change the color of the message box

[dibiro]

I need to change the color of the message box from blue to orange

[Frexuz]

  renderBubble (props) {
    return (
      <Bubble
        {...props}
        wrapperStyle={{
          right: {
            backgroundColor: Colors.primary
          }
        }}
      />
    )
  }

<GiftedChat
  ...
  renderBubble={this.renderBubble}

[xcarpentier]

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

[alamorre]

I see what you're doing but where does that Bubble component come from and how do you import it?

[kg-currenxie]

It's just the normal bubble from gifted-chat, but we just override the default styles

import { Bubble } from 'react-native-gifted-chat'

[juanmanuelco]

And if i wanna change the text color on bubble ?

[boukarsall]

renderBubble (props) {
      return (
        <Bubble
          {...props}
          textStyle={{
            right: {
              color: "white"
            },
            left: {
              color: "white"
            }
          }}
        />
      )
    }

[hackrx]

Can anyone tell me how can I change the shape of the message box
like this

[Nagasai97]

@hackrx i too need to change the shape of this box...

[alenseferovic1]

@hackrx Did you find out how to change the shape of message box?

[kg-currenxie]

Haven't tried, but it seems that you have to implement your own complete component, like the bubble itself: https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/Bubble.tsx 🤔

[capridigitalmedia]

how do i change the entire chat background color, and foregrounnd color

[deidalopez]

@capridigitalmedia This may be helpful
#268 (comment)

Simple solution.

<View style={{backgroundColor: '#yourcolor'}}>
  <GiftedChat ...props />
</View>

[saurabh-000]

@capridigitalmedia
you can use this prop of react native gifted chat to change the background color of
messagesContainerStyle={{backgroundColor:Colors.screenBackgroundColor,}}

[rytilahti-juuso]

Below is a more complete example on how to modify the styles of the text bubbles using functional components:

import { GiftedChat, Bubble } from 'react-native-gifted-chat';
// ...Other imports

export default function ChatScreen() {
  
  const renderBubble = props => { 
    return ( 
      <Bubble 
        {...props} 
        textStyle={{ 
              right: { color: 'blue', backgroundColor:'gray' }, 
        }} 
        wrapperStyle={{
            right: { backgroundColor: 'orange', }, 
            left: { backgroundColor: 'red', }, 
        }} 
      />
    )}
  //... Other necessary code
  
  return (
    <GiftedChat
      renderBubble={renderBubble}
      // Other props..
    />
  );
}