how can change the color of the message box

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

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

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

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

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

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

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

And if i wanna change the text color on bubble ?

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

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

@hackrx

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

@hackrx

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

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 🤔

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

@capridigitalmedia

@capridigitalmedia This may be helpful
#268 (comment)

Simple solution.

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

@capridigitalmedia

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

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

Navigation Menu

Repository navigation

how can change the color of the message box #640

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

how can change the color of the message box #640

Description

Activity

Frexuz commented on Nov 17, 2017

xcarpentier commented on Dec 21, 2017

alamorre commented on Jun 19, 2019

kg-currenxie commented on Jun 20, 2019

juanmanuelco commented on Oct 28, 2019

boukarsall commented on Nov 30, 2019

hackrx commented on Jul 16, 2020

Nagasai97 commented on Feb 15, 2021

alenseferovic1 commented on Apr 15, 2021

kg-currenxie commented on Apr 15, 2021

capridigitalmedia commented on Mar 5, 2022

deidalopez commented on Apr 21, 2022

saurabh-000 commented on May 19, 2022

rytilahti-juuso commented on Aug 6, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions