react-native-startup-splash

A simple and efficient React Native library for showing a splash during application startup

Table of Contents

• Installation
• • Android
• • iOS
• Usage
• Contributing
• License

Tested with the following versions of React-Native

• 0.76.5 ✅
• 0.80.0 ✅

Installation

npm install react-native-startup-splash --save

Getting started

Android

1. Define color resources in the android/app/src/main/res/values/colors.xml

<resources>
    <color name="startup_splash_background_color">#001F54</color>
</resources>

2. Create a theme called StartupSplashTheme in the android/app/src/main/res/values/styles.xml file

<resources>

    ...

    <style name="StartupSplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@color/startup_splash_background_color</item>
    </style>
</resources>

3. Add android:theme="@style/StartupSplashTheme" to the application tag in the AndroidManifest.xml

<application
      ...
      android:theme="@style/StartupSplashTheme"
      ...>

4. Add new file startup_splash.xml to the android/app/src/main/res/layout folder. Here's an example of what the startup_splash.xml content might look like

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/startup_splash_background_color">

    <TextView
        android:id="@+id/centered_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello, react-native-startup-splash!"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />

</RelativeLayout>

5. Override the onCreate function in the MainActivity.kt file

// ...
import android.os.Bundle // <--
import com.dzmitry.klokau.rn.startupsplash.StartupSplashManager // <--

class MainActivity : ReactActivity() {

  // ...

  override fun onCreate(savedInstanceState: Bundle?) {
      setTheme(R.style.AppTheme) // <--
      super.onCreate(savedInstanceState)
      StartupSplashManager.show(this) // <--
  }
}

iOS

1. Customize your storyboard file ios/<YourProjectName>/LaunchScreen.storyboard. example file

2. Add StartupSplashManager.showStartupSplash() just before the call to factory.startReactNative in the ios/<YourProjectName>/AppDelegate.swift

import StartupSplash // <--
...

class AppDelegate: UIResponder, UIApplicationDelegate {
  ...

  func application(...) -> Bool {
    ...

    StartupSplashManager.showStartupSplash() // <--

    factory.startReactNative..
    ...
  }
}

If you are using Objective-C++ AppDelegate file (AppDelegate.mm):

3. Create StartupSplashBridge.swift (accept the creation of bridging header file)

import Foundation
import StartupSplash

@objc public class StartupSplashBridge: NSObject {
    @objc public static func showStartupSplash() {
      StartupSplashManager.showStartupSplash()
    }
}

4. In your AppDelegate.mm file

//...

#import "YourProjectName-Swift.h"

//...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ...
  bool didLaunchFinish = [super application:application didFinishLaunchingWithOptions:launchOptions];

  NSLog(@"Show startup splash");
  [StartupSplashBridge showStartupSplash];

  return didLaunchFinish;
}

// ...

Usage

Use like so:

import { useEffect } from 'react';
import StartupSplash from 'react-native-startup-splash'; // <--

// ...

useEffect(() => {
  setTimeout(() => {
    StartupSplash.hide(); // <--
  }, 3000);
}, []);

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

This project is licensed under the MIT License