react-native-gifted-chat Input Keyboard Behaviour Like In Messenger

trafficstars

Issue Description

HI Devs When I press the inputbox the keyboard comes up but is not anchored to the rest of the chat component as the box moves up at different speeds or as separate components and sometimes the inputbox can get left behind then eventually catch up unlike on messager where box the messages, inputbox, and the keyboard move together and are tied to each other at same speeds without one staying behind.

I've tried to remove the **isKeyboardInternallyHandled** prop and wrap the input box around a KeyboardAvoidingView but the smooth animation has been removed and the problem also persists. I've tried to also local serve the app on a real device as well as build the app and test in testflight for ios but the problem is also seen.

I've attached the 2 youtube links or about 10second preview shorts videos of what I'm experiencing and what I'm trying to achieve below. May i please be assisted with the fixes

Experiecing -- > click https://youtube.com/shorts/A2gu3qOVFl8?feature=share What i want to archive --> click https://youtube.com/shorts/VJf69umvtcQ?feature=share

Steps to Reproduce / Code Snippets

return ( <Screen style={styles.container}> <Header dating={isDatingChat} account={userData} /> <GiftedChat scrollToBottom renderAvatar={renderAvatar} text={textMessage} onInputTextChanged={(text) => onInputTextChanged(text)} renderUsernameOnMessage lightboxProps={{ useNativeDriver: true }} messages={messages_processed} onSend={(messages) => onSend(messages)} user={{ _id: chat_acc_id, }} alwaysShowSend renderBubble={this.renderBubble} renderInputToolbar={renderInputToolbar} renderSend={renderSend} /> {Platform.OS === "android" && ( <KeyboardAvoidingView behavior="padding" /> )} </Screen> );

To reproduce Press the input box to reveal the keyboard

Expected Results

The keyboard should smoothly push the chat content up when opened and properly move whilst anchored together with the chat input as on messager and other messaging apps.

Additional Information

Expo: ~44.0.0
Nodejs version: 14.20.0
React version: 17.0.1
React Native version: 0.64.3
react-native-gifted-chat version: ^0.16.3
Platform(s) (iOS, Android, or both?): Both

Aug 21 '22 18:08 harmochiky

Hello @harmochiky, you can use the new React Hook by Reanimated useKeyboardAnimation() i've really liked this new feature, if you like it too, please star React Native Reanimated if you want, regards : )