React-native-gifted-chat: Unable to style time stamp of chat bubbles

[aravi365]

Issue Description

Unable to change the timestamp styling displayed in chat bubbles

Steps to Reproduce / Code Snippets

  renderBubble (props) {
    return (
      <Bubble
        {...props}

        textStyle={{
          right: {
            color: 'black',
            fontWeight:'400'
          },
          left:{
            color:'black',
            fontWeight:'400'

          }
        }}
        wrapperStyle={{
          right: {
            backgroundColor: '#ffd633'
          },
          left:{
            backgroundColor:'#fff0b3'
          }
        }}
      />
    )
  }

Expected Results

Styling for time stamps just like the message text in the bubble

Additional Information

• React version: 16.8.3
• React Native version: 0.59.10
• react-native-gifted-chat version: 0.13.0
• Platform(s) (iOS, Android, or both?): Yes

[aravi365]

This issue can be marked as duplicate, but the thing is i found a thread with a guide to style the chatbubbles - but not the timestamps.

[sichiu]

Have you tried using renderTime?

Below is what I do

```import { Time } from 'react-native-gifted-chat';
import Colors from '../../../constants/Colors';

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end'
},
chat: {
color: Colors.grey,
textAlign: 'right'
}
});

const ChatTime = ({ currentMessage, timeFormat }) => {
return (
currentMessage={currentMessage}
timeFormat={timeFormat}
containerStyle={{
left: styles.container,
right: styles.container
}}
timeTextStyle={{
right: styles.chat,
left: styles.chat
}}
/>
);
};

[judygab]

@sichiu do you just pass that ChatTime as a props to renderTime?

[judygab]

I don't think styling looks right, because I tried that and date overflows from the bubble.

[Gabsys]

Just use timeTextStyle={{ left: { color: 'black' },right: { color:'black'} }} props at GiftedChat tag

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[varunb-kc]

I used

timeTextStyle={ left:{ ... }, right: { ... } }

prop at Bubble Component.

[jairenee]

Is there no way to get more granular than "left" and "right"? If there's a multi-user chat with multiple different background colors going on on the left side, I want to be sure the timestamp is readable. If I'm limited to "left", then that can't happen. Yikes.