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 · 10 comments

Comments

Projects
None yet
4 participants
@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

This comment has been minimized.

Show comment
Hide comment
@FaridSafi

FaridSafi Aug 16, 2016

Owner

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

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

This comment has been minimized.

Show comment
Hide comment
@pfeiffer

pfeiffer Aug 16, 2016

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

pfeiffer commented Aug 16, 2016

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

@pfeiffer

This comment has been minimized.

Show comment
Hide comment
@pfeiffer

pfeiffer 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 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

This comment has been minimized.

Show comment
Hide comment
@pfeiffer

pfeiffer 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 :-)

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

This comment has been minimized.

Show comment
Hide comment
@FaridSafi

FaridSafi Aug 16, 2016

Owner

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

Owner

FaridSafi commented Aug 16, 2016

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

@pfeiffer

This comment has been minimized.

Show comment
Hide comment
@pfeiffer

pfeiffer Aug 16, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@FaridSafi

FaridSafi Aug 16, 2016

Owner

Thank you, I will add in readme

Owner

FaridSafi commented Aug 16, 2016

Thank you, I will add in readme

@RealAmissio

This comment has been minimized.

Show comment
Hide comment
@RealAmissio

RealAmissio 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 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

This comment has been minimized.

Show comment
Hide comment
@RealAmissio

RealAmissio Oct 11, 2017

the same in the modal

RealAmissio commented Oct 11, 2017

the same in the modal

@l1br3

This comment has been minimized.

Show comment
Hide comment
@l1br3

l1br3 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 ...

l1br3 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 ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment