React Native dynamic launch page (advertisement page), support for Android and iOS.


npm install react-native-dynamic-splash --save


IOS Android

Rn installation


Automatic installation

react-native link react-native-dynamic-splash

Manual installation

  • android/settings.gradle File add code
include ':react-native-dynamic-splash'
project(':react-native-dynamic-splash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dynamic-splash/android')
  • android/app/build.gradle File add code
dependencies {
    compile project(':react-native-dynamic-splash')
  • android/app/src/main/java/com/example/ File add code
import com.taumu.rnDynamicSplash.DynamicSplashReactPackage;  // Import package

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;

        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new DynamicSplashReactPackage()  // Add here

        protected String getJSMainModuleName() {
            return "index";


Installing via CocoaPods

  1. Added in Podfile file pod 'RNDynamicSplash', :path => '../node_modules/react-native-dynamic-splash'
  2. Then run pod install

Manual installation

  1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  2. Go to node_modules ➜ react-native-dynamic-splash and add RNDynamicSplash.xcodeproj
  3. In XCode, in the project navigator, select your targets. Add libRNDynamicSplash.a to your project's Build Phases ➜ Link Binary With Libraries
  4. To fix 'RNDynamicSplash.h' file not found, you have to select your project/targets → Build Settings → Search Paths → Header Search Paths to add:
  • project $(SRCROOT)/../node_modules/react-native-dynamic-splash/ios recursive
  • targets $(inherited) recursive



  • File
import com.taumu.rnDynamicSplash.DynamicSplash;
import com.taumu.rnDynamicSplash.utils.Config;

public class MainActivity extends ReactActivity {
    protected void onCreate(Bundle savedInstanceState) {
        Config splashConfig = new Config();  // Splash configuration class
        // splashConfig.setImageUrl("http://custom/splash.png");
        // splashConfig.setAutoHideTime(2000);
        // splashConfig.setLayoutResID(R.layout.custom_splash_dynamic);
        // splashConfig.setThemeResId(;
        // splashConfig.setAutoDownload(false);
        // splashConfig.setSplashSavePath("/customSplashPath/");
        // splashConfig.setDynamicShow(false);
        new DynamicSplash(this, splashConfig);  // Add display splash here


  • AppDelegate.m File
#import "RNDynamicSplash.h"
#import "SplashConfig.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  [self.window makeKeyAndVisible];

  SplashConfig *config = [[SplashConfig alloc] init];  // Splash configuration class
  // config.imageUrl = @"http://custom/splash.png";
  config.autoHide = true;
  // config.autoHideTime = 1000;
  // config.dynamicShow = false;
  // config.autoDownload = false;
  // config.splashSavePath = @"custom";
  [[RNDynamicSplash alloc] initWithShow:rootView splashConfig:config];  // Add display splash here

  return YES;



type Field defaultValue setter description
String imageUrl "" setImageUrl Download picture address
String splashSavePath /splash/ setSplashSavePath Save image address
int themeResId(Android only) setThemeResId Use theme resource id
int layoutResId(Android only) R.layout.splash_dynamic setLayoutResId Use layout file resource id
boolean autoDownload true setAutoDownload Whether to download automatically
boolean dynamicShow true setDynamicShow Whether to display the downloaded picture
boolean autoHide false setAutoHide Whether to automatically hide
long autoHideTime 3000 setAutoHideTime Automatically hide time

Other instructions

  • The first time to start displaying the default image, the second time to start displaying the downloaded image again
  • Android Can use their own written resource files and topics, and the same name as the default configuration, otherwise call the set method to change the configuration, reference package resource file
  • Android doesn't set imageUrl to show resource image in layout file
  • ios does not set imageUrl to show picture of LaunchImage

Provide get request method

Can call the request to get the address of the picture

// mock json data
// {
//     splashInfo: {
//         imageUrl: "http://***.png"
//     }
// }
import com.taumu.rnDynamicSplash.utils.HttpUtils;

public static void getSplashImageUrl(String getApi) {
    HttpUtils.get(getApi, new HttpUtils.Callback() {
        public void onResponse(String jsonString) {
            try {
                JSONObject jsonObject = new JSONObject(jsonString);
                JSONObject valueObject = jsonObject.getJSONObject("splashInfo");
                String imageUrl = valueObject.getString("imageUrl");
                if (!TextUtils.isEmpty(imageUrl)) {
                    Config splashConfig = new Config();
                    new DynamicSplash(activity, splashConfig);
            } catch (JSONException e) {


name type description conflict
hide() function Js control hidden splash autoHide not set true
downloadSplash() function Js control download pictures autoDownload is set to false


  • [x] Android version splash
  • [x] Ios version splash
  • [ ] js incoming url as image download link
  • [ ] Configuration add skip button
  • [ ] Ios rewrite using swift