Duplicate Splash Screens in Android 12.

[ponikar]

Summary

Hi there,

I was testing my application in Android 12. I saw two splash screens when the cold boot is happening. This is weird and expected because Android 12 comes with a Native splash screen.

It would be great if we hide either of the splash screens. App feels like taking time to load. Maybe due to both splash screens rendering subsequently.

What platform(s) does this occur on?

Android

Environment

expo-env-info 1.0.5 environment info: System: OS: macOS 13.0.1 Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.17.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.15.0 - /usr/local/bin/npm Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9014738 Xcode: 14.0/14A309 - /usr/bin/xcodebuild npmGlobalPackages: eas-cli: 2.6.0 expo-cli: 6.0.8

Minimal reproducible example

https://github.com/ponikar/expo-splashscreen-issue

[ponikar]

a temporary solution can be like this, avoid the Expo splash screen and use a native screen with help of react-native-bootsplash.

[expo-bot]

Hi there! It looks like your issue requires a minimal reproducible example, but it is invalid or absent. Please prepare such an example and share it in a new issue.

The best way to get attention to your issue is to provide a clean and easy way for a developer to reproduce the issue on their own machine. Please do not provide your entire project, or a project with more code than is necessary to reproduce the issue.

A side benefit of going through the process of narrowing down the minimal amount of code needed to reproduce the issue is that you may get lucky and discover that the bug is due to a mistake in your application code that you can quickly fix on your own.

Resources

• "How to create a Minimal, Reproducible Example"
• "How to narrow down the source of an error"

Common concerns

"I've only been able to reproduce it in private, proprietary code"

You may not have spent enough time narrowing down the root cause of the issue. Try out the techniques discussed in this manual debugging guide to learn how to isolate the problem from the rest of your codebase.

"I didn't have time to create one"

That's understandable, it can take some time to prepare. We ask that you hold off on filing an issue until you are able to fully complete the required fields in the issue template.

"You can reproduce it by yourself by creating a project and following these steps"

This is useful knowledge, but it's still valuable to have the resulting project that is produced from running the steps, where you have verified you can reproduce the issue.

[brentvatne]

not possible since it requires an expo setup

i'm not sure i understand what you mean by this. if you can provide a repo that we can clone and run on android 12 and clearly see this, it would be helpful!

[ponikar]

Hi, @brentvatne Sorry for not providing the repo link.

Here is minimal repo link

I have added the splash screen configuration in app.json file. I am expo rebuild.

if you run the android build you will see the native splash screen first and then the expo splash screen.

[peterlazar1993]

@brentvatne This is a duplicate of #16084, the issue was closed prematurely and it still exists.

cc: @ponikar

[ponikar]

It is going to be existed because from android 12 google provides native splash screen and I think expo uses activity in android to display it as splash screen and then hide it. Now we need to get rid of that activity.

PS: this is how the react-native-splash-screen is working under the hood.

[expo-bot]

Thank you for filing this issue! This comment acknowledges we believe this may be a bug and there’s enough information to investigate it. However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

[Daniel3711997]

any news ?

[t0ma5h]

Same issue for me too.

[ju-c]

Still an issue.

[brentvatne]

we plan on working on this soon, no update yet

[leotomas837]

@brentvatne Any news from it? The workaround suggested in #16084 does not work for managed workflows.

[bryanprimus]

is there a temporary workaround for managed workflow? @leotomas837

[ponikar]

@bryanltobing You can hide the default expo splash screen for now.

I was working with the expo plugin lately to use react-native-bootsplash library with the expo.

I did one POC and it was working fine. You can something this temporary plugin and use bootspalsh library with expo that use native android 12 splash screen.

here's the code link https://github.com/ponikar/react-native-bootsplash/tree/exp/expo-support/expo/plugin/src/android

[rodrigoAbril]

is there a temporary workaround for managed workflow? @leotomas837

there is a duplicate ticket with a temporary solution https://github.com/expo/expo/issues/16084#issuecomment-1119733035

[CyberCyclone]

is there a temporary workaround for managed workflow? @leotomas837

there is a duplicate ticket with a temporary solution #16084 (comment)

This doesn't resolve managed workflows. Managed workflows have no Android / iOS source code and this solution depends on those being generated.

[erwanlpfr]

Hello, this issue still exists on Android >= 12. It comes from the adaptive icon that overlaps the whole splashscreen.

I use the version 0.22.0.

This line is currently fixing this issue :

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

Is there any plan on it?

Thank you!

[gregfenton]

@CyberCyclone wrote:

Managed workflows have no Android / iOS source code and this solution depends on those being generated.

This statement is a bit misleading/incorrect.

With EAS you can leverage Config Plugins to modify the native projects when they get generated by the Build system. You don't need native code, just the ability to modify the native code....and that is precisely what Config Plugins are for.

Working with Config Plugins (i.e. using a JavaScript API to control modifications of the generated native projects) does require some level of understanding of native projects and their configuration, but using Config Plugins keeps you in "managed workflow" so that Expo is in charge of upgrading all your dependencies (Expo SDK, XCode, Android Studio, Java, etc...) as time goes on.

[daangelov]

Is there any new on this?

The temporary solution is working - no double splash screen is shown. But Google Play Console still shows a Warning about it in the Pre-launch report. I suppose it's because it makes it transparent instead of actually removing it.

[peterlazar1993]

In a bare configuraition you can already use https://github.com/zoontek/react-native-bootsplash

If you use expo prebuild then wait for https://twitter.com/zoontek/status/1772910709564690853

[ChronoByteCosmonaut]

It’s still an issue sadly 🙁

[ponikar]

React native boot splash will solve this issue in future.