79642527

Date: 2025-05-28 15:27:27
Score: 0.5
Natty:
Report link

Building the answer @sahil-jaidka provided in the comments, you can fix this with KeyboardAvoidingView and setting isKeyboardInternallyHandled={false} on your GiftedChat component.

import {
  KeyboardAvoidingView,
  Platform,
  StatusBar,
  View
} from 'react-native';

import { useHeaderHeight } from '@react-navigation/elements';
import { GiftedChat } from 'react-native-gifted-chat';


export default function ChatScreen() {
    const headerHeight = useHeaderHeight();
    const keyboardVerticalOffset= Platform.OS === 'ios' ? headerHeight : headerHeight + StatusBar.currentHeight;

    return (
        <View style={styles.container}>
            <GiftedChat
                messagesContainerStyle={styles.messagesContainerStyle}
                messages={messages}
                ...
                isKeyboardInternallyHandled={false}
            />
            <KeyboardAvoidingView 
                behavior='padding'
                keyboardVerticalOffset={keyboardVerticalOffset} 
            />
        </View>
    );
}
Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • User mentioned (1): @sahil-jaidka
  • Low reputation (0.5):
Posted by: Tyler