Weird Splash Screen behaviour on Android - ExpoKit

Environment

Expo CLI 2.15.4 environment info: System: OS: macOS 10.14.3 Shell: 5.3 - /bin/zsh Binaries: Node: 9.10.0 - ~/.nvm/versions/node/v9.10.0/bin/node Yarn: 1.15.2 - /usr/local/bin/yarn npm: 5.6.0 - ~/.nvm/versions/node/v9.10.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 10.2/10E125 - /usr/bin/xcodebuild npmPackages: expo: 32.0.5 => 32.0.5 react: 16.5.0 => 16.5.0 react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1 react-navigation: ^3.2.1 => 3.2.1 npmGlobalPackages: expo-cli: 2.15.4

The Issue

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:

[tattivitorino]

Ok. here’s how I solved it in case anyone gets into the same problem: Expo SDK 33 when you eject your app there are a few things you need to do in order to get your splash screen working on android

1. app.json I put the splash config into the android key so it won’t interfere with the IOS configs Check this https://docs.expo.io/versions/v33.0.0/guides/splash-screens/ for limitations on resizeMode

"android": { "package": “xxxxx”, "versionCode": 100, "icon": "./assets/imgs/icon-android.png", "splash": { "image": "./assets/imgs/splash.png", "resizeMode": "cover", "backgroundColor": "#ededed" }, "publishBundlePath": "android/app/src/main/assets/shell-app.bundle", "publishManifestPath": "android/app/src/main/assets/shell-app-manifest.json" }

1. splash_background.xml This file is created without the reference to the bitmap splash screen This is how I fixed it:

<?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/splash" /></item> </layer-list>

1. AppConstants.java public static boolean SHOW_LOADING_VIEW_IN_SHELL_APP = false;

2. Here https://romannurik.github.io/AndroidAssetStudio/index.html you can create 9 patch images for android (Simple NinePatch generator) that you can use for the splash screen I put each image resolution into their directory and rebuild the app on android studio You need to reference them here: <item><bitmap android:gravity="center" android:src="@drawable/splash" /></item>

[santiagomartinez]

Set SHOW_LOADING_VIEW_IN_SHELL_APP to false in AppConstants.java. I don’t know the reason, but the problem is similar to this: https://forums.expo.io/t/android-splashscreen-flicker-white-and-resize/24969/3