• Stars
    star
    490
  • Rank 89,774 (Top 2 %)
  • Language
    Java
  • License
    MIT License
  • Created about 8 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A smart splash screen for React Native apps

react-native-smart-splash-screen

npm npm npm npm

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 react-native-smart-splash-screen-android-preview

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<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>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
...
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:windowIsTranslucent">true</item>
</style>
...

Full Demo

see ReactNativeComponentDemos

Usage

...
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

More Repositories

1

react-native-smart-barcode

A smart barcode scanner component for React Native app.
Java
310
star
2

react-native-smart-pull-to-refresh-listview

A smart pull-down-refresh and pull-up-loadmore react-native listview, for ios, written in pure JS, for android, written in JS and Java.
JavaScript
198
star
3

react-native-smart-amap

react-native 高德地图SDK 插件
Objective-C
176
star
4

react-native-smart-amap-location

react-native 高德地图-定位SDK 插件
Objective-C
110
star
5

react-native-smart-sortable-sudoku-grid

A smart sortable sudoku grid for React Native apps
JavaScript
107
star
6

react-native-smart-gesture-password

A smart gesture password locker for react-native apps
JavaScript
95
star
7

react-native-smart-parabola

A smart parabola for react-native apps
JavaScript
65
star
8

react-native-smart-image-loader

A smart asynchronous image downloader with cache for React Native apps
Objective-C
65
star
9

react-native-smart-badge

A smart badge for react-native apps
JavaScript
63
star
10

react-native-smart-corner-label

A smart corner label for React Native app
JavaScript
62
star
11

react-native-smart-alipay

react-native 支付宝SDK 插件
Objective-C
57
star
12

react-native-smart-loading-spinner-overlay

A smart loading spinner overlay for React Native apps.
JavaScript
53
star
13

react-native-smart-button

A smart button for react-native apps
JavaScript
46
star
14

react-native-smart-touch-id

React Native authentication with the native Touch ID popup.
Objective-C
36
star
15

react-native-smart-timer-enhance

A TimerEnhance for React Native app (es6) which replaced TimerMixin (es5) provides timer functions for executing code in the future that are safely cleaned up when the component unmounts
JavaScript
36
star
16

react-native-smart-toast

A android like toast for android and ios, written in JS.
JavaScript
31
star
17

react-native-smart-sudoku-grid

A smart sudoku grid layout for react-native apps
JavaScript
21
star
18

react-native-smart-security-text

A smart security text for React Native apps
JavaScript
15
star
19

react-native-smart-app-event-listener-enhance

An AppEventListenerEnhance for React Native app which provides addEventListener functions that are safely cleaned up when the component unmounts
JavaScript
7
star
20

react-native-smart-camera-roll-picker

A smart react native component providing images selection from camera roll
JavaScript
5
star
21

react-native-smart-refresh-listview

A high performance pull to refresh listview for React App.
JavaScript
3
star
22

react-native-smart-lazyload

1
star
23

react-native-smart-umeng

A umeng SDK for React Native App
Objective-C
1
star
24

react-native-native-Listview

JavaScript
1
star