MIGRATION.md

Migration from v4

What's new

• Brand image support
• Dark mode support 🌚
• Web support 🌐
• A new hook, useHideAnimation, allowing you to easily animate all splash screen elements using Animated or react-native-reanimated. Create something nicer than a simple fade 🚀
• An improved CLI generator, now able to edit / output over 50 files (light and dark logos + light and dark brand images, config files…for all pixel densities!). Note that the new options require a license key 🔑

What else?

• AndroidX SplashScreen library has been replaced in order to solve a lot of known issues with it (#381, #418, #440, #456, etc). react-native-bootsplash now uses its own polyfill, compatible with Android 5+ (without any degraded mode).
• Your Android theme status / navigation bar styles are not overwritten anymore. Guides for transparent status bar and edge-to-edge layouts have been added in the brand new FAQ.
• Android generated assets has been migrated from mipmap-* directories to drawable-* ones.
• To avoid conflicts, Android provided theme / properties has been renamed Theme.BootSplash / Theme.BootSplash.EdgeToEdge, bootSplashBackground, bootSplashLogo, bootSplashBrand and postBootSplashTheme.
• The duration argument has been removed from fade() options.
• getVisibilityStatus() has been replaced with isVisible() (which returns a Promise<boolean>). The transitioning status does not exists anymore (when the splash screen is fading, it stays visible until complete disappearance).
• The CLI now output a bootsplash_manifest.json file to share image sizes + colors with the JS thread (used by useHideAnimation).
• --assets-path CLI option has been renamed --assets-output.
• React Native < 0.70 and iOS < 12.4 support has been dropped.
• ReScript bindings has been removed as I don't know how to write them. Feels free to open a PR to add it back.

How to update

👉 First, run the CLI to generate assets in updated locations!
It will also update your BootSplash.storyboard, the only change to perform on iOS.

Android

1. Delete all android/app/src/main/res/mipmap-*/bootsplash_logo.png files.

2. Edit your android/app/build.gradle file:

// …

dependencies {
  // The version of react-native is set by the React Native Gradle Plugin
  implementation("com.facebook.react:react-android")
- implementation("androidx.core:core-splashscreen:1.0.0")

3. Edit your values/styles.xml file:

- <!-- BootTheme should inherit from Theme.SplashScreen -->
+ <!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
- <style name="BootTheme" parent="Theme.SplashScreen">
+ <style name="BootTheme" parent="Theme.BootSplash">
-   <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
+   <item name="bootSplashBackground">@color/bootsplash_background</item>
-   <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
+   <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
-   <item name="postSplashScreenTheme">@style/AppTheme</item>
+   <item name="postBootSplashTheme">@style/AppTheme</item>
  </style>

4. Edit your MainActivity.java file:

  @Override
  protected void onCreate(Bundle savedInstanceState) {
-   RNBootSplash.init(this);
+   RNBootSplash.init(this, R.style.BootTheme);
    super.onCreate(savedInstanceState);
  }