Use Android 12 splashscreen API

[fiznool]

🚀 Feature

Android 12 has introduced a new SplashScreen API, with an AndroidX compat library for older versions. In a nutshell, this allows developers to hook up an animatable splash screen, and provides an API for dismissing the splash screen when the app is ready to be used.

If this library were to use the new SplashScreen API, apps using RNN could add splash screen support quite easily.

• Have you read the Contributing Guidelines on issues?

Motivation

From the Android docs:

If you do not migrate your app [to the new SplashScreen API], your app launch experience on Android 12 and higher will be either degraded or may have unintended results

Pitch

Changes to RNN codebase (mostly as per these Android docs):

• compileSdkVersion should be set to 31.
• 'androidx.core:core-splashscreen:1.0.0-alpha01' should be added as a dependency to build.gradle.
• New documentation should be added to guide developers on adding the necessary splash screen assets.
• The onCreate method in NavigationActivity.java should be updated as follows:
  • Install the splash screen: SplashScreen.installSplashScreen(this).

The splash screen will be automatically dismissed when the app draws its first frame, so providing this happens when the React Native side calls Navigation.setRoot, the splash screen will remain until this time.

Changes to documentation:

• Section added on how to customise the Android splash screen. By default, the splash screen will consist of the launcher icon, centered in the screen, with a white background. This can be customised according to the Android docs, briefly the following needs to be done:
  • Create a new theme in android/app/src/main/res/values/styles.xml which extends Theme.SplashScreen
  • Add the necessary details here to customise the icon, animation etc.
  • Set the postSplashScreenTheme value to the main AppTheme
  • Update AndroidManifest.xml so that the MainApplication theme is this new splash theme
• Section added on how to customise the exit animation of the splash screen, as per the Android docs

Are you willing to resolve this issue by submitting a Pull Request?

• ✅   Yes, I have the time, and I know how to start.
• ✖️   Yes, I have the time, but I don't know how to start. I would need guidance.
• ✖️   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.

[swabbass]

Looks cool, I think moving to 31 can have some breaking changes.

If we have a contributor who can add such a cool feature it would be nice, We will offer a helpful guide to make the process smoother and easier.

[haveneersrobin]

An effort was already made here, but was never finished. IMO this library could do with a section in the documentation about splash screens.

[zzorba]

Through trial and error I've managed to get an Android 12 splash screen to show up with the app and the latest RNN version (7.29.0) on both RN 68 and 69.

However, it doesn't remain on screen for the full loading time, i.e. when Navigation.setRoot being called has no impact on the splash screen going away -- it gets replaced nearly instantaneously (either with the JS loading header in debug or a black screen on release).
The new callbacks implemented by the android 12 splash for "KeepOnScreenCondition" have no impact on debug builds, but do seem to impact release correctly.

I'd be happy to document the process of using Android12 splash with RNN, but I think I'd need some pointers to figure out why it is not lasting for the full loading time.

[zzorba]

Okay, it looks like if we add a new boolean to the RootPresenter to record when setNavigationRoot is called, it is pretty easy to make the splash go away at that point.

I opened a PR to expose 'setRootCalled` (#7586). After that lands, implementing the splash screen on android can be done entirely in user-facing code (no further modification needed for RNN).

I'd be happy to do a writeup about how to implement it at that point.

[fiznool]

@zzorba I know this is from a few months back, but did you ever get round to writing up the steps needed to get the Android 12 splashscreens working with RNN? I understand that it relies on #7586, but a little patch-package magic could allow us to get this working sooner. Any help would be gratefully received! 🙂

[zzorba]

@fiznool Sure thing, so with the patch-package from that PR, here is an example of my MainActivity file that would load the splash screen. Besides this I think its just a matter of setting up the resources according to the Android guide. My project looks here if you want to see how those resources are placed https://github.com/zzorba/ArkhamCards.

One thing to note, some of the Samsung versions on Android 12 won't always show the splash screen when you would expect them to (because of Samsung's custom launcher, which results in users getting a blank screen instead). I think this is a Samsung/Google disagreement, and I believe they fixed it in Android 13. But you might consider only enabling new-splash for 13+ if you have a large number of Samsung issues (they might have fixed this, but they hadn't 6 months ago).

public class MainActivity extends NavigationActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    public LinearLayout createLegacySplashLayout() {
        LinearLayout splash = new LinearLayout(this);
        Drawable launch_screen_bitmap = ContextCompat.getDrawable(getApplicationContext(), R.drawable.splash);
        splash.setBackground(launch_screen_bitmap);
        return splash;
    }

    @Override protected void addDefaultSplashLayout() {
        if (Build.VERSION.SDK_INT >= 23) {
            final SplashScreen splashScreen = SplashScreen.installSplashScreen(this);
            splashScreen.setOnExitAnimationListener((splashScreenViewProvider) -> {
                final View splashScreenView = splashScreenViewProvider.getView();
                final ObjectAnimator fadeOut = ObjectAnimator.ofFloat(
                        splashScreenView,
                        View.ALPHA,
                        1f,
                        0f
                );
                final ObjectAnimator sizeUpX = ObjectAnimator.ofFloat(
                    splashScreenView,
                    View.SCALE_X,
                    1f,
                    1.2f
                );
                final ObjectAnimator sizeUpY = ObjectAnimator.ofFloat(
                        splashScreenView,
                        View.SCALE_Y,
                        1f,
                        1.2f
                );

                AnimatorSet animatorSet = new AnimatorSet();
                animatorSet.playTogether(fadeOut, sizeUpX, sizeUpY);
                animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
                animatorSet.setDuration(600L);

                // Call SplashScreenView.remove at the end of your custom animation.
                animatorSet.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        splashScreenViewProvider.remove();
                    }
                });

                // Run your animation.
                animatorSet.start();
            });
            splashScreen.setKeepOnScreenCondition(() -> !this.rootPresenter.setRootCalled());
            super.addDefaultSplashLayout();
        } else {
            setContentView(this.createLegacySplashLayout());
        }
    }
}

[fiznool]

Thank you so much! I'll give this a try 👍