• Stars
    star
    373
  • Rank 114,600 (Top 3 %)
  • Language
    Java
  • License
    MIT License
  • Created about 9 years ago
  • Updated about 7 years ago

Reviews

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

Repository Details

React Native SplashScreen (remobile)

A splashscreen for react-native, hide when application loaded

Installation

npm install @remobile/react-native-splashscreen --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.

  • In AppDelegate.m

...
#import "RCTSplashScreen.h" //<--- import
...
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"KitchenSink"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  [RCTSplashScreen show:rootView]; //<--- add show SplashScreen

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;

Installation (Android)

...
include ':react-native-splashscreen'
project(':react-native-splashscreen').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-splashscreen/android')
  • In android/app/build.gradle
...
dependencies {
    ...
    compile project(':react-native-splashscreen')
}
  • register module (in MainApplication.java)
......
import com.remobile.splashscreen.RCTSplashScreenPackage;  // <--- import

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RCTSplashScreenPackage(MainActivity.activity, true),            // <------ add here [the seconde params is translucent]
   ......
}
  • register module (in MainActivity.java)
public class MainActivity extends ReactActivity {
    public static Activity activity;           // <------ add here
    ......
    @Override
    protected String getMainComponentName() {
        activity = this;           // <------ add here
        ......
    }
}

Screencasts

gif

Usage

Example

'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
    AppRegistry,
    View,
    Text,
} = ReactNative;
var SplashScreen = require('@remobile/react-native-splashscreen');

var KitchenSink = React.createClass({
    componentDidMount: function() {
        SplashScreen.hide();
    },
    render() {
        return(
            <View>
                <Text>
                    fangyunjiang is a good developer!
                </Text>
            </View>
        );
    }
});

AppRegistry.registerComponent('KitchenSink', () => KitchenSink);

constants

  • translucent is translucent enable

methods

  • hide() hide SplashScreen

genarate splash with ffmpeg

  • you must install ffmpeg first
#!/bin/bash

src="${1-./img/splash.png}"

ffmpeg -i ${src} -s 640x1136 ../ios/CardC/splash/Default-568h@2x~iphone.png -y
ffmpeg -i ${src} -s 750x1334 ../ios/CardC/splash/Default-667h.png -y
ffmpeg -i ${src} -s 1242x2208 ../ios/CardC/splash/Default-736h.png -y
ffmpeg -i ${src} -s 640x960 ../ios/CardC/splash/Default@2x~iphone.png -y
ffmpeg -i ${src} -s 320x480 ../ios/CardC/splash/Default~iphone.png -y
ffmpeg -i ${src} -s 320x568 ../ios/CardC/splash/splash.png -y
mkdir -p ../android/app/src/main/res/drawable
cp ../ios/CardC/splash/splash.png ../android/app/src/main/res/drawable/splash.png

see detail use

the best way use SplashScreen in splash.js in example

More Repositories

1

react-native-toast

A android like toast for android and ios, android use native toast, ios use UIView+Toast
Objective-C
346
star
2

react-native-cache-image

JavaScript
161
star
3

react-native-refresh-infinite-listview

a pure js pull-down-refresh and pull-up-loadmore react-native listview
JavaScript
148
star
4

react-native-marquee-label

A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
Objective-C
116
star
5

react-native-file-transfer

A file-transfer for react-native, code come from cordova, support for android and ios
Java
85
star
6

react-native-update

Update js version and app version for ios and android
Java
79
star
7

react-native-qrcode-local-image

A local qrcode image parse for react-native
Java
55
star
8

react-native-cordova

A cordova plugin bridge for react-native
Java
50
star
9

react-native-image-animation

A pure js image animation like ios animationImages, support ios and android
JavaScript
48
star
10

react-native-zip

A unzip for react-native, code come from cordova, support for android and ios
C
46
star
11

react-native-action-sheet

JavaScript
38
star
12

react-native-template

fastly create new project for react-native
JavaScript
33
star
13

react-native-cocos2dx

A react-native wrapper cocos2d-html5
HTML
32
star
14

react-native-camera

A cordova camera for react-native, supprt for ios and android
Java
30
star
15

react-native-video

A video player for react-native, support hls
Java
26
star
16

react-native-marquee

A react-native marquee list write in js
JavaScript
26
star
17

react-native-datetime-picker

A datetime-picker for react-native support for android and ios
Java
24
star
18

react-native-mongoose

JavaScript
23
star
19

react-native-card-swiper

A react-native card swiper write in js
JavaScript
23
star
20

react-native-des

A des crypto for react-native
Objective-C
22
star
21

react-native-local-notifications

A cordova local-notifications for react-native, supprt for ios and android
Java
21
star
22

react-native-image-crop

A component for react-native crop image, such as edit user head
JavaScript
19
star
23

react-native-image-picker

A image picker for react-native, supprt for ios and android
Java
18
star
24

react-native-echarts

A react-native wrapper baidu echarts
HTML
16
star
25

react-native-battery-status

Objective-C
15
star
26

react-native-indexed-listview

A indexed listview in chat app like contacts list
JavaScript
15
star
27

react-native-dialogs

A dialogs for react-native, code come from cordova, support for android and ios
Java
15
star
28

react-native-smart-keyboard

A smart keyboard for ios base on IQKeyboardManager[android not needed]
Objective-C
14
star
29

react-native-sqlite

A cordova sqlite for react-native, supprt for ios and android
C
12
star
30

react-native-simple-button

A Simple react-native button
JavaScript
11
star
31

react-native-module

Dynamic loading third party react-native app/module for react-native
Java
11
star
32

react-native-qrcode

A pure js show string as qrcode in react-native View
JavaScript
9
star
33

atom-wx

微信小程序语法高亮(atom-wx)
9
star
34

react-native-contacts

Java
9
star
35

react-native-file

Java
8
star
36

react-native-kitchen-sink

kitchen-sink for react-native
JavaScript
8
star
37

react-native-call-state

phone call state detection module for react-native,include ios and android.
Java
7
star
38

react-native-card-list

A react-native card list write in js
JavaScript
6
star
39

react-native-clip-rect

A clip react for react-native, the shape is center highlight and around darkness
JavaScript
6
star
40

react-native-capture

Objective-C
6
star
41

react-native-audio

A audio player for react-native
Java
6
star
42

react-native-chat

react-native-chat
JavaScript
5
star
43

remobile

react mobile library
JavaScript
4
star
44

react-native-image-compress

react native base64 image compress, android and ios included.
Java
4
star
45

react-native-amap-geolocation

a react native amap geolocation moudle for android and ios
Objective-C
4
star
46

react-native-baidu-map

A baidu map for react-native, support for ios and android
Objective-C
4
star
47

react-native-call

A call for react-native
Java
4
star
48

wx-template

微信小程序模板工程
JavaScript
3
star
49

react-native-camera-roll-picker

A React Native component providing images selection from camera roll
JavaScript
3
star
50

react-native-maps-direction-uri

a map direction use uri mode for react native, ios map,qq map,baidu map,iosa map be supported.
Java
2
star
51

react-lifecycle

A react lifecycle for react and react-native
JavaScript
2
star
52

react-native-3d-panel

A 3d left menu like old version QQ(模仿老版本QQ的侧滑菜单)
JavaScript
2
star
53

react-native-cache-module

Cache dynamic loading third party react-native app/module for react-native
JavaScript
1
star
54

remobile-server

A React Content Management System Build With Redux, Relate, GraphQL, Mongoose And AntDesign
JavaScript
1
star
55

mdoc

Markdown doc web site
JavaScript
1
star
56

react-native-image-edit

react-native-image-edit
Java
1
star
57

remobile-ant

CSS
1
star