Android splashscreen flicker white and resize

Recently upgraded to expo33 and was forced to re-eject.
I’ve finally gotten everything working again, except my splashscreen on android is messed up.

You can see after the launch animation, the screen quickly fades to white, and then the splashscreen appears with a slightly different scaling, creating a very unprofessional first impression.

Using expo’s AppLoading or SplashScreen only takes effect after the bundle has finished downloading and root component is mounting, but this flicker is happening before the bundle begins downloading.

Any help would be greatly appreciated!

can you send me your app.json?

Thanks for the reply, @khushboo123. Sure, below is my app.json with all credentials *****'ed out, but seeing as I’m ejected I’ve also included my splash_background.xml.

app.json:

{
  "expo": {
    "version": "0.6.3",
    "name": "**********",
    "icon": "./app/assets/images/app/icon.png",
    "slug": "**********",
    "sdkVersion": "33.0.0",
    "orientation": "portrait",
    "primaryColor": "#1A7A65",
    "updates": {
      "fallbackToCacheTimeout": 4000,
      "enabled": true,
      "checkAutomatically": "ON_LOAD"
    },
    "assetBundlePatterns": [
      "./app/assets/images/app/splash-screen-photo.png",
      "./app/assets/images/logos/loading.gif",
      "./app/assets/images/logos/logo-green.png",
      "./app/assets/images/logos/logo-white-small.png",
      "./app/assets/images/logos/logo-green-text.png",
      "./app/assets/images/chat/*",
      "./app/assets/images/vices/*",
      "./app/assets/fonts/*",
      "./app/assets/sounds/*"
    ],
    "packagerOpts": {
      "assetExts": [
        "ttf",
        "wav",
        "png",
        "gif",
        "caf"
      ]
    },
    "ios": {
      "bundleIdentifier": "com.**********.**********",
      "publishBundlePath": "ios/**********/Supporting/shell-app.bundle",
      "publishManifestPath": "ios/**********/Supporting/shell-app-manifest.json"
    },
    "android": {
      "versionCode": 61,
      "package": "com.**********.**********",
      "icon": "./app/assets/images/app/icon-android.png",
      "permissions": [
        "CAMERA",
        "RECORD_AUDIO",
        "VIBRATE",
        "READ_INTERNAL_STORAGE",
        "WRITE_INTERNAL_STORAGE",
        "READ_EXTERNAL_STORAGE",
        "WRITE_EXTERNAL_STORAGE"
      ],
      "publishBundlePath": "android/app/src/main/assets/shell-app.bundle",
      "publishManifestPath": "android/app/src/main/assets/shell-app-manifest.json"
    },
    "splash": {
      "backgroundColor": "#1A7A65",
      "image": "./app/assets/images/app/splash-screen-logo.png",
      "resizeMode": "contain"
    },
    "notification": {
      "icon": "./app/assets/images/app/notification_icon.png",
      "color": "#1A7A65"
    },
    "isDetached": true,
    "detach": {
      "scheme": "**********",
      "iosExpoViewUrl": "https://s3.amazonaws.com/**********",
      "androidExpoViewUrl": "https://s3.amazonaws.com/**********"
    },
    "scheme": "**********",
    "hooks": {
      "postPublish": [
        {
          "file": "sentry-expo/upload-sourcemaps",
          "config": {
            "organization": "**********",
            "project": "**********",
            "authToken": "**********"
          }
        }
      ]
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

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 android:gravity="center" android:src="@drawable/shell_launch_background_image" /></item>

</layer-list>

Setting SHOW_LOADING_VIEW_IN_SHELL_APP to false in android/app/src/main/java/host/exp/exponent/generated/AppConstants.java worked for me.

Ref: https://docs.expo.io/versions/latest/workflow/configuration/#splash

1 Like

You’ve don it, @mlight! That was all it took.
Can’t thank you enough!!
:bowing_woman::bowing_woman::bowing_woman::bowing_woman::bowing_woman:

1 Like

Hi there! I’m facing a similar problem but in my case if I don’t add the shell_launch_background_image.png to all drawable directories the splash does not load at all. Expo SDK 33 when ejected creates de splash_background.xml without the <bitmap … > that points to the image which I fixed.

app.json

{
  "expo": {
    "name": "....",
    "slug": "....",
    "privacy": "public",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/imgs/icon.png",
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": ".......",
      "buildNumber": "1.0.0",
      "icon": "./assets/imgs/icon-ios.png",
      "splash": {
        "image": "./assets/imgs/splash.png",
        "resizeMode": "contain",
        "backgroundColor": "#ededed"
      },
      "publishBundlePath": "ios/...../Supporting/shell-app.bundle",
      "publishManifestPath": "ios/....../Supporting/shell-app-manifest.json"
    },
    "android": {
      "package": ".......",
      "versionCode": 100,
      "icon": "./assets/imgs/icon-android.png",
      "splash": {
        "image": "./assets/imgs/splash.png",
        "resizeMode": "contain",
        "backgroundColor": "#ededed"
      },
      "publishBundlePath": "android/app/src/main/assets/shell-app.bundle",
      "publishManifestPath": "android/app/src/main/assets/shell-app-manifest.json"
    },
    "primaryColor": "#ededed",
    "androidStatusBarColor": "#1dacd6",
    "androidStatusBar": {
      "barStyle": "light-content",
      "backgroundColor": "#1dacd6"
    },
    "isDetached": true,
    "detach": {
      "iosExpoViewUrl": "......",
      "androidExpoViewUrl": "....."
    },
    "scheme": "......."
  }
}

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 android:gravity="center" android:src="@drawable/shell_launch_background_image" /></item>    

</layer-list>

SHOW_LOADING_VIEW_IN_SHELL_APP = false;

Problem is that now the contain does not work! it “explodes” the image!
Any help will be very much appreciated

In case anyone gets into the same problem here’s how I solved it:
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;
  1. 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>