💻 Take your coding skills to the next level with "500+ Ultimate ChatGPT Prompts For Developers" – the game-changer every developer needs, click here to order now.
Splash screen with React Native
A splash screen is the first thing user sees after opening the app, and it usually shows an app logo with optional animations. This post covers setup for Android devices and iOS setup will be covered additionally.
Prerequisites
installed Android studio
bootstrapped app
react-native-splash-screen
package installed
npx react-native init SplashScreenAppcd SplashScreenAppnpm i react-native-splash-screen
JavaScript setup
Hide the splash screen when the app is ready
// App.js// ...useEffect(() => SplashScreen.hide(), []);// ...
Native setup
Extending MainActivity class with onCreate method
// android/app/src/main/java/com/splashscreenapp/MainActivity.javaimport org.devio.rn.splashscreen.SplashScreen;import android.os.Bundle;// ...@Overrideprotected void onCreate(Bundle savedInstanceState) {SplashScreen.show(this, R.style.SplashTheme, true);super.onCreate(savedInstanceState);}// ...
Adding splash screen activity with the theme into the Android manifest
file: android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.splashscreenapp"><uses-permission android:name="android.permission.INTERNET" /><applicationandroid:name=".MainApplication"android:label="@string/app_name"android:icon="@mipmap/ic_launcher"android:roundIcon="@mipmap/ic_launcher_round"android:allowBackup="false"android:theme="@style/AppTheme"><activityandroid:name=".SplashActivity"android:theme="@style/SplashTheme"android:label="@string/app_name"android:exported="true"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activityandroid:name=".MainActivity"android:label="@string/app_name"android:configChanges="keyboard|keyboardHidden|orientation|screenSize"android:windowSoftInputMode="adjustResize"android:exported="true"/><activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /></application></manifest>
Implementing SplashActivity class
// android/app/src/main/java/SplashActivity.javapackage com.splashscreenapp;import android.content.Intent;import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;public class SplashActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);Intent intent = new Intent(this, MainActivity.class);startActivity(intent);finish();}}
Themes setup
file: android/app/src/main/res/values/styles.xml
<resources><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><item name="android:statusBarColor">@color/theme_bg</item><item name="android:windowBackground">@drawable/background_splash</item></style><style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar"><item name="android:background">@drawable/background_splash</item><item name="android:windowDisablePreview">true</item><item name="colorPrimaryDark">@color/theme_bg</item></style></resources>
Colors setup
file: android/app/src/main/res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?><resources><color name="theme_bg">#2F3C7E</color></resources>
Adding config for background splash drawable
file: android/app/src/main/res/drawable/background_splash.xml
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"><item android:drawable="@color/theme_bg"/><itemandroid:width="300dp"android:height="300dp"android:drawable="@mipmap/splash_icon"android:gravity="center" /></layer-list>
Adding layout
file: android/app/src/main/res/layout/launch_screen.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/background_splash"android:orientation="vertical"></LinearLayout>
Images for splash screen
App Icon Generator can be used for generating the images. Open the Image Sets tab, choose 4X design base size, insert an image and generate corresponding images for the splash screen. Downloaded images should be stored in mipmap (android/app/src/main/res/mipmap-*hdpi/splash_icon.png
) folders.
Demo
Run the following commands
npx react-native startnpx react-native run-android