How to customise the Splash screen and is it possible to use other component other than image in the splash screen?

I’ve an Icon and a Text component in the splash screen. For now I’m just able to use the Icon that too is stretched. All I want is the Icon to be in the center of the screen and the text component to be in the bottom center. How to do it ?

Hey @wevak, let share my splash screen with you:

What is a Splash (in my knowledge):

Splash Screen, is a temp bitmap image (for fast load) that OS load before loading your app, so, this way the user do not see some blank screen when starts your app’s core/engine.

Is this splash that I’ve made this week I use 2 things, a png image:

-------------------------------------------------
|                    | L O |                    |
|                    | G O |                    |
-------------------------------------------------

and the exacily mach in svg.

At Native Splash I have the static png, and I create a file named Splash.tsx where I’ve made de same layout as splash. First of all, I’ve used SplashScreen.preventAutoHideAsync() in the “first line” of my module and SplashScreen.hideAsync() before my component mounts:

After that the users are in some “identical splash screen” that is my component, here I can do anything, my app graphics is loaded`, but, for doing the “explode animation”, before I use await do wait my Custom fonts load, fetch loged user data, fetch some caches for my Firebase BD queries, etc…

With you want, I can post my full splash code I some Snack!

Hope I’ve helped!

Update - Snacl Example:

2 Likes

That way an amazing example and explanation, thank you.

1 Like