Screens > Splash Screen
Splash screen is the first UI that mobile app users see. Mostly it is used for fetching some data such as fonts before showing any UI and preventing flickering effect on the UI. 📱
Splash Screen on User Engagement
Implementing Splash screen on your app brings you the opportunity of engaging your users to your application with strong visuals from the moment that your application is opened.
Using Splash Screen
Splash screen comes with React Native Starter AI out of the box. The only change you need is to modify react-native-starter-mobile/assets/splash.png image by adding your app's logo or creating something totally custom depending on your needs!
You can edit the splash screen logic from react-native-starter-mobile/App.tsx file. The splash screen show/hide logic is pretty straightforward. In the default code, we are rendering the splash screen until 2 seconds pass after the initial opening. You can modify this logic depending on your application needs:
1useEffect(() => {
2 async function prepare() {
3 try {
4 // Artificially delay for two seconds to simulate a slow loading
5 // experience and showing screen. You can update this code depending on your needs.
6 await new Promise((resolve) => setTimeout(resolve, 2000));
7 } catch (e) {
8 console.warn(e);
9 } finally {
10 // Tell the application to render
11 setAppIsReady(true);
12 }
13 }
14
15 prepare();
16}, []);
17
18useEffect(() => {
19 if (appIsReady) {
20 SplashScreen.hideAsync().then(() => null);
21 }
22}, [appIsReady]);