Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android: Issue when displayed in Modal #200

Closed
pfeiffer opened this issue Aug 16, 2016 · 11 comments
Closed

Android: Issue when displayed in Modal #200

pfeiffer opened this issue Aug 16, 2016 · 11 comments

Comments

@pfeiffer
Copy link

@pfeiffer pfeiffer commented Aug 16, 2016

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
Copy link
Owner

@FaridSafi FaridSafi commented Aug 16, 2016

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
Copy link
Author

@pfeiffer pfeiffer commented Aug 16, 2016

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

@pfeiffer
Copy link
Author

@pfeiffer pfeiffer commented Aug 16, 2016

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
Copy link
Author

@pfeiffer pfeiffer commented Aug 16, 2016

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
Copy link
Owner

@FaridSafi FaridSafi commented Aug 16, 2016

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

@pfeiffer
Copy link
Author

@pfeiffer pfeiffer commented Aug 16, 2016

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

@pfeiffer pfeiffer closed this Aug 16, 2016
@FaridSafi
Copy link
Owner

@FaridSafi FaridSafi commented Aug 16, 2016

Thank you, I will add in readme

@RealAmissio
Copy link

@RealAmissio RealAmissio commented Oct 11, 2017

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
Copy link

@RealAmissio RealAmissio commented Oct 11, 2017

the same in the modal

@Fr33maan
Copy link

@Fr33maan Fr33maan commented Oct 12, 2017

@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
Copy link

@iswetak iswetak commented Apr 28, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.