react-native-gifted-chat icon indicating copy to clipboard operation
react-native-gifted-chat copied to clipboard

Message not scroll smoothly when Keyboard open and close

Open zeeshan-shabbir opened this issue 2 years ago • 18 comments

Issue Description

when keyboard open messages did not goes smoothly with keyboard rather take time .

Expected Results

Should move smoothly when keyboard open or close

Additional Information

  • React version: [17.0.2]
  • React Native version: [0.67.3]
  • react-native-gifted-chat version: [(https://github.com/FaridSafi/react-native-gifted-chat)]
  • Platform(s) (iOS, Android, or both?): [Android] ezgif com-gif-maker

zeeshan-shabbir avatar Apr 21 '22 07:04 zeeshan-shabbir

Same here

ghoudi01 avatar Apr 24 '22 23:04 ghoudi01

just build in release mode

fukemy avatar Apr 25 '22 02:04 fukemy

i tested in release mode, still problem with android, ios work good

fukemy avatar May 04 '22 04:05 fukemy

same here

arshnk-deloitte avatar May 04 '22 11:05 arshnk-deloitte

I tested with m1 mac simulator,build in release mode, and the layout took about ~500-800 milliseconds to resize after keyboard showed

fukemy avatar May 06 '22 07:05 fukemy

I tested with m1 mac simulator,build in release mode, and the layout took about ~500-800 milliseconds to resize after keyboard showed

What should we do?

zeeshan-shabbir avatar May 06 '22 10:05 zeeshan-shabbir

i see the log of metro and I see the screen re-render 4 times when keyboard show, i think better we need to use wix keyboard input

fukemy avatar Jul 25 '22 04:07 fukemy

test the demo with android simulator( not m1), it's took delay when press to show keyboard first time, but very smooth animation

fukemy avatar Jul 25 '22 04:07 fukemy

Any solutions?

VladislavTemriuk avatar Sep 27 '22 09:09 VladislavTemriuk

any solution gaesss?? i search everywhere for days but i dont find any solution

hotaryuzaki avatar Dec 09 '22 08:12 hotaryuzaki

@hotaryuzaki unfortunately, I also did not find solutions to this problem, so I had to abandon the use of this library, but it did not turn out to be a big problem, since all the components were already custom (text, images, time, send/read tick marks, etc.). So I just use FlatList and it works fine

VladislavTemriuk avatar Dec 10 '22 16:12 VladislavTemriuk

@hotaryuzaki unfortunately, I also did not find solutions to this problem, so I had to abandon the use of this library, but it did not turn out to be a big problem, since all the components were already custom (text, images, time, send/read tick marks, etc.). So I just use FlatList and it works fine

Yes maybe it is better to create the UI by ourselves.

I tried tricky fix with keyboard event but sadly android didn't have keyboardWillShow and keyboardWillHide. I think we can use keyboardWillHide to change windowSoftInputMode to adjustPan. But for temporary solution I create animation using scheduleLayoutAnimation in keyboardDidHide, it feels more convenient.

For more investigation, what I found this problem just occurred in Android 10 and below. Maybe it's android limitation I create temporary solution only for that versions.

And maybe next week I will create touch/scroll event outside the keyboard, for this I think I can set windowSoftInputMode to adjustPan then hide the keyboard by using keyboard.dismiss(). (I made backhandler event to do this trick but the event didn't called when keyboard is open)

hotaryuzaki avatar Dec 10 '22 17:12 hotaryuzaki

Any solutions? :(

danyzor avatar Jan 13 '23 20:01 danyzor

the solution is useAnimatedKeyboard

fukemy avatar May 08 '23 03:05 fukemy

@fukemy Could you be more specific?

BuqiLiao avatar Jul 14 '23 15:07 BuqiLiao

i just used reanimated for smooth animation. but flatlist reload everytime when scroll and it make performance problem

hummingbird1602 avatar Oct 09 '23 06:10 hummingbird1602

@BuqiLiao just take a look here: https://docs.swmansion.com/react-native-reanimated/docs/2.x/api/hooks/useAnimatedKeyboard/

fukemy avatar Oct 10 '23 02:10 fukemy

big issue for me too.

sirusbaladi avatar Mar 29 '24 22:03 sirusbaladi

Hi

Please try my PR

https://github.com/FaridSafi/react-native-gifted-chat/pull/2493

"react-native-gifted-chat": "kesha-antonov/react-native-gifted-chat#43625da0ae36d983c339c0d79ae900c8778f5241"

kesha-antonov avatar Apr 05 '24 20:04 kesha-antonov