Creating a memorable first impression is important for any mobile app, and the splash screen is often the very first thing users see when they launch your React Native app. A well-designed splash screen can set the tone for the user experience, introduce your brand identity, and even mask the initial loading phase of your app. In the world of React Native app development, there are several ways to implement a custom splash screen that not only looks great but also integrates seamlessly into your app's functionality.
This blog post will guide you through the process of creating a custom splash screen for your React Native app, providing step-by-step instructions and exploring different approaches to achieve the desired outcome. Whether you're a experienced React Native developer or just starting out, this guide will equip you with the knowledge to create a professional and engaging splash screen that enhances your mobile app development project.
There are 3 ways to create a custom splash screen for a React Native mobile application. Let’s explore the steps for each one-by-one.
1. Native Method
Android
Step 1 - Create a new XML layout file
Navigate to ** android/app/src/main/res/layout** and create a new XML file named launch_screen.xml. Add the following code to this file:-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash_screen">
</RelativeLayout>
In this code, @drawable/splash_screen refers to the image that you want to display on your splash screen. You need to add this image to your res/drawable folder.
Step 2 - Update your theme
Navigate to android/app/src/main/res/values/styles.xml and update your theme to use the new splash screen:
`
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@layout/launch_screen</item>
</style>
</resources>
`
Step 3 - Update your MainActivity
Finally, update your MainActivity.java file to display the splash screen:
`
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.launch_screen);
}
`
iOS
Step 1 - Update your LaunchScreen
Open your project in Xcode and navigate to LaunchScreen.storyboard. You can use the interface builder to design your splash screen.
Step 2 - Update your AppDelegate
Update your **AppDelegate.m ** file to display the splash screen:
`
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
UIViewController *vc = [sb instantiateInitialViewController];
rootView.loadingView = vc.view;
}
`
2. Using Local React Native Component
Android & iOS
Step 1 - Create a new React Native component for the splash screen
`
import React from 'react';
import { View, Image } from 'react-native';
const SplashScreen = () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Image source={require('./path-to-your-image.png')} />
// whatever you want to display. Eg. image, video, GIF thi line was missing
</View>
);
export default SplashScreen;
`
Step 2 - Display the splash screen until your app is ready
`
import React, { useState, useEffect } from 'react';
import SplashScreen from './SplashScreen';
import App from './App';
import { NavigationContainer } from "@react-navigation/native";
import { SafeAreaProvider } from "react-native-safe-area-context";
const Main = () => {
const [isNavigationIsReady, setNavigationIsReady] = useState(true);
useEffect(() => {
if (isNavigationIsReady) {
setTimeout(() => {
setShowSplash(false);
}, 3000);
}
}, []);
<SafeAreaProvider>
<NavigationContainer
onReady={() => setNavigationIsReady(true)} >
{showSplash ? <SplashScreen /> : <OtherStack/> }
</NavigationContainer>
</SafeAreaProvider>
};
export default Main;
`
3. Using third party package
We have so many popular NPM packages there like react-native-splash-screen, react-native-bootsplash etc. We can easily make a custom splash screen using these packages and below here i am guide you how to do that.
Step 1 - Install the package
Open your project in **Xcode ** and navigate to **LaunchScreen.storyboard. ** You can use the interface builder to design your splash screen.
Step 2 - Configure the package
Android
- Update your **MainActivity.java ** file:
`
import org.devio.rn.splashscreen.SplashScreen;
// ...
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);
super.onCreate(savedInstanceState);
}
`
iOS
- Update your ** AppDelegate.m **file
`
#import "RNSplashScreen.h"
// ...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[RNSplashScreen show];
// ...
}
`
Step 3 - Update splash screen according to Native steps
Step 4 - Handle splash screen in react native component
`
import React from 'react';
import { View, Text } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
useEffect(() => {
// do something if you want to do anything like api calls, etc
// after that just call below code to hide plash screen.
SplashScreen.hide();
}, [])
const App = () => {
return (
<View>
<Text>Welcome to My App!</Text>
</View>
);
}
`
Conclusion
By following the steps outlined in this blog post, you'll be well on your way to implementing a custom splash screen that elevates the user experience of your React Native app. Remember, a well-designed splash screen can play a significant role in establishing a positive brand image and setting the stage for a successful mobile app. With its combination of clear visuals, informative elements, and smooth integration, a custom splash screen can leave a lasting impression on your users and contribute to the overall success of your React Native app development project. Connect with a top react native app development company today to get a custom splash screen incorporated today in your app.