Keyboard covers text input on android only

[jtweaver]

Issue Description

The keyboard covers the text input on android only. It doesn't look like the content moves at all. My configuration is essentially the default, and while I do use react-navigation, this page has neither tabs nor a top header.

I've been through all of the other issues on this repo concerning what seems to be the same issue here and tried all of them to no avail on android (iOS works fine, even when I do add a header or bottom tabs).

Steps to Reproduce / Code Snippets

<View style={{ flex: 1 }}>
<GiftedChat
          messages={messages}
          onSend={sendMessage}
          user={{
            _id: -1,
          }}
/>
</View>

Expected Results

The text input (and the existing messages) to slide up above the keyboard.

Additional Information

• Nodejs version: v16.13.0
• React version: 17.0.2
• React Native version: 0.68.2

https://user-images.githubusercontent.com/19966086/179897620-9637ad3f-b338-48db-8d23-d91409151836.mov

• react-native-gifted-chat version: 1.0.4
• Platform(s) (iOS, Android, or both?): Android
• TypeScript version: N/A

[huuthinh95]

You can try https://stackoverflow.com/questions/3295672/android-soft-keyboard-covers-edittext-field

[chunghn]

Hello, got the same issue, did you manage to find any solutions?

[PR-Here]

Hello, getting same issue in android device, did anyone find any solution?

[jtweaver]

The linked SO by @huuthinh95 was the solution:

android:windowSoftInputMode="adjustPan"

[PR-Here]

Hello, got the same issue, did you manage to find any solutions?

android:windowSoftInputMode="adjustPan" Just add this in your Manifest file.

[chunghn]

Hello, got the same issue, did you manage to find any solutions?

android:windowSoftInputMode="adjustPan" Just add this in your Manifest file.

Thanks! However I got another issue. The keyboard is overlapping the textinput. I have tried bottomOffset and minInputToolbarHeight but seems no luck.

[fukemy]

just calculate how diff from your input height with example input height, then give it to bottom offset

[fukemy]

for example, example input height is 44, your height is 50, so give bottomOffset = 6

[chunghn]

There is no effect of bottomOffset if windowSoftInputMode="adjustPan"

Turns out I just use the default value, 'resize', and figured out these value for the Offset (I'm using expo)

bottomOffset={Platform.OS === "ios" ? 10 : 0}
minInputToolbarHeight={Platform.OS == "android" ? 48 : 40}

[abdurrehmaan]

Hi, I m facing the same issue, but not in react native, I m testing my web app on different devices using browserstack, and on android devices, when i use to add comment, keyboard overlaps the text field, How can I fix this issue in react js

[Prasannsitani]

@abdurrehmaan Hey, have you got any leads on this issue?

I am also facing a similar issue in react-native-web, It would be really helpful if you got any solution regarding this.