Android theme causes Window not to resize when keyboard is open

Expo SDK
1

I’ve been trying to use Gifted Chat in my Expo app. I noticed that, when running on Android and tapping the text input on the chat control, the keyboard appears and covers the text input and part of the conversation- the chat UI doesn’t move to the top half of the screen as one would expect. This is despite Expo’s AndroidManifest.xml having the android:windowSoftInputMode="adjustResize" that is required to use the library with Android.

I created a test project to demonstrate the issue: GitHub - keith-kurak/expo-gifted-chat-example: Demo of Gifted Chat using Expo to see how it works in Android

Steps to reproduce:

  1. (assuming you’ve downloaded repo and installed dependencies, etc) Run the app in Expo on an Android device.
  2. Tap the text box that appears at the bottom of the screen.
  3. You’ll see the text box is covered.

I think I figured out what is wrong (as this doesn’t happen on a stock RN app), but not sure if what fixes it has side effects.

To “fix”:

  1. Detach from Expo
  2. In android/app/src/main/res/values/styles.xml, delete <item name="android:windowTranslucentStatus" tools:targetApi="19">true</item> under the Theme.Exponent.Light theme.
  3. Run the app in Android.
  4. The rest of the view will move up (or really, resize) when the text box is tapped and the keyboard opens.

Along with Gifted Chat, it seems like this would cause any other apps that rely on this soft keyboard resizing behavior to have problems. It’d be great to have the Theme.Exponent.Light theme fixed so it supports the adjustResize mode.

EDITED: for clarity- an errant apostrophe removed an entire code snippet.

1 Like
2

Hi there! Your explanation makes sense. At the moment I don’t think we have a plan for how to allow changes to the Android theme xml without detaching. @jesse do you have thoughts about this specific change?

3

Can you try specifying this config: https://docs.expo.io/versions/v18.0.0/guides/configuration.html#backgroundcolor-1?

That should remove the transparent status bar.

1 Like
4

@jesse yes, setting that color does make the keyboard work correctly. Good to know!

@ben I was more wondering if there was something that could be done with the default theme to make the adjustResize mode work. My simplistic fix demonstrates that the issue with the theme, but having the option for transparency is good. I know less than nothing about Android themes, but hope somebody who knows more can see if there’s a way to fix the current transparency option so it supports adjustResize.

Thanks for your help!

6

@jesse setting backgroundcolor is just remove the transparent status bar but the keyboard still not working. Any workaround to suggest?

EDIT: I have figured out why it doesn’t works. I have missing to include View in my component.

The component should be like this to make the keyboard works.

<Container>
        <View>
          <Content>
          </Content>
        </View>
</Container>

Hope this help.

2 Likes
7

Please see this fix and vote for it:
https://github.com/FaridSafi/react-native-gifted-chat/pull/587
cc @llamaluvr @rabin111