Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-native-component/react-native-smart-splash-screen
A smart splash screen for React Native apps
https://github.com/react-native-component/react-native-smart-splash-screen
Last synced: 4 days ago
JSON representation
A smart splash screen for React Native apps
- Host: GitHub
- URL: https://github.com/react-native-component/react-native-smart-splash-screen
- Owner: react-native-component
- License: mit
- Created: 2016-08-15T06:13:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-04T16:19:32.000Z (about 1 year ago)
- Last Synced: 2024-08-14T11:37:30.684Z (4 months ago)
- Language: Java
- Size: 1.61 MB
- Stars: 490
- Watchers: 14
- Forks: 109
- Open Issues: 60
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-reactnative-ui - react-native-smart-splash-screen - native-smart-splash-screen.svg)| (Others)
- awesome-reactnative-ui - react-native-smart-splash-screen - native-smart-splash-screen.svg)| (Others)
README
# react-native-smart-splash-screen
[](https://www.npmjs.com/package/react-native-smart-splash-screen)
[](https://www.npmjs.com/package/react-native-smart-splash-screen)
[](https://www.npmjs.com/package/react-native-smart-splash-screen)
[](https://github.com/react-native-component/react-native-smart-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
![react-native-smart-splash-screen-ios-preview][1]
![react-native-smart-splash-screen-android-preview][2]
## Installation
```
npm install react-native-smart-splash-screen --save
```
## Notice
It can only be used greater-than-equal react-native 0.4.0 for ios, if you want to use the package less-than react-native 0.4.0, use `npm install [email protected] --save`
## Installation (iOS)
* Drag RCTSplashScreen.xcodeproj to your project on Xcode.
* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTSplashScreen.a from the Products folder inside the RCTSplashScreen.xcodeproj.
* Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive.
* In your project, Look for Header Search Paths and make sure it contains $(SRCROOT)/../node_modules/react-native-smart-splash-screen/ios/RCTSplashScreen/RCTSplashScreen
* 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
```
...
#import "RCTSplashScreen.h" //import interface
...
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"ReactNativeComponents"
initialProperties:nil
launchOptions:launchOptions];
//[RCTSplashScreen open:rootView];
[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)
* In `android/settings.gradle`
```
...
include ':react-native-smart-splashscreen'
project(':react-native-smart-splashscreen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-splash-screen/android')
```
* In `android/app/build.gradle`
```
...
dependencies {
...
// From node_modules
compile project(':react-native-smart-splashscreen')
}
```
* Add your own `drawable/splash.png` to `android/app/src/main/res/`, it is recommended to add `drawable-?dpi` folders that you need.
* in MainApplication.java
```
...
import com.reactnativecomponent.splashscreen.RCTSplashScreenPackage; //import package
...
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new RCTSplashScreenPackage() //register Module
);
}
...
```
* in MainActivity.java
```
...
import com.reactnativecomponent.splashscreen.RCTSplashScreen; //import RCTSplashScreen
...
@Override
protected void onCreate(Bundle savedInstanceState) {
RCTSplashScreen.openSplashScreen(this); //open splashscreen
//RCTSplashScreen.openSplashScreen(this, true, ImageView.ScaleType.FIT_XY); //open splashscreen fullscreen
super.onCreate(savedInstanceState);
}
```
* In `android/app/**/styles.xml`
```
...
<!-- Customize your theme here. -->
<item name="android:windowIsTranslucent">true</item>
...
```
## Full Demo
see [ReactNativeComponentDemos][0]
## Usage
```js
...
import SplashScreen from 'react-native-smart-splash-screen'
...
componentDidMount () {
//SplashScreen.close(SplashScreen.animationType.scale, 850, 500)
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
[0]: https://github.com/cyqresig/ReactNativeComponentDemos
[1]: http://cyqresig.github.io/img/react-native-smart-splash-screen-preview-ios-v2.3.0.gif
[2]: http://cyqresig.github.io/img/react-native-smart-splash-screen-preview-android-v2.3.0.gif