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.

Library
npm
v7.3.2
4,302stars
MIT License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum.How we score it →
79/100Good
Development Activity76
Maintenance80
Community60
Maturity60
Momentum40

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation.How we score it →
72/100Good
Architecture78
Code Quality65
Innovation68
Learning Curve75

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 useHideAnimation hook 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-screen without 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.init in native AppDelegate/MainActivity code so the splash shows instantly, then call BootSplash.hide() once JS-side init finishes.
  • Expo-managed workflow - Replace expo-splash-screen with the bootsplash config plugin to get matching native and JS splash assets without an Expo eject.
  • Custom animated transitions - Use useHideAnimation with Animated or react-native-reanimated to fade or scale the splash out instead of hiding it abruptly.
  • Asset pipeline automation - Script the CLI’s generate command 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.

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers

Search