Android: Issue when displayed in Modal
pfeiffer opened this issue · comments
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>
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.
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>
Yeah, I tried that earlier, but with the same results (calculating for the status bar etc.)
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.
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 :-)
Good catch @pfeiffer!
Where is located res/values/styles.xml
exactly ?
Thanks! It's located at android/app/src/main/res/values/styles.xml
:-)
Thank you, I will add in readme
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
the same in the modal
@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 ...
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
did you tried to implement Facebook messenger gradient?