v6 - Expo plugin, simpler setup

[zoontek]

Hi folks! 👋

This PR has been opened to track the development of the next major version: v6 ✨ Note that the React Conf app, that uses expo, is already using this beta (with useHideAnimation)!

Check this beauty 👀 :

https://github.com/zoontek/react-native-bootsplash/assets/1902323/25179bac-bb9b-4d9b-b1ca-28a4bd01d567

What's new

Expo plugin 🧩

In order to fix the duplicate splash screens issue on Android 12+ and beneficiate from this library animation capabilities, expo users can now uses react-native-bootsplash as a replacement for expo-splash-screen.

The bootsplash CLI is still in charge of the heavy stuff (images generation, license check if required…), but will now outputs all files in assets/bootsplash instead, when it detects that the project uses expo.

The expo plugin edits the android / ios config files (AndroidManifest.xml, MainActivity.{java,kt}, styles.xml, colors.xml, AppDelegate.m, Info.plist, YourApp.xcodeproj…) on prebuild and copy the generated assets in the correct directories.

Simpler setup ✨

In bare react-native projects, the generator is now able to edit your AndroidManifest.xml and styles.xml, removing those two steps from the setup process.

Other changes

• A new theme is available: Theme.BootSplash.TransparentStatus. It's an easier way to have a transparent status bar on android (with an opaque navigation bar)
• A ready option has been added to useHideAnimation in order to delay your animation, if you want to wait for something else than just layout rendering + images loading.
• --assets-output now has a default value, which is assets/bootsplash and will always be generated, as it's required for expo or the useHideAnimation hook (assets/bootsplash_logo.png become assets/bootsplash/logo.png, etc.)
• --html default is now public/index.html.
• All iOS assets are now suffixed with a short hash of the different splash screen items to prevent caching issues (before, it was only the logo).
• iOS implementation now always uses a colorset for background color, even if you choose not to support dark mode (before it was inlined in the .storyboard file in such case).

How to try it

Install the @next version:

$ npm install --save react-native-bootsplash@next
# --- or ---
$ yarn add react-native-bootsplash@next

With expo

1. Remove expo-splash-screen autolinking (in your package.json):

"expo": {
  "autolinking": {
    "exclude": [
      "expo-splash-screen"
    ]
  }
}

2. Edit your app.json:

{
  "expo": {
-   "splash": {
-     "image": "./assets/splash.png",
-     "resizeMode": "contain",
-     "backgroundColor": "#ffffff"
-   },
+   "plugins": [
+     ["react-native-bootsplash", { "assetsDir": "assets/bootsplash" }]
+   ]
  }
}

📌 The available plugins options are:

type PluginOptions = {
  assetsDir?: string; // optional, default is "assets/bootsplash"
  android?: {
    parentTheme?: "TransparentStatus" | "EdgeToEdge"; // optional, default is `undefined` (`Theme.BootSplash`)
    darkContentBarsStyle?: boolean; // optional, default is `undefined`
  };
};

3. Run the generation:

$ npx react-native generate-bootsplash …
# --- or ---
$ yarn react-native generate-bootsplash …

4. Finally, if you meet some, report any issue here 🐛

What's next?

• I need to write a (small) MIGRATION.md guide.
• Currently, the expo integration doesn't properly work with expo-updates. As the RCTRootView instance is recreated during app launch, a quick flicker is unfortunately visible. We are working with the expo team to fix this.
• Removing the splash property from app.json will be enough to unlink expo-splash-screen, without any additional config in your package.json. The expo team is working on this.

[!NOTE]
Don't forget that the CLI requires a license key for advanced options such as brand image or dark mode. 👉 You can buy it on Gumroad and uses the REACTCONF2024 discount code for -50% (expires the 1st of June).

You can also see this as a good way to support my work in the react native community, keep my motivation up, and keep this library alive and well-maintained. 🙌