Skip to content

FurkanKayaDev/furkankaya-react-native-splash-screen

Repository files navigation

furkankaya-react-native-splash-screen

NPM package version NPM package downloads License

Splash screen for React Native that hides automatically after the app loads, works on both iOS and Android

Content

Examples

iOS android

Installation

First step(Download):

Run

npm i furkankaya-react-native-splash-screen --save or yarn add furkankaya-react-native-splash-screen

Installation

Android:

  1. In your android/settings.gradle file, make the following additions:
include ':furkankaya-react-native-splash-screen'   
project(':furkankaya-react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/furkankaya-react-native-splash-screen/android')
  1. In your android/app/build.gradle file, add the :furkankaya-react-native-splash-screen project as a compile-time dependency:
...
dependencies {
    ...
    implementation project(':furkankaya-react-native-splash-screen')
}

Important Notice for React Native 0.73 and above

As of React Native 0.73, Kotlin has become the recommended language for Android development. This means that while the previous versions required changes to the MainApplication.java file, for React Native 0.73 and above, you need to make the necessary changes to the MainActivity.kt

react-native < 0.73

  1. Update the MainApplication.java file to use furkankaya-react-native-splash-screen via the following changes:
import org.devio.rn.splashscreen.SplashScreenReactPackage; 

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

react-native >= 0.73

  1. Update the MainActivity.kt file to use furkankaya-react-native-splash-screen via the following changes:
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate

import org.devio.rn.splashscreen.SplashScreen;  //here
import android.os.Bundle //here

class MainActivity : ReactActivity() {
 
  override fun getMainComponentName(): String = "splashScreenTest"

 
  override fun onCreate(savedInstanceState: Bundle?) { // this function 
      SplashScreen.show(this) 
      super.onCreate(savedInstanceState)
    }

  override fun createReactActivityDelegate(): ReactActivityDelegate =
      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
}

iOS:

  1. cd ios
  2. run pod install

Third step(Plugin Configuration):

iOS:

Update AppDelegate.mm with the following additions:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h> 

#import "RNSplashScreen.h" //here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"splashTest";

  self.initialProps = @{};
  
  bool didLaunchFinish = [super application:application didFinishLaunchingWithOptions:launchOptions]; //here

  [RNSplashScreen show]; //here
  
  return didLaunchFinish; //here
}

@end

Example

Before before

After after

Getting started

Import furkan-kaya-react-native-splash-screen in your JS file.

import SplashScreen from 'furkan-kaya-react-native-splash-screen

Android:

Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

<?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">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

iOS-LaunchScreen

Customize your splash screen via LaunchScreen.storyboard or LaunchScreen.xib

Tutorial Video:

splash-screen-iOS.mp4

Usage

Use like so:

import SplashScreen from 'furkankaya-react-native-splash-screen';

const App = () => {

  useEffect(() => {
      SplashScreen.hide();
  }, []);
  
  return (
    ...
};

API

Method Type Optional Description
show() function false Open splash screen (Native Method )
hide() function false Close splash screen

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published