React-native-gifted-chat: Feature: Chat typing indicator out of the box

[shamilovtim]

Issue Description

I propose adding a chat typing indicator out of the box which uses an internal state variable isTyping to animate a chat bubble in while isTyping is true and to animate the chat bubble out while isTyping is false. I'll use vectors and react native animations. Should I have the presence of renderChatFooter disable this typing indicator?

If this is desirable and no one is working on it then I'll probably be taking a stab at it next week.

@xcarpentier

[xcarpentier]

Do you mean vector icon?

I think we don’t have to change actual renderChatFooter.

I think it may be interesting to have a new type of message like we already have SystemMessage. Or better this isTyping is currently a new sort of SystemMessage.

What do you think?

[shamilovtim]

@xcarpentier I was thinking just using vectors themselves to display the ". . ." That way the users can style the dots with whatever color they want.

I actually don't need a system message because in my system a system message is simply a message with user: { name: system, avatar: 'system.png'}. This is an extensible way to have a system message that requires nothing from the plugin's side than what it already offers.

Example of a system message with system avatar:

Regarding renderChatFooter it needs to be disabled if the user decides to use the out of the box typing indicator I provide, right?

[shamilovtim]

@xcarpentier Just got done. Should have a PR sometime next week if it looks fine.

[m4ttheweric]

I am seeing this new prop in the example project, is this working in the main branch? The Accessory bar button in the example setup is supposed to toggle the status if I am understanding correctly, but I am not seeing it. Also, the TS processor believes that "isTyping" is not a valid <GiftedChat /> prop. I am wondering if there's something still to be finished with this feature...

[xcarpentier]

Because it’s not yet published

[dparrelli]

Hey @xcarpentier - when do you think you'll get a chance to publish this?

[naishe]

I'd love to see this feature out of the box. Currently, at v0.13.0, isTyping={true} does not render any animation.

[akhan118]

Hey Peeps, is this this feature released yet ??

[shamilovtim]

Looks like not yet

[Arjanvanmaren]

Hmm it would be nice if this got released soon :)

[AndreasOhlsson]

Yes, please release this soon!

[shamilovtim]

You can use my fork for now:
https://github.com/shamilovtim/react-native-gifted-chat

You will need to compile the project:
cd node_modules/react-native-gifted-chat && yarn install && yarn build && yarn config:npm && rm -rf node_modules && cd ../.. && npx jetify

[akhan118]

@shamilovtim Thanks, do you know when it will be release ?

[shamilovtim]

It's not up to me unfortunately. I have no idea what's going on with the repo and no time to help maintain it.

[chichke]

Is it up ?

[xcarpentier]

yes

[Joshandrews43]

isTyping prop is not displaying any UI for me:

<GiftedChat
        messages={messages}
        text={currentMessage}
        onInputTextChanged={handleInputChange}
        onSend={(messages) => onSend(messages)}
        isTyping={true}
/>

[shamilovtim]

Can't use it that way!

Set isTyping to true dynamically after mount

[Joshandrews43]

@shamilovtim Using it as state also shows nothing, and I've double checked that it is set to true while the opponent is actually typing. Can you share an example that is working for you?

Additionally the documentation shows to use v0.2.x, but the highest version available is v0.16.3, is that a mistake?

[shamilovtim]

I'm using the latest version of the plugin. I simply have it set to a stateful variable coming from my Redux store. and my working example would simply be that. There's something you're doing wrong with how you manage state. I'd start out with make sure you're using this plugin inside of a function component because that's where I can confirm the typing indicator works. Not sure if it's broken in class components but those are legacy at this point so you might need to refactor.

import { useDispatch, useTrackedState } from 'reactive-react-redux';

const state = useTrackedState<iAppState>();

   <GiftedChat
          ...
          ...
          isTyping={state.isTyping}
/>

I would also make sure that your screen didn't mount with state already set to true. If you set it to true after it's already true your state hasn't changed and React isn't going to rerender a component. (e.g. your defaultValue should be false).

[Aryk]

Is there anyway to get the isTyping stuff under the renderChatFooter? Or maybe I should be adding the "seen" stuff a different way? I'm all ears.

[svm1]

Great stuff! Is there a way to customize the appearance of the typing indicator, just like how you can customize the message bubbles and text?

[shamilovtim]

You may supply your own typing indicator if you'd like by overriding one of the footer props (I forget which)