0

I'm building a chat application which is working fine but now I want to implement blue tick feature to check either message has been seen or not. I'm using socket.io and react-native-gifted-chat in this app. I am struggling to find a way to know how to do this. I visit many links but did not get the clear picture. react-native-gifted-chat describes to use renderTicks function for this but I'm unable to understand its implementation.

renderTicks

  renderTicks = (message) => {
    const {currentMessage, renderTicks, user} = this.props;
    if (renderTicks && currentMessage) {
      return renderTicks(currentMessage);
    }
    if (currentMessage && user && currentMessage.user._id !== user._id) {
      return null;
    }
    if (
      currentMessage &&
      (currentMessage.sent || currentMessage.received || currentMessage.pending)
    ) {
      return (
        <View style={styles.content.tickView}>
          {!!currentMessage.sent && (
            <Text style={[styles.content.tick, this.props.tickStyle]}>✓</Text>
          )}
          {!!currentMessage.received && (
            <Text style={[styles.content.tick, this.props.tickStyle]}>✓</Text>
          )}
          {!!currentMessage.pending && (
            <Text style={[styles.content.tick, this.props.tickStyle]}></Text>
          )}
        </View>
      );
    }
    return null;
  };

GiftedChat

<GiftedChat
        ..........
        renderTicks={(message) => this.renderTicks(message)}
/>

Here currentMessage and renderTicks both are coming undefined.

What I'm doing wrong here, kindly enlighten.

OR

Can anybody help me out with example code of renderTicks.

react-native version = 0.62.2

Thanks in advance.

Adeel Iftikhar
  • 772
  • 7
  • 30

1 Answers1

2

You need to update the message object from the receivers end, when the receiver opens the chat screen component, you can use a useEffect function that mutates the message object at the server. Like it sets the read property to true. The sockets will automatically notify the sender that the object has changed, and the sender will refetch the chat list, with read property set to true. And gifted chat will show a blue tick.

Vigoss fridge
  • 36
  • 4
  • Hi, I am facing the same issue with GiftedChat, not able to change the message states, read property from socket appeared as undefined.. can you please suggest what could be wrong? – NBaua Mar 12 '21 at 16:58