Android: Issue when displayed in Modal

[pfeiffer]

There is an issue with the keyboard/height adjustments when displaying the component in a Modal.

It can be reproduced with the following simple render code:

<Image source={{ uri: 'http://cdn.pcwallart.com/images/dark-gradient-tumblr-wallpaper-1.jpg'}} style={{ flex: 1 }}>
  <GiftedChat />
</Image>

This renders the following:

When focusing the TextInput, the component correctly resizes and positiones the input bar:

However when the code above is wrapped in a <Modal> .. </Modal> the following happens when focusing the TextInput:

There are no issues on iOS.

[FaridSafi]

Can't test right now but I suggest to try to set a height to the Chat container

<Image style={{
  height: Dimensions.get('window').height,
}}>
  <GiftedChat />
</Image>

[pfeiffer]

Yeah, I tried that earlier, but with the same results (calculating for the status bar etc.)

[pfeiffer]

I suspect that the whole view is "pushed" up, ie. the modal has full device height and that the GiftedChat component is resized, but that the windowSoftInputMode=adjustResize doesn't apply to Modals on Android.

[pfeiffer]

Actually, digging through the react-native code I see that Modal on Android is implemented as Dialog.

The issue is that adjustResize isn't being applied to the Dialog that displays the modal. This can be fixed by adding the following to res/values/styles.xml:

<style name="Theme.FullScreenDialog">
     <item name="android:windowSoftInputMode">adjustResize</item>
</style>

Might be worth adding to the README :-)

[FaridSafi]

Good catch @pfeiffer!
Where is located res/values/styles.xml exactly ?

[pfeiffer]

Thanks! It's located at android/app/src/main/res/values/styles.xml :-)

[FaridSafi]

Thank you, I will add in readme

[RealAmissio]

I tried, but after modifying style.xml, it still doesn't work, but at 0.14 I can use it directly. When I upgrade to 0.27, the keyboard is blocked，please help me

[RealAmissio]

the same in the modal

[Fr33maan]

@RealAmissio I just had an issue by trying to put the chat component in a ScrollView.
I succeded in making it works without the modification, @pfeiffer do you think React Native team could have change it ? I still don't see the style applied for modal here but it works ...

[iswetak]

Hi @FaridSafi please help
How to configure gift-chat to send message when enter key is pressed?
is it possible to
when keypress enter = send message

[fukemy]

did you tried to implement Facebook messenger gradient?