Weird Splash Screen behaviour on Android

(Deprecated) Help: ExpoKit
1

I’m having trouble with the Splash Screen on Android after I ejected. When the app starts the image is kinda stretching down, then a fast white flash and it resizes itself, then when the splash screen ends, I get another white flash. I’m running out of ideas… I went to take a look at the native part, but with no success.

This is my drawable/splash_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/splashBackground"/>

    <item>
        <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
            android:src="@drawable/shell_launch_background_image"
            android:gravity="fill_horizontal|fill_vertical" />
    </item>


</layer-list>

The shell_launch_background_image is inside drawable-xxxhdpi.

My app.json is this (although I don’t if its relevant after I eject)

    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover"
    },

I’d love to know what’s going on, It seems like the app first starts with a Native Splash Screen, then Javascript starts to manage it. Any solution?

iOS works flawless.

here is what’s happening:

bugsplash
bugsplash488×710 1.94 MB

2

Not exactly a solution to your actual problem, but as a fellow ExpoKit sojourner who has also struggled with Android splash screens, I’d recommend staying away from "resizeMode": "cover" altogether. There’s a bug (that to my knowledge is still a bug) that causes this resizeMode to break apps on Galaxy S8/9 (maybe 10?) if the user chooses to hide the navbar: splash.resizeMode = 'cover' in app.json causes app not to adjust when Galaxy S8/9 hide navigation bar feature is used · Issue #2399 · expo/expo · GitHub. In other words, several of the most popular Android phones in the world will mess up your app if the user pokes a little too far to the left when trying to push the app switcher button :-/.

"resizeMode": "contain" doesn’t cause the issue. Depending on your splash size and the screen dimensions, there may be a sliver of background that doesn’t get covered by the image, which you can handle with a background color.

My splash_background.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/splashBackground"/>
<item><bitmap android:gravity="center" android:src="@drawable/shell_launch_background_image" /></item>
    

</layer-list>

It’s been a while, so I’m not entirely sure if that’s the full extent of what changes when changing resizeMode. If in doubt, one can always create a new project, set app.json, and eject to see exactly what changes. And, if you go this route, you can still keep using cover on the iOS side by just not changing anything over there, since, like you said, it doesn’t really matter what is in app.json after you eject.

3

I’m running into this exact same issue and my android:gravity in splash_background.xml is already set to “center”. Did you ever find a solution @baladapp?

4

I didn’t :confused: I ended up changing the splash image to one that this problem is less noticeable …

5

As per @mlight’s solution here, I was able to fix this with the following:
Setting SHOW_LOADING_VIEW_IN_SHELL_APP to false in android/app/src/main/java/host/exp/exponent/generated/AppConstants.java

1 Like