react-native-bootsplash
Show a native splash screen the instant a React Native app starts, then hide it with a fade or a fully custom JS-driven animation.
Repository Health
Technical Analysis
react-native-bootsplash bridges a real native launch screen (an Android drawable/theme or an iOS storyboard) with your JS app code, so users see a branded screen the moment the app process starts instead of a blank white flash while the bundle loads. A small TurboModule-backed API (hide(), isVisible()) lets you dismiss it once your own startup work — auth checks, data prefetch, navigation mounting — is done.
Beyond the runtime bridge, the package ships a build-time CLI (npx react-native-bootsplash generate <logo>) and an Expo config plugin that generate every platform-specific asset — Android drawables/adaptive icons, an iOS storyboard, and web manifest/HTML — from a single source logo, including light/dark variants. A useHideAnimation hook exposes ready-to-use container/logo/brand props so teams that want a custom fade-out or scale animation (with Animated or Reanimated) can build one without touching native code.
What You Get
- A real native splash screen shown before the JS bundle executes, avoiding any blank-screen flash
- A
hide()/isVisible()JS API backed by a Codegen TurboModule, working on both old and new React Native architectures - A
useHideAnimationhook returning container/logo/brand props for building custom fade or animated transitions - A CLI (
react-native-bootsplash generate) that produces Android, iOS, and web splash assets from a single logo file - An Expo config plugin that replaces
expo-splash-screenwithout ejecting - Automatic light/dark mode background and logo/brand switching
- Edge-to-edge status/navigation bar awareness via
react-native-is-edge-to-edge
Common Use Cases
- Bare React Native app startup - Wire
RNBootSplash.initWithStoryboard/RNBootSplash.initin native AppDelegate/MainActivity code so the splash shows instantly, then callBootSplash.hide()once JS-side init finishes. - Expo-managed workflow - Replace
expo-splash-screenwith the bootsplash config plugin to get matching native and JS splash assets without an Expo eject. - Custom animated transitions - Use
useHideAnimationwithAnimatedorreact-native-reanimatedto fade or scale the splash out instead of hiding it abruptly. - Asset pipeline automation - Script the CLI’s
generatecommand into CI so a design update to one logo file regenerates every platform’s splash assets automatically.
Under The Hood
Architecture
The package splits cleanly into a runtime half and a build-time half that ship in the same npm package but never execute in the same process. The runtime half is src/index.ts, which calls a Codegen-defined TurboModule (src/specs/NativeRNBootSplash.ts, spec name RNBootSplashSpec) implemented natively per-architecture — separate android/src/oldarch and android/src/newarch Kotlin module classes alongside a shared RNBootSplashModuleImpl.kt/RNBootSplashView.kt, and an Objective-C++ (RNBootSplash.mm) implementation for iOS. The build-time half — cli.js plus src/extras/generate.ts, utils.ts, and expo.ts — is a Node-only asset generator invoked via npx or the Expo config-plugin system; it never touches the app’s JS bundle, only writes native resource files (Android drawables, an iOS storyboard, web HTML/manifest) ahead of a build.
Tech Stack
TypeScript throughout, built with react-native-builder-bob into commonjs/module/typescript triple output; Codegen generates the TurboModule spec consumed by Kotlin (Android) and Objective-C++ (iOS) native code with explicit old-architecture/new-architecture source-set separation; the CLI layers commander for argument parsing, sharp for image resizing, node-html-parser/xml-formatter for templating web and iOS asset files, and prettier to format generated output; react-native-is-edge-to-edge is read at runtime to coordinate splash container margins with the host app’s edge-to-edge status.
Code Quality
No dedicated unit test suite exists — no Jest config or *.test.* files were found in the repo — so correctness relies instead on strict TypeScript typechecking, oxlint with correctness/perf/restriction/suspicious categories set to error, Prettier formatting checks, and a GitHub Actions verify workflow gating pull requests; the bundled /example app serves as the primary manual/integration verification surface. Error handling in the JS API is minimal but deliberate — native hide-promise rejections are intentionally swallowed in useHideAnimation to avoid crashing on hide races. Naming and typing are consistent across the public API.
API Design
The public surface is small and ergonomic: hide(), isVisible(), and a single useHideAnimation hook that returns pre-computed style/prop objects rather than requiring consumers to read native constants themselves. Getting started requires almost no boilerplate — run the CLI once, require the generated manifest, and call hide() when ready. The unusual choice is gating the CLI’s brand/dark-mode asset generation behind an optional paid license key, layering an open-core monetization model onto an otherwise fully-featured MIT library.