Keyboard shows a white background before appearing

Expo SDK
1
  1. SDK Version: 39
  2. Platforms: Android & iOS
  3. Project type: Minimal Managed Workflow

Hello, I am working on my first Expo application. I have solved some errors that I have been having thanks to the documentation but I am having a somewhat annoying problem.

It turns out that the keyboard when it appears in a view that has data input, whether or not it is responsive, shows the following behavior: When appears Keyboard, white view appears - Album on Imgur

As I have investigated, it may be because root view background color could be causing this. The problem is that all the possible solutions I found require manipulating code on the specific platforms (which in my case would be Android and iOS) but I don’t have such projects. I’m also not looking for eject them so I wanted to know if there is any solution for this.

I have found in an expo package the registerRootComponent () but to be honest I don’t know if I can actually use this to achieve the fix as I am also using React Navigation v5.

Here is a Snack (I suggest you use an android device as the problem could be more noticeable):

also I tried this:

App.json

{
  "expo": {
    "name": "appName",
    "slug": "appName",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "backgroundColor": "#000000",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#000000"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": false
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "androidStatusBar": {
      "barStyle": "light-content",
      "backgroundColor": "#000000"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}
2

Hey @andresquesadacascant,

I’m not able to reproduce this behavior on iOS. As for Android, this is a known issue with React Native that I believe is being handled upstream. What that means for you now is that you’ll have to wait for that fix to land in a future React Native version and we release a new SDK version of Expo that relies on said RN version.

If this is a blocker for your app, you could switch to the Bare workflow which as you mentioned will give you access to the native directories thus allowing you to tinker with the code and attempt to solve the root issue yourself.

Cheers,
Adam

3

Sorry, I just realized that this problem does not occur on iOS. Surely it persists at least for now in managed workflow. I have followed the content on GitHub very closely as there are situations similar (not to say the same). Also thank you for giving me some information that I needed since I did not know what this problem had been and I was feeling somewhat frustrated since at least on Android it is extremely visible. I really liked Expo and I hope it keeps improving!

I take this opportunity to ask if you know any release date for the new version to be aware

4

Here is the issue you can follow: Splash screen on Android visible when keyboard resizes app or orientation changes · Issue #10435 · expo/expo · GitHub

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.