React-native-gifted-chat: Change color of Time text

[pentarex]

Issue Description

I am trying to change the text color of the Time component, but sadly I cannot.
Before it was working when I set the textStyle of the Bubble... (in v0.3.0)
I saw that there was a change on 18 of December 2017 5b67203570a2bcadf9475eec3c14149c4e404eac#diff-fde1e44c890e5f6e50b1f68f49f1034c
and the this.props.textStyle was removed
What am I missing?

Steps to Reproduce / Code Snippets

    /** */
    render() {
        return (
            <GiftedChat
                loadEarlier={this.state.loadEarlier}
                onLoadEarlier={this.onLoadEarlier.bind(this)}
                isLoadingEarlier={this.state.isLoadingEarlier}
                messages={this.state.messages}
                onSend={messages => this.onSend(messages)}
                user={this.getUserInfo()}
                renderFooter={this.renderFooter.bind(this)}
                onInputTextChanged={this.onInputTextChanged.bind(this)}
                renderBubble={this.renderBubble.bind(this)}
                renderAvatar={this.renderAvatar.bind(this)}
                renderTime={this.renderTime.bind(this)}
                showUserAvatar={true}
                showAvatarForEveryMessage={true}
                chatId={this.chatId}
                minInputToolbarHeight={50}
                bottomOffset={50}
            />
        );
    }

/** render the chat bubble */
    renderBubble(props) {
        return (
            <Bubble
                {...props}
                wrapperStyle={{
                    left: {
                        backgroundColor: Colors.chatReceiver,
                    },
                    right: {
                        backgroundColor: Colors.chatSender,
                    }
                }}
                textStyle={{
                    right: {
                        color: Colors.snow,
                        fontFamily: 'Montserrat-Light',
                        fontSize: 14
                    },
                    left: {
                        color: Colors.snow,
                        fontFamily: 'Montserrat-Light',
                        fontSize: 14
                    }
                }}
            />
        );
    }

/** render the time labels in the bubble */
    renderTime() {
        return (
            <Time
                textStyle={{
                    right: {
                        color: Colors.snow,
                        fontFamily: 'Montserrat-Light',
                        fontSize: 14
                    },
                    left: {
                        color: Colors.snow,
                        fontFamily: 'Montserrat-Light',
                        fontSize: 14
                    }
                }}
            />
        );
    }

Expected Results

White text for the time

Currently looks like:

Additional Information

• Nodejs version: v9.3.0
• React version: 16.0.0
• React Native version: 0.51.0
• react-native-gifted-chat version: 0.4.3
• Platform(s) (iOS, Android, or both?): both

[pentarex]

I added additional parameter to the Time function textStyle and its working,

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]]}>
        {moment(currentMessage.createdAt)
          .locale(context.getLocale())
          .format(timeFormat)}
      </Text>
    </View>
  );
}

[rabindrachhachan]

Hi, I have the latest react-native-gifted-chat (0.4.3), But I don't see the Time component props textStyle in the library. Is there anything i am missing?

[pentarex]

Hi,
Either wait for new release. Or fork my branch :)