Initial support tick messages #226

jeromegrosse · 2016-09-07T15:04:41Z

I thought it would be a good idea to support ticks appearing in the bubble ala WhatsApp or Telegram depending if the message has been delivered and read.

Here is a screenshot of how it appears as of now with both the read and delivered flag set to true:

What do you think?

kfiroo · 2016-09-07T16:57:52Z

@jeromegrosse Why are messageRead and messageDelivered props of GiftedChat?
Isn't it a per message state and not global?

jeromegrosse · 2016-09-07T19:28:41Z

@kfiroo Yup, you are definitely right. I messed up there, I should use the messages array for that. I'll update the pull request with those changes as soon as possible.

…t and are now read from the message state

jeromegrosse · 2016-09-08T07:03:30Z

@kfiroo I've just pushed a few changes:

The messageRead and messageDelivered props are no longer passed to GiftedChat as such but are instead set on a per message basis using the message state
Also, a message is not read or delivered but rather sent and delivered so as to be closer to the concept of the ticks in other mobile instant messaging software

What do you think? Here is a screenshot of how it looks like with the changes:

kfiroo · 2016-09-08T16:06:32Z

@jeromegrosse Great! :)
I still have a few questions - I add them as inline comments

kfiroo · 2016-09-08T16:21:11Z

src/Bubble.js

@@ -52,6 +53,20 @@ export default class Bubble extends React.Component {
    return null;
  }

+  renderTicks() {
+    _renderTick = function(displayTick) {


Creating nested methods is very wasteful and not necasery in this case, so I think _renderTick should be a method of Bubble, or even as a stateless component.
Also looks like it is a global variable - did you forget the const?

kfiroo · 2016-09-08T16:29:18Z

@jeromegrosse I'm missing a way to override the renderTicks method, If the user wants to change the style or behaviour.
But it might be good enough for the first commit, @FaridSafi what do you think?

FaridSafi · 2016-09-08T16:30:35Z

I'll take a look this weekend

…ested function in renderTicks

jeromegrosse · 2016-09-09T08:29:15Z

@kfiroo
Thanks a lot for your feedbacks!

I performed the following modifications:

Deletion of the nested method _renderTicks
Added the possibility to override the way the ticks are rendered

However, I have a couple of questions:

Should I rather put the ticks on the right of the time?
Should I restrict the ticks to only the message sent by the user and never display the ticks for the received message?

kfiroo · 2016-09-09T15:35:48Z

src/Bubble.js

+  renderTicks() {
+    if (this.props.currentMessage.sent || this.props.currentMessage.received) {
+      const {currentMessage} = this.props;
+      if (this.props.renderTicks) {


This could go above the first if
The user might want to have different props for his sent / received props

kfiroo · 2016-09-09T15:40:02Z

@jeromegrosse Great work!
Regarding your questions, maybe @FaridSafi would have an opinion :)

I would say put the ticks on the right so the time won't move when the status changes
I think only sent messages should show ticks for now, if users will request we can easily add it to the others

jeromegrosse · 2016-09-10T20:39:10Z

@kfiroo @FaridSafi
I've just pushed the changes that you suggested:

The ticks are now display on the right-hand side of the time.
I fixed a styling problem that moved the time on the left of the message. It is now display on the right of the messages as it currently is in the master branch. Maybe now the ticks would be better on the left-hand side of the time?
There is a check that prevent the ticks from being displayed for the received messages.
I moved up the if statement as you suggested to allow an easier overriding of the function.
I modified the example so as to include the ticks feature.

kfiroo · 2016-09-10T21:33:29Z

src/Bubble.js

+        return this.props.renderTicks(currentMessage);
+    }
+
+    const {currentMessage} = this.props;


This line should be above the if statement - you are using currentMessage and it is not defined

Stupid overlook from my part. Nice catch!

kfiroo · 2016-09-10T21:35:00Z

@jeromegrosse Yeah, I would move them to the left now :) sorry!
That + the comment I left inline should have this feature closed I think.
@FaridSafi what do you think?

jeromegrosse · 2016-09-10T22:10:15Z

I've push the change with the constant declaration that is declared after its first use if the function is overridden.

Regarding the ticks on the left, I've encountered a problem: The Time component has a marginLeft set to 10 which, I believe, is not that easy to override. The best result I could get with the ticks on the left is shown in the screenshot below:

… for the sent messages

jeromegrosse · 2016-09-19T06:19:49Z

Have you got time to review it @kfiroo @FaridSafi ?

kfiroo · 2016-09-19T10:44:59Z

@jeromegrosse @FaridSafi looks good to me :)

…meter tickStyle to GiftedChat

jeromegrosse · 2016-10-05T08:07:59Z

@kfiroo @FaridSafi Just a little update to be able to customize how ticks are displayed (mainly overwriting the colour) by simple passing tickStyle to GiftedChat.

benoist · 2016-10-25T16:08:44Z

Any update on this?

kfiroo · 2016-12-18T13:42:55Z

@dgdavid @cooperka @scarmuega would love your opinion on this

cooperka · 2016-12-18T15:34:21Z

Code LGTM, haven't tested on a device though. Nice work.

dgdavid · 2016-12-19T19:04:41Z

The code also looks good to me, but I've some doubts about merging it directly or improve it a little before.

I'll try to explain myself. As @cooperka said, this is a gifted chat component and this feature should be out-of-the-box. We agree on this, I think. But, Why on the left-side? Why with plain text and not using icons? Why there are not a sending status to give feedback to the user? I now that all these questions are out of the component's scope because each application should implement its own logic for each particular behavior. However, we can do little changes to make this easier.

I would split Bubble into three parts: Header, Content, and Footer. Then use the renderTime and renderTick methods into renderBubbleFooter or similar. In my opinion, this way gives a more clean logic and allows to override the entire footer at once without bloating GiftedChat with a lot of renderXXX props, since to change the order of ticks and time you could do something such as

...
renderBoobleFooter={ function() {
  renderTime();
  renderTicks();
} }
...

or change the entire footer passing a completely different logic.

As a more detailed example, below you have some of code that I'm using currently in my project:

...

  messageFooter(timeProps) {
    let icon = null
    const { currentMessage, position } = timeProps
    const time = moment.tz(currentMessage.createdAt, timezone).format('LT')
    const text = <Text style={styles[position].text}>{ time }</Text>

    // TODO: improve the icon logic
    if (showStatusIcon(currentMessage.status)) {
      icon =
          <Icon
            name={statusIcons[currentMessage.status]}
            style={[styles[position].text, styles[position].icon]}
          />
    }

    return (
      <View style={styles[position].container}>
        { text }
        {
          currentMessage.status === 'FAILED'
            ? <TouchableOpacity onPress={() => this.onSend([currentMessage])}>{icon}</TouchableOpacity>
            : icon
        }
      </View>
    )
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <GiftedChat
          style={styles.mainContainer}
          messages={this.props.messages && this.props.messages.map(m => unflatten(m))}
          onSend={this.onSend}
          messageIdGenerator={uuid.v4}
          renderTime={this.messageFooter}
          user={{
            _id: this.props.currentUser.id,
          }}
        />
      </View>
    );
  }
}
...

I hope that you understand what I trying to say.

cooperka · 2016-12-19T20:04:41Z

@dgdavid: I agree with all points, though I think most of that can be held off for a future PR. I'm always in favor of merging early with an MVP and iterating from there. This PR is a fairly simple change that allows the possibility of showing send-receipts, and your suggestions seem to me like a larger structural change to the whole component (possibly breaking). I agree it should be done as you suggest, but perhaps in a separate PR after this one?

In terms of UX, WhatsApp (just as an example) uses icons on the right of the timestamp. Telegram is the same way. Below is a nice description of what each icon means on WhatsApp, showing how complex this could eventually be. Again, I don't think we need this now, but it's nice to see an example:

TL;DR: Let's ship this PR and tweak things later

dgdavid · 2016-12-19T21:47:23Z

@cooperka I also agree with you. I proposed to do it in this PR by the relation with the renderTime prop/method. But you're right, possibly it would be a big change across the whole component.

Thanks for the MVP link 😉

jeromegrosse · 2016-12-20T07:46:40Z

@dgdavid @cooperka
The ideas that you are proposing are definitely worth thinking about. When I first started this PR, the scope of what I was aiming for was way less than what you are suggesting. However, I'd be glad to continue this PR and/or help with a subsequent PR to help implement these new features.

EDIT: @cooperka this MVP link is indeed a good read

kfiroo · 2016-12-20T12:10:36Z

@jeromegrosse @cooperka @dgdavid Hey guys
So glad to see everybody's on board with improving this project!
I think this PR is pretty good on it's own, it provides a minimal functionality with minimal changes and as a "feature PR" it is pretty solid.

However, I would like to open a new issue(s?) for discussing the future of GiftedChat, where we should talk about:

Code style (eslint)
Technical issues (tests / GiftedChat API / renderXXX inconsistencies / etc)
Missing features (ticks / image zoom / others?)

Not so sure if we need a single issue or an issue for each topic but I guess we'll find out soon enough :)

jeromegrosse · 2017-01-04T13:14:09Z

So, can this PR be merged and later on have other issues improving the feature or are there any work to be done in this PR?

cooperka · 2017-01-12T16:53:38Z

Friendly ping @kfiroo

guns2410 · 2017-01-28T09:39:30Z

Please push to npm as well

Maxwell2022 · 2017-05-16T06:41:55Z

@jeromegrosse Please add docs as well

vvavepacket · 2017-12-25T20:08:34Z

Can we add docs of this in front page?

flashimxd · 2018-10-05T17:17:00Z

This feature is already implemented? I couldn't find in the documentation, and I really need that..

Thank you guys!

Faolain · 2018-12-08T04:07:42Z

Hey everyone any thoughts on the implementation here #644 for doing essentially the same thing but outside of the bubble? The only issue I found is that these two lines need to be commented out following that method

{this.renderMessageVideo()}
{this.renderUsername()}

otherwise it will error out with "TypeError: undefined is not a function(evaluating 'this.renderMessageVideo()')". I find it strange though since these both exist on the initial Bubble Component which they are extended from? Any suggestions as to which route to take, and if this latter approach works why these two methods might be failing as undefined?

Usamaliaquat123 · 2019-07-18T09:45:54Z

Any update about this how we can implement a tick when delever and seen message

kesha-antonov · 2019-07-18T09:50:39Z

Any update about this how we can implement a tick when delever and seen message

To message object add

            sent: true,
            received: true,
            pending: false,

Usamaliaquat123 · 2019-07-23T06:53:03Z

any update about seen messages and unseen message? and how to implement the isTyping option?

hindsricardo · 2019-08-08T22:37:55Z

?? soooo, is seen implemented or not? If so, where is the documentation?

mkhoussid · 2019-10-28T08:25:55Z

any update about seen messages and unseen message? and how to implement the isTyping option?

Re isTyping, use the onInputTextChanged prop.

Thanujabadabagni · 2020-01-11T06:56:09Z

hi am unable to bind messages to giftedchat messages using global list.Iin contructor i declared like global.messagesList=[];

<GiftedChat
messages={global.messagesList}
// onSend={messages => this.onSend(messages)}
user={{
_id:this.state.LoginId,
}}
/>
please suggest how to use global list to giftedchat messages...

rusakovic · 2020-03-31T16:50:20Z

Any update about this how we can implement a tick when delever and seen message

To message object add
            sent: true,
            received: true,
            pending: false,

Please, add it into the Readme file

nwdeer · 2023-10-06T20:09:18Z

So, is it possible to indicate that the message was not only delivered but also read?

Initial support tick messages

0100070

The message sent and delivered props have been removed from GiftedCha…

940af36

…t and are now read from the message state

kfiroo reviewed Sep 8, 2016
View reviewed changes

Added possibility to override the behaviour of renderTicks, deleted n…

2bfc151

…ested function in renderTicks

kfiroo reviewed Sep 9, 2016
View reviewed changes

kfiroo reviewed Sep 10, 2016
View reviewed changes

jeromegrosse added 2 commits September 10, 2016 22:31

Updated example and ticks on the right the time and ticks only appear…

06c9581

… for the sent messages

renderTick: Move the constant declaration to the top of the function

8bf17b4

renderTick: Possibility to change style of the ticks passing the para…

a7643a9

…meter tickStyle to GiftedChat

dgdavid mentioned this pull request Dec 20, 2016

How to create own Message Bubble #316

Closed

kfiroo merged commit 78e1701 into FaridSafi:master Jan 12, 2017

Maxwell2022 mentioned this pull request May 16, 2017

How to add status of message as 'Sent', 'Seen',... #401

Closed

jeromegrosse deleted the feature-tick-delivery-read branch March 8, 2018 11:31

Initial support tick messages #226

Initial support tick messages #226

Conversation

jeromegrosse commented Sep 7, 2016

kfiroo commented Sep 7, 2016

jeromegrosse commented Sep 7, 2016

jeromegrosse commented Sep 8, 2016 • edited Loading

kfiroo commented Sep 8, 2016

kfiroo Sep 8, 2016

Choose a reason for hiding this comment

kfiroo commented Sep 8, 2016

FaridSafi commented Sep 8, 2016

jeromegrosse commented Sep 9, 2016

kfiroo Sep 9, 2016

Choose a reason for hiding this comment

kfiroo commented Sep 9, 2016

jeromegrosse commented Sep 10, 2016

kfiroo Sep 10, 2016

Choose a reason for hiding this comment

jeromegrosse Sep 10, 2016

Choose a reason for hiding this comment

kfiroo commented Sep 10, 2016

jeromegrosse commented Sep 10, 2016

jeromegrosse commented Sep 19, 2016

kfiroo commented Sep 19, 2016

jeromegrosse commented Oct 5, 2016

benoist commented Oct 25, 2016

kfiroo commented Dec 18, 2016

cooperka commented Dec 18, 2016

dgdavid commented Dec 19, 2016

cooperka commented Dec 19, 2016 • edited Loading

dgdavid commented Dec 19, 2016 • edited Loading

jeromegrosse commented Dec 20, 2016 • edited Loading

kfiroo commented Dec 20, 2016

jeromegrosse commented Jan 4, 2017

cooperka commented Jan 12, 2017

guns2410 commented Jan 28, 2017

Maxwell2022 commented May 16, 2017 • edited Loading

vvavepacket commented Dec 25, 2017

flashimxd commented Oct 5, 2018

Faolain commented Dec 8, 2018 • edited Loading

Usamaliaquat123 commented Jul 18, 2019

kesha-antonov commented Jul 18, 2019

Usamaliaquat123 commented Jul 23, 2019

hindsricardo commented Aug 8, 2019

mkhoussid commented Oct 28, 2019 • edited Loading

Thanujabadabagni commented Jan 11, 2020

rusakovic commented Mar 31, 2020

nwdeer commented Oct 6, 2023

jeromegrosse commented Sep 8, 2016 •

edited

Loading

cooperka commented Dec 19, 2016 •

edited

Loading

dgdavid commented Dec 19, 2016 •

edited

Loading

jeromegrosse commented Dec 20, 2016 •

edited

Loading

Maxwell2022 commented May 16, 2017 •

edited

Loading

Faolain commented Dec 8, 2018 •

edited

Loading

mkhoussid commented Oct 28, 2019 •

edited

Loading