React-native-gifted-chat: On iPhone, on every keystroke input toolbar jumps up and down

[joonhocho]

Issue Description

On iPhone, for every keystroke input toolbar jumps up and down.

screenshot

I investigated little bit and found that onKeyboardWillShow is called for every keystroke, and it keeps changing bottomOffset by this.setBottomOffset(this.safeAreaSupport(this.props.bottomOffset))

https://github.com/FaridSafi/react-native-gifted-chat/blob/5ba0c245d1a0e647c44a5c00d28a0497faadf6c0/src/GiftedChat.tsx#L622

https://github.com/FaridSafi/react-native-gifted-chat/blob/5ba0c245d1a0e647c44a5c00d28a0497faadf6c0/src/GiftedChat.tsx#L630

https://github.com/FaridSafi/react-native-gifted-chat/blob/036b347e30c1f1520f61ae6b79945fddec0b75b7/src/GiftedChat.tsx#L586

It seems code safeAreaSupport has changed in master (maybe fixes the issue??), but not reflected in the latest version.

Steps to Reproduce / Code Snippets

Type anything on iPhone.

Expected Results

No jumping

Additional Information

• Nodejs version: v13.13.0
• React version: v16.14.0
• React Native version: v0.63.3
• react-native-gifted-chat version: v0.16.3
• Platform(s) (iOS, Android, or both?): iOS
• TypeScript version: 4.0.5

[eleviven]

Same issue

[hungvu193]

Well, I think that is ios 14 problem and I found the solution here
https://github.com/FaridSafi/react-native-gifted-chat/issues/1930

[joonhocho]

@hungvu193 Thanks! I tried your solution with KeyboardAvoidingView, but it didn't work for me.

[eleviven]

I solved it by that way

bottomOffset={(Platform.OS === 'ios' && 33) || null}

[VDubber]

I solved it by that way

bottomOffset={(Platform.OS === 'ios' && 33) || null}

The above solution has issues on larger devices ie iPad pro (4th gen).
Changing it to:
bottomOffset={undefined}
appears to have a better, usable result, yet not perfect.

A real fix would be appreciated! Thanks

[aliasger-rashid]

@VDubber where should we add this ? bottomOffset={undefined}

[VDubber]

@VDubber where should we add this ? bottomOffset={undefined}

bottomOffset is a prop of GiftedChat so...

<GiftedChat bottomOffset={undefined} />

[aliasger-rashid]

I tried that but doesn't work for me. Thanks
@VDubber

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vfa-namnk]

Try this:

const insets = useSafeAreaInsets();

// GiftedChat props
bottomOffset={insets.bottom}

with useSafeAreaInsets from react-native-safe-area-context