iOS keyboard covering textinput

[HaythamT95]

trafficstars

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}/> </SafeAreaView> </KeyboardAvoidingView>

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

[theobouwman]

how do you determine the keyboardVerticalOffset value? I want the composer/texttoolbar to stick to the keyboard.

[arnekolja]

I solved it for me (tested on iOS only) with react-navigation and a bottom tab bar by adding:

import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const MyScreen = () => {
    const tabBarHeight = useBottomTabBarHeight();
    const safeAreaInsets = useSafeAreaInsets();

    return (
        <GiftedChat
            bottomOffset={tabBarHeight - safeAreaInsets.bottom}
        />
    );
};

export default MyScreen;

Before I had only tabBarHeight taken into consideration, but I had to remove the device's bottom corner height that's adding to the tab bar.

[kesha-antonov]

Should be fixed in master

Please check examples