react-native-gifted-chat || Typing indicator || React native expo

Question

I am almost done with my chat application in React native with Firebase. At the end, typing indicator needs to be updated with the app. Since I searched I don't get any proper reference code to implement it.

Is there any Reference/Sample code for typing indicator in react-native-gifted-chat?

Thanks in Advance!

Answer 1

Referencing https://github.com/FaridSafi/react-native-gifted-chat/issues/1565 Comment by shamilovtim // fixed typo

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();

<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).

Hopefully this helps.