npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-smooth-bootsplash

v4.5.2

Published

Display a bootsplash on your app starts. Hide it when you want.

Downloads

45

Readme

🚀 react-native-smooth-bootsplash

Additional features to react-native-bootsplash:

  • Dark Mode Support

Show a splash screen during app startup. Hide it when you are ready. For migration from the v3, check the MIGRATION.md guide.

mit licence npm version npm downloads platform - android platform - ios

Funding

This module is provided as is, I work on it in my free time.

If your company uses it in a production app, consider sponsoring this project 💰. You also can contact me for premium enterprise support, help with issues, prioritize bugfixes, feature requests, etc.

Support

| version | react-native version | | ------- | -------------------- | | 4.0.0+ | 0.65.0+ | | 3.0.0+ | 0.63.0+ |

Installation

$ npm install --save-dev react-native-smooth-bootsplash
# --- or ---
$ yarn add -D react-native-smooth-bootsplash

⚠️  Don't forget going into the ios directory to execute a pod install.

🆘 Manual linking

Because this package targets React Native 0.65.0+, you probably don't need to link it manually. But if you have a special case, follow these additional instructions:

iOS

Add this line to your ios/Podfile file, then run pod install.

target 'YourAwesomeProject' do
  # …
  pod 'RNBootSplash', :path => '../node_modules/react-native-smooth-bootsplash'
end

Android

  1. Add the following lines to android/settings.gradle:
include ':react-native-smooth-bootsplash'
project(':react-native-smooth-bootsplash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smooth-bootsplash/android')
  1. Add the implementation line to the dependencies in android/app/build.gradle:
dependencies {
  // ...
  implementation project(':react-native-smooth-bootsplash')
}
  1. Add the import and link the package in MainApplication.java:
import com.zoontek.rnbootsplash.RNBootSplashPackage; // <- add the RNBootSplashPackage import

public class MainApplication extends Application implements ReactApplication {

  // …

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // …
    packages.add(new RNBootSplashPackage());
    return packages;
  }

  // …
}

Setup

ℹ️ For react-native < 0.71 setup, follow the v4.4.0 README.md.

Assets generation

In order to speed up the setup, we provide a CLI to generate assets, create the Android Drawable XML file and the iOS Storyboard file automatically ✨.

$ npx react-native generate-bootsplash --help
# --- or ---
$ yarn react-native generate-bootsplash --help

The command can take multiple arguments:

yarn react-native generate-bootsplash <logoPath>

Generate a launch screen using an original logo file (PNG or SVG)

Options:
  --background-color <color>       color used as launch screen background (in hexadecimal format) (default: "#fff")
  --logo-width <width>             logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
  --assets-path [path]             path to your static assets directory (useful to require the logo file in JS)
  --flavor <flavor>                [android only] flavor build variant (outputs in an android resource directory other than "main")
  --dark-logo [path]               [optional] if specified, will be used for splashscreen that is shown when phone is in dark mode
  --dark-background-color <color>  [optional] color used as launch screen background when phone is in dark mode (in hexadecimal format) (default: "#000"). Only used if --dark-logo-path is set!
  -h, --help                  output usage information

Full command usage example

yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \
  --background-color=F5FCFF \
  --dark-logo=assets/bootsplash_logo_dark.png \
  --logo-width=100 \
  --assets-path=assets \
  --flavor=main

This tool relies on the naming conventions that are used in the /example project and will therefore create the following files:

# Only if --assets-path was specified
assets/bootsplash_logo.png
assets/bootsplash_logo@1,5x.png
assets/[email protected]
assets/[email protected]
assets/[email protected]
# if dark logo is specified
assets/bootsplash_logo_dark.png
assets/bootsplash_logo_dark@1,5x.png
assets/[email protected]
assets/[email protected]
assets/[email protected]

android/app/src/main/res/values/colors.xml (creation and addition)
android/app/src/main/res/values-night/colors.xml
android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png
android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png
android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png
android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png
android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png
# if dark logo is specified
android/app/src/main/res/mipmap-hdpi/bootsplash_logo_dark.png
android/app/src/main/res/mipmap-mdpi/bootsplash_logo_dark.png
android/app/src/main/res/mipmap-xhdpi/bootsplash_logo_dark.png
android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo_dark.png
android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo_dark.png


ios/YourProjectName/BootSplash.storyboard
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/[email protected]
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/[email protected]
# if dark logo is specified
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo_dark.png
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/[email protected]
ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/[email protected]

iOS

⚠️  Only .storyboard files are supported (Apple has deprecated other methods in April 2020).


Edit the ios/YourProjectName/AppDelegate.mm file:

#import "AppDelegate.h"
#import "RNBootSplash.h" // <- add the header import

// …

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"RNBootSplashExample";
  self.initialProps = @{};
  [super application:application didFinishLaunchingWithOptions:launchOptions];

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:self.window.rootViewController.view]; // <- initialization using the storyboard file name

  return YES;
}

Set the BootSplash.storyboard as launch screen file:

| Drag and drop the file | Create folder reference | Set as Launch Screen File | | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | | | |

Android

⚠️  On Android >= 12, the splash screen will not appear if you start your app from the terminal / Android Studio. To see it, kill your app and restart it in normal conditions (tap on your app icon in the app launcher).


  1. Edit your android/app/build.gradle file:
dependencies {
  // …

  implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
  implementation("androidx.core:core-splashscreen:1.0.0") // Add this line

  // …

⚠️  Don't forget going into the android directory to execute a ./gradlew clean && ./gradlew build (or perform a Gradle sync in Android Studio).

  1. Edit your android/app/src/main/res/values/styles.xml file:
<resources>

  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <!-- Your base theme customization -->
  </style>

  <!-- BootTheme should inherit from Theme.SplashScreen -->
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>

</resources>

If you want to have different splashscreen in Dark Mode, also create/edit the android/app/src/main/res/values-night/styles.xml:

<resources>
  <!-- BootTheme should inherit from Theme.SplashScreen -->
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo_dark</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>
</resources>
  1. Edit your android/app/src/main/AndroidManifest.xml file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.rnbootsplashexample">

  <!-- … -->

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/BootTheme"> <!-- Replace @style/AppTheme with @style/BootTheme -->
    <!-- … -->
  </application>
</manifest>
  1. Finally edit your android/app/src/main/java/com/yourprojectname/MainActivity.java file:
// …

// Add these required imports:
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  // …

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this); // <- initialize the splash screen
    super.onCreate(savedInstanceState); // or super.onCreate(null) with react-native-screens
  }
}

API

hide()

Method type

type hide = (config?: { fade?: boolean; duration?: number }) => Promise<void>;

Note: Only durations above 220ms are visually noticeable. Smaller values will be ignored and the default duration will be used.

Usage

import RNBootSplash from "react-native-smooth-bootsplash";

RNBootSplash.hide(); // immediate
RNBootSplash.hide({ fade: true }); // fade with 220ms default duration
RNBootSplash.hide({ fade: true, duration: 500 }); // fade with custom duration

getVisibilityStatus()

Method type

type VisibilityStatus = "visible" | "hidden" | "transitioning";
type getVisibilityStatus = () => Promise<VisibilityStatus>;

Usage

import RNBootSplash from "react-native-smooth-bootsplash";

RNBootSplash.getVisibilityStatus().then((status) => console.log(status));

Real world example

import React, { useEffect } from "react";
import { Text } from "react-native";
import RNBootSplash from "react-native-smooth-bootsplash";

function App() {
  useEffect(() => {
    const init = async () => {
      // …do multiple sync or async tasks
    };

    init().finally(async () => {
      await RNBootSplash.hide({ fade: true, duration: 500 });
      console.log("Bootsplash has been hidden successfully");
    });
  }, []);

  return <Text>My awesome app</Text>;
}

🤙 A more complex example is available in the /example folder.

With React Navigation

If you are using React Navigation, you can hide the splash screen once the navigation container and all children have finished mounting by using the onReady function.

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import RNBootSplash from "react-native-smooth-bootsplash";

function App() {
  return (
    <NavigationContainer onReady={() => RNBootSplash.hide()}>
      {/* content */}
    </NavigationContainer>
  );
}

With react-native-bars

In order to keep fully transparent status and navigation bars on Android once the splash screen is hidden (and control them), this library play nicely with react-native-bars. Check its README for more informations.

Testing with Jest

Testing code which uses this library requires some setup since we need to mock the native methods.

To add the mocks, create a file jest/setup.js (or any other file name) containing the following code:

jest.mock("react-native-smooth-bootsplash", () => {
  return {
    hide: jest.fn().mockResolvedValueOnce(),
    getVisibilityStatus: jest.fn().mockResolvedValue("hidden"),
  };
});

After that, we need to add the setup file in the jest config. You can add it under setupFiles option in your jest config file:

{
  "setupFiles": ["<rootDir>/jest/setup.js"]
}

🕵️‍♂️ Comparison with react-native-splash-screen

  • If react-native-splash-screen encourages you to display an image over your application, react-native-smooth-bootsplash way-to-go is to design your launch screen using platforms tools.
  • Hiding the launch screen is configurable: fade it out or hide it without any animation.