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?

[fkiDev]

try this after doing patch suggested by niteshagrawal
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={ 60} style={{ flex: 1, }} >
<SafeAreaView style={{ flex: 1}}> <GiftedChat .... bottomOffset={1}/>

[niteshagrawal]

try this after doing patch suggested by niteshagrawal <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={ 60} style={{ flex: 1, }} > <SafeAreaView style={{ flex: 1}}> <GiftedChat .... bottomOffset={1}/>

Thank you for extending my answer @fkiDev.
but instead of using behaviour as “padding” only which is mainly usable in ios, you can use
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}

also @nikita10001 please try this and let me know if you still same issue

[melyux]

@niteshagrawal It works-ish, but the KeyboardAvoidingView stays around even when the keyboard is dismissed, on both Android and iOS.