iOS keyboard covering textinput

[HaythamT95]

Issue Description

Only happens in development build on iOS using npx expo run:ios

Steps to Reproduce / Code Snippets

• opening keyboard
• typing

Additional information

• Nodejs version: v20.4.0
• React version: 18.2.0
• React Native version: ^0.74.5
• react-native-gifted-chat version: ^2.6.2
• Platform(s) (iOS, Android, or both?): iOS

[HaidarZ]

Same here, on iOS the input is covered and on android the input is over sized. It used to work normally on v2.4.0

[steavenb]

I inspected the GiftedChat.js file in node_modules/react-native-gifted-chat/lib/GiftedChat.js - line 238

I changed keyboardOffsetBottom.value = withTiming(isKeyboardMovingUp ? insets.bottom : 0, { duration: 400, }); to this keyboardOffsetBottom.value = withTiming(isKeyboardMovingUp ? 0 : 0, { duration: 400, }); .

We don't need to these changes if the screen is wrapped in a safeareaview itself but it messes up with the navigation since I use react-navigation.

I have used patch-package to fix this issue till someone releases an update.

[HaythamT95]

I fixed the problem by wrapping the GiftedChat component in SafeAreaView instead of View

<SafeAreaView>
     <GiftedChat .../>
</SafeAreaView>

But the xCode warnings still appear in the terminal

[niteshagrawal]

for anyone facing this keyboard issue, i created this patch .

react-native-gifted-chat+2.6.2.patch

OR

in node_modules/react-native-gifted-chat/lib/GiftedChat.js

update this line —> transform: [ {translateY: -keyboard.height.value + keyboardOffsetBottom.value }, ]

with this line —> transform: [ {translateY: 0}, ]

[nikita10001]

for anyone facing this keyboard issue, i created this patch .

react-native-gifted-chat+2.6.2.patch

OR

in node_modules/react-native-gifted-chat/lib/GiftedChat.js

update this line —> transform: [ {translateY: -keyboard.height.value + keyboardOffsetBottom.value }, ]

with this line —> transform: [ {translateY: 0}, ]

but the keyboard hides the content now, do you know how to fix this issue?