This is a fork of this repo. Its purpose is to get the plugin working correctly on android, and also to fix the splash screen so it doesn't look distorted on less common screen sizes.
A splashscreen for react-native, hide when application loaded
npm install @remobile/react-native-splashscreen --save
-
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;
...
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
......
}
}
'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);
translucent
is translucent enable
hide()
hide SplashScreen
- 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