https://github.com/lumi-software/react-native-splash-screen
Splash screen for ios and android
https://github.com/lumi-software/react-native-splash-screen
react-native splash-screen
Last synced: about 2 months ago
JSON representation
Splash screen for ios and android
- Host: GitHub
- URL: https://github.com/lumi-software/react-native-splash-screen
- Owner: lumi-software
- License: mit
- Created: 2020-06-12T02:37:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-12T11:16:36.000Z (about 6 years ago)
- Last Synced: 2025-05-29T00:10:06.336Z (about 1 year ago)
- Topics: react-native, splash-screen
- Language: Java
- Homepage:
- Size: 5.08 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @nghinv/react-native-splash-screen
[](https://www.npmjs.com/package/@nghinv/react-native-splash-screen)
[](https://github.com/lumi-software/react-native-splash-screen/blob/master/LICENSE)
A smart splash screen for React Native apps, written in JS, oc and java for cross-platform support.
It works on iOS and Android.
## Preview
## Installation
* Use yarn
```
yarn add @nghinv/react-native-splash-screen
```
* Use npm
```
npm install @nghinv/react-native-splash-screen --save
```
## Installation (iOS)
- With RN >= 0.60 run `cd ios && pod install`
- With RN < 0.60 run `react-native link @nghinv/react-native-splash-screen`
* delete your project's LaunchScreen.xib
* Drag `SplashScreenResource` folder to your project *if you want change image, replace splash.png or add a image with your custom name*
* In AppDelegate.m
```c
...
#import "RCTSplashScreen.h" //import interface
...
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"ReactNativeComponents" initialProperties:nil launchOptions:launchOptions];
[RCTSplashScreen open:rootView withImageNamed:@"splash"]; // activate splashscreen, imagename from LaunchScreen.xib
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
```
## Installation (Android)
- Auto link with RN >= 0.60
- Run `react-native link @nghinv/react-native-splash-screen` with RN <0.60
* Add your own `drawable/splash.png` to `android/app/src/main/res/`, it is recommended to add `drawable-?dpi` folders that you need.
* drawable-hdpi
* drawable-mdpi
* drawable-xhdpi
* drawable-xxhdpi
* drawable-xxxhdpi
* in MainActivity.java
```java
...
import android.os.Bundle;
import com.reactnativecomponent.splashscreen.RCTSplashScreen; //import RCTSplashScreen
...
@Override
protected void onCreate(Bundle savedInstanceState) {
RCTSplashScreen.openSplashScreen(this); //open splashscreen
super.onCreate(savedInstanceState);
}
```
* In `android/app/**/styles.xml`
```xml
...
<!-- Customize your theme here. -->
<item name="android:windowIsTranslucent">true</item>
...
```
## Usage
```js
...
import SplashScreen from '@nghinv/react-native-splash-screen';
...
componentDidMount () {
SplashScreen.close({
animationType: SplashScreen.animationType.scale,
duration: 850,
delay: 500,
})
}
...
```
## Method
* close(animationType, duration, delay) close splash screen with custom animation
* animationType: determine the type of animation. enum(animationType.none, animationType.fade, animationType.scale)
* duration: determine the duration of animation
* delay: determine the delay of animation