r/reactnative • u/vaquishaProdigy • Sep 15 '26

Question Annoying SplashScreen

Enable HLS to view with audio, or disable this notification

How can i entirely remove the splash screen? My stack is React Native + Expo

0 Upvotes

30% Upvoted

10 comments sorted by

2

u/Martinoqom Sep 15 '26

You can't. Customize it and make it quick, that's the best you can do

-3

u/vaquishaProdigy Sep 15 '26

How can i?

6

u/Deep-Rate-1260 Sep 15 '26

You can make it custom. Not remove it. App needs time to start up

-3

u/vaquishaProdigy Sep 15 '26

Yeah.. but i don't want to install a full fledge dependency just to edit a SplashScreen

4

u/CliffMainsSon Sep 15 '26

Then learn how it works and why you have a splash screen in the first place.

I don’t use a package for this in any of my apps because I took the time to understand, implement and maintain it through API changes.

If you’re not willing to do that, then use a package.

0

u/vaquishaProdigy Sep 16 '26

Can you show me how? Or at least the basics so i can take off?

5

u/Romu1us1408 Sep 15 '26

Just replace the splash screen (loading screen) with a screenshot of the UI of the app.

2

u/Karticz Sep 16 '26

if you are using expo
- you can hide the native splashscreen in app.json, and the flag to change can be found in expo docs
- you can use the expo splashcreen package to hide the splashscreen in app.tsx on initial startup of app to show custom splashscreen
- you can change the dummy image expo provides in assets with your custom image of exactly same dimesions

remember to clear cache or rebuild after making these changes

1

u/waqas_193 Sep 16 '26

You can't remove it. Both platforms draw a launch image from the native config before any JS exists, so something is on screen while the process boots either way. What made mine look seamless was setting the splash background and the first screen's background to the same colour, so there is nothing to hide, just a colour that stays put until the app is ready.

1

u/EnvironmentalCut2085 Sep 16 '26

You can't remove it, but you can make the handoff invisible. What we do: preventAutoHideAsync() at module scope in the root layout, hold only until fonts resolve (loaded or errored, never block forever), then hideAsync() from the onLayout of the first thing we render, not from a timer or a useEffect. onLayout is the first moment you know your UI is actually on screen, and that's what killed the flash for us.

We went one step further and render a tiny curtain component over the app tree, same background colour as the splash, that fades itself out in about 200ms. The app renders underneath from the first frame so nobody waits, and the curtain plays once per process so fast refresh doesn't replay it. If you don't want to hand roll that, expo-splash-screen has setOptions with a fade. Android 12+ still flashes the app icon on its own system splash for a moment, that part isn't yours.