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 👀 :

react.conf.app.splash.screen.mp4

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. 🙌

[zoontek]

There's no need to run npx expo customize public/index.html if you specify --platforms=web anymore!

[exploitJ]

Hello I tried using v6 on my expo project and found a bug.
I'm using expo@51 (0.74.1) with new arch, prebuild setup
android shows it as intended. However, IOS shows blank screen.
I digged around prebuilt ios directory and found that expo plugin was injecting (< 0.74) config rather than (0.74+) config.

[zoontek]

I'm aware, as expo does not properly support customizeRootView with expo-updates

I'm waiting for their fix (it also require a react native update)

[zoontek]

@exploitJ The PR has been accepted, the fix should land soon: facebook/react-native#44775

[Mirthis]

Hello,
I've just followed the steps mentioned here but I'm not sure how to fully disable the expo splash screen so that it doesn't get invoked at all.
At the moment due to the unlinking step mentioned I get Cannot find native module 'ExpoSplashScreen' when running my app. I'm not directly importing the expo splash screen anywhere, so I assume this is called by default.
If I remove the unlinking, things work but It looks like I'm getting multiple splash screens.
This is using v50 of expo and v3 of expo-router.

[zoontek]

@Mirthis Are you running the latest beta? Should be 6.0.0-beta.9.
As you disable a module here, don't forget to run a prebuild with --clean.

[Mirthis]

@Mirthis Are you running the latest beta? Should be 6.0.0-beta.9. As you disable a module here, don't forget to run a prebuild with --clean.

@zoontek thanks for the quick response.
Yes I've just double checked the version and it's 6.0.0-beta.9. I have also run a prebuild with the --clean flag (I have not before seeing your message^^') but no difference.

As mentioned above If I don't remove expo-splash-screen from auto-linking the app works and I can see the splash screen created by bootsplash (icon I selected when running the asset generation, on a white background) and after that the default expo splash-screen (as I removed splash settings from my app.config.ts). That's why I think when removing expo-splash-screen I get the error mentioned, as this is still called somehow.
Is the expectation that by just removing expo-splash-screen from the build, this would not be used?

[zoontek]

@Mirthis Would you be able to test with Expo 51? Or to publish a repository with a reproduction (Expo 50).

[Mirthis]

@zoontek: From an initial test it looks like it works fine with expo 51.
Unfortunately the rest of my app doesn't work anymore as the upgrade broke something else :(

I need to spend some more time on this, I'll let you know if I find out something useful.

[zoontek]

@Mirthis I will have to set a requirement for Expo 51 anyway, as the customizeRootView fix will land in a RN 0.74 minor update (and so, an Expo 51 update)

[Mirthis]

@Mirthis I will have to set a requirement for Expo 51 anyway, as the customizeRootView fix will land in a RN 0.74 minor update (and so, an Expo 51 update)

@zoontek: thanks for your help.
I now have a working version on Expo 51.

[Titozzz]

Fyi I've just released 0.74.3 @zoontek

[fazomo]

Hi zoontek, I'm having trouble building EAS. what's the problem,

[fazomo]

"npx react-native generate-bootsplash" also performed correctly. What's the problem?

[zoontek]

@fazomo First one is an error with the sharp package that cannot be installed on your device for some reason. Second one is because the images has not been generated (because sharp is missing). Fix 1, it will fixes 2.

I highly recommend NOT TO generate the assets in the CI, tho. Generate them on your computer and commit them.

[enzomanuelmangano]

"npx react-native generate-bootsplash" also performed correctly. What's the problem?

@zoontek thanks for this amazing PR. I'm trying it (6.0.0-beta.9) with Expo 51.0.20 and it's working perfectly with local prebuild. However, while trying to build the app through EAS I'm getting the same error mentioned by @fazomo.
What's really strange is that the assets are actually committed in the git repo. Not sure if I'm missing something

[zoontek]

@enzomanuelmangano Did you set the "assetsDir" option in your app config?

[enzomanuelmangano]

@zoontek I'm using this config in the app.config.ts, copied from React Conf App 😅. I added the "assetsDir" although I think it's the default but unfortunately the issue is still there. What doesn't make sense to me is that locally the prebuild works perfectly and only fails while creating the build with EAS.

[
  "react-native-bootsplash",
  {
    assetsDir: "assets/bootsplash",
    android: {
      parentTheme: "TransparentStatus",
      darkContentBarsStyle: false
    }
  }
]

[zoontek]

@enzomanuelmangano I think there's an issue with workingPath in CI

[zoontek]

@fazomo @enzomanuelmangano Could you try latest beta (10)? The expo plugin now stop using workingPath, uses modRequest.projectRoot instead (don't forget to run expo prebuild --clean)

I also set a requirement for Expo 51.0.20 in order to use customizeRootView (which is finally available in expo!). So…this is probably the latest beta before stable release 👀

[enzomanuelmangano]

@fazomo @enzomanuelmangano Could you try latest beta (10)? The expo plugin now stop using workingPath, uses modRequest.projectRoot instead (don't forget to run expo prebuild --clean)

I also set a requirement for Expo 51.0.20 in order to use customizeRootView (which is finally available in expo!). So…this is probably the latest beta before stable release 👀

Sorry for my late reply. I've just checked again and it worked perfectly! Thanks a lot for your work 🙌

[zoontek]

@enzomanuelmangano And thanks for your sponsorship, it means a lot 🙏