React-native-gifted-chat: How to change the color of date in giftedchat?

Created on 2 Mar 2018 · 5Comments · Source: FaridSafi/react-native-gifted-chat

Issue Description

I'm having a problem finding how to change the color of the date.

Steps to Reproduce / Code Snippets

date_color_issue

Expected Results

I want to change the color to black.

Additional Information

Nodejs version: 4.6.1
React version:
React Native version: 0.50.3
react-native-gifted-chat version:
Platform(s) (iOS, Android, or both?): Android, Haven't checked iOS

Source

prmehta24

Most helpful comment

Yes you can easy do that with the GiftedChat.

First you will need to import the Day component
import {GiftedChat, Day} from 'react-native-gifted-chat';

then you have to provide the renderDay prop for the GiftedChat and there you will pass a function like that:

  renderDay(props) {
    return <Day {...props} textStyle={{color: 'red'}}/>
  }

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

The renderDay function just returns the normal component with the prop textStyle, there you will pass an object that specifies the textStyle of the day. Have a look also at the src folder of the GiftedChat and the Day.js file for more information.

mafiusu on 3 Mar 2018

👍4 ❤1 🎉1

All 5 comments

Yes you can easy do that with the GiftedChat.

First you will need to import the Day component
import {GiftedChat, Day} from 'react-native-gifted-chat';

then you have to provide the renderDay prop for the GiftedChat and there you will pass a function like that:

  renderDay(props) {
    return <Day {...props} textStyle={{color: 'red'}}/>
  }

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

mafiusu on 3 Mar 2018

👍4 ❤1 🎉1

It worked !!!
Thanks for the quick reply @mafiusu .

prmehta24 on 4 Mar 2018

It Worked for me too, Thank you guys!!!!!

philipperocha on 25 Jun 2018

I am new in react native anyone explain

renderDay(props) {
return
}

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

what is means {...props}