How do I hide the Android Keyboard when using React-Native-Gifted-Chat?

Question

I am using React-Native-Gifted-Chat in my RN/Expo app. When a user goes to type a message, the message box should move up with the keyboard . This is the behavior I get on iOS, but with Android, it covers up the box.

I've tried enclosing a "KeyboardAvoidingView" around the "GiftedChat" prop, but it pushes the message box outside the screen.

I've also tried what is seen below, and while the keyboard doesn't go away, it still covers the message box when typing.

Below is my code:

<KeyboardAvoidingView>
    <SafeAreaView style = { styles.header }>
      <GiftedChat
        messages={}
        showAvatarForEveryMessage={true}
        onSend={messages => onSend(messages)}
        user={{
          _id:1,
        }}
      />
    </SafeAreaView>  
    </KeyboardAvoidingView>

This should help you: https://github.com/FaridSafi/react-native-gifted-chat/issues/435 — user3812411, Oct 21 '21 at 19:55

score 0 · Accepted Answer · answered Oct 22 '21 at 14:16

Okay, so the solution below worked for me, but it might have only worked because this screen is simply a "Chat Screen" meaning:

Someone goes to this screen for the purpose of sending and receiving messages, nothing else.

To solve this, I eliminated all of the "Views" and it gave me the behavior I wanted.

Below is the updated code:

return(
    <GiftedChat
        messages={}
        showAvatarForEveryMessage={true}
        onSend={messages => onSend(messages)}
        user={{
          _id:1,
        }}
    />
)

How do I hide the Android Keyboard when using React-Native-Gifted-Chat?

1 Answers1