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