expo: Duplicate splash screens on Android 12 with expo-splash-screen; upgrade to new Splashscreen API required?

This issue is still happening 😞. @byCedric @brentvatne can we reopen this issue, please?

This problem is due to default splash screen in Android 12 To to resolve it you can only replace the default splash screen with a transparent screen Go to res/values/styles.xml and edit the file like this

` <style name="Theme.App.SplashScreen" parent="AppTheme">

<item name="android:windowBackground">@drawable/splashscreen</item>

<item name="android:windowIsTranslucent">true</item> // add this line

</style>`

If that’s what does the trick, this may be the right config plugin to accomplish it in the managed workflow:

const {
  AndroidConfig,
  withAndroidStyles,
} = require("@expo/config-plugins");

const withSplashWindowIsTranslucent = (config) => {
  return withAndroidStyles(config, async (config) => {
    config.modResults = await configureFullScreenDialog(config.modResults);
    return config;
  });
};

async function configureFullScreenDialog(
  styles
) {
  const splashScreen = styles.resources.style.find(
    style => style.$.name === "Theme.App.SplashScreen"
  );

  if (splashScreen) {
    splashScreen.item = splashScreen.item.filter(item => item.$.name !== "android:windowIsTranslucent");
    splashScreen.item.push(
      AndroidConfig.Resources.buildResourceItem({
        name: 'android:windowIsTranslucent',
        value: true
      })
    );
  }

  return styles;
}

module.exports = withSplashWindowIsTranslucent;

I’ll reiterate that this doesn’t seem like something that should be in userland, but rather part of the default splash screen configuration.

Still an issue.

I’m still facing the same issue even when I already added

 <item name="android:windowIsTranslucent">true</item>

Any solutions please. Thanks

It seems that this inconsistency in user experience for Android 12+ should either be addressed by the implementation of Expo splash config or documentation should be added that warns about the inconsistency. It’s jarring for the user to be presented with multiple branded splash screens.

In response to the suggestion of “creating a splashscreen that closely matches your adaptive icon”, I would note that the uncanniness of the experience goes up the closer the two branded screens are to matching: a big jump in appearance is distracting, but a subtle jump in appearance is unsettling.

don’t use react-native-bootsplash if you are using expo-updates. You will have a white splash after your splash screen. https://github.com/expo/expo/issues/16748

I was able to get it working with this in case @AliMohammad93’s comment wasn’t clear.