{"id":13475309,"url":"https://github.com/zoontek/react-native-bootsplash","last_synced_at":"2026-01-25T02:08:49.589Z","repository":{"id":37759459,"uuid":"194844417","full_name":"zoontek/react-native-bootsplash","owner":"zoontek","description":"🚀 Show a splash screen during app startup. Hide it when you are ready.","archived":false,"fork":false,"pushed_at":"2025-04-28T14:33:29.000Z","size":23368,"stargazers_count":3906,"open_issues_count":8,"forks_count":267,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-07T10:52:53.910Z","etag":null,"topics":["bootsplash","react","react-native","splash-screen","splashscreen"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoontek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["zoontek"]}},"created_at":"2019-07-02T10:45:52.000Z","updated_at":"2025-05-07T07:00:32.000Z","dependencies_parsed_at":"2022-08-08T21:31:14.882Z","dependency_job_id":"b2686369-7238-49a4-a172-2941476cd2f1","html_url":"https://github.com/zoontek/react-native-bootsplash","commit_stats":{"total_commits":362,"total_committers":42,"mean_commits":8.619047619047619,"dds":"0.22651933701657456","last_synced_commit":"4cc39db1ed57438470e86ab8a737826cf5d3354b"},"previous_names":[],"tags_count":114,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-bootsplash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-bootsplash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-bootsplash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoontek%2Freact-native-bootsplash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoontek","download_url":"https://codeload.github.com/zoontek/react-native-bootsplash/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129481,"owners_count":22019628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootsplash","react","react-native","splash-screen","splashscreen"],"created_at":"2024-07-31T16:01:19.280Z","updated_at":"2026-01-25T02:08:49.583Z","avatar_url":"https://github.com/zoontek.png","language":"TypeScript","funding_links":["https://github.com/sponsors/zoontek"],"categories":["TypeScript","Uncategorized","Java","React Native","Libraries Used"],"sub_categories":["Uncategorized","General"],"readme":"# 🚀 react-native-bootsplash\n\nShow a splash screen during app startup. Hide it when you are ready.\u003cbr\u003e\n**For migration from the v6, check the [`MIGRATION.md` guide](./MIGRATION.md).**\n\n[![mit licence](https://img.shields.io/dub/l/vibe-d.svg?style=for-the-badge)](https://github.com/zoontek/react-native-bootsplash/blob/main/LICENSE)\n[![npm version](https://img.shields.io/npm/v/react-native-bootsplash?style=for-the-badge)](https://www.npmjs.org/package/react-native-bootsplash)\n[![npm downloads](https://img.shields.io/npm/dt/react-native-bootsplash.svg?label=downloads\u0026style=for-the-badge)](https://www.npmjs.org/package/react-native-bootsplash)\n\u003cbr /\u003e\n[![platform - android](https://img.shields.io/badge/platform-Android-3ddc84.svg?logo=android\u0026style=for-the-badge)](https://www.android.com)\n[![platform - ios](https://img.shields.io/badge/platform-iOS-000.svg?logo=apple\u0026style=for-the-badge)](https://developer.apple.com/ios)\n\n\u003cp\u003e\n  \u003cimg width=\"393\" src=\"./docs/demo_static.png\" alt=\"Demo\"\u003e\n  \u003cimg width=\"255\" src=\"./docs/demo.gif\" alt=\"Demo\"\u003e\n\u003c/p\u003e\n\n## Support\n\nThis library follows the React Native [releases support policy](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md).\u003cbr\u003e\nIt is supporting the **latest version**, and the **two previous minor series**.\n\n## Installation\n\n```bash\n$ npm install --save react-native-bootsplash\n# --- or ---\n$ yarn add react-native-bootsplash\n```\n\n_⚠️  Don't forget going into the `ios` directory to execute a `pod install`._\n\n## Setup\n\n### Assets generation\n\nIn order to speed up the setup, we provide a **CLI** to generate assets, update config files, create the Android Drawable XML file and the iOS Storyboard file automatically ✨.\n\n```bash\n$ npx react-native-bootsplash generate --help\n# --- or ---\n$ yarn react-native-bootsplash generate --help\n```\n\nThe command can take multiple arguments:\n\n```bash\nUsage: react-native-bootsplash generate [options] \u003clogo\u003e\n\nGenerate a launch screen using a logo file path (PNG or SVG)\n\nArguments:\n  logo                        Logo file path (PNG or SVG)\n\nOptions:\n  --platforms \u003clist\u003e          Platforms to generate for, separated by a comma (default: \"android,ios,web\")\n  --background \u003cstring\u003e       Background color (in hexadecimal format) (default: \"#fff\")\n  --logo-width \u003cnumber\u003e       Logo width at @1x (in dp - we recommend approximately ~100) (default: 100)\n  --assets-output \u003cstring\u003e    Assets output directory path (default: \"assets/bootsplash\")\n  --flavor \u003cstring\u003e           Android flavor build variant (where your resource directory is) (default: \"main\")\n  --html \u003cstring\u003e             HTML template file path (your web app entry point) (default: \"public/index.html\")\n  --plist \u003cstring\u003e            Custom Info.plist file path\n  --license-key \u003cstring\u003e      License key to enable brand and dark mode assets generation\n  --brand \u003cstring\u003e            Brand file path (PNG or SVG)\n  --brand-width \u003cnumber\u003e      Brand width at @1x (in dp - we recommend approximately ~80) (default: 80)\n  --dark-background \u003cstring\u003e  [dark mode] Background color (in hexadecimal format)\n  --dark-logo \u003cstring\u003e        [dark mode] Logo file path (PNG or SVG)\n  --dark-brand \u003cstring\u003e       [dark mode] Brand file path (PNG or SVG)\n  -h, --help                  display help for command\n```\n\n#### 💪 Unlock the CLI full potential\n\nIn order to use the `--brand`, `--brand-width` and `--dark-*` options, you must specify a `--license-key`.\n\nWith it, the generator is able to output over **50 files** (logo and brand images generated in all pixel densities, dark mode versions, etc.), saving you (and your company!) a massive amount of time not only at creation, but also at each adjustment ⏱️\n\n_📍 This license key grants unlimited and unrestricted usage of the generator for the buyer's purposes (meaning you can execute the assets generation as much as you want)._\n\n\u003ca href=\"https://zoontek.gumroad.com/l/bootsplash-generator\"\u003e\n  \u003cimg width=\"280\" src=\"./docs/gumroad_button.png\" alt=\"Gumroad button\"\u003e\n\u003c/a\u003e\n\n#### Full command usage example\n\n```bash\n# Without license key\nyarn react-native-bootsplash generate svgs/light-logo.svg \\\n  --platforms=android,ios,web \\\n  --background=F5FCFF \\\n  --logo-width=100 \\\n  --assets-output=assets/bootsplash \\\n  --flavor=main \\\n  --html=public/index.html\n\n# With license key 🔑\nyarn react-native-bootsplash generate svgs/light-logo.svg \\\n  --platforms=android,ios,web \\\n  --background=F5FCFF \\\n  --logo-width=100 \\\n  --assets-output=assets/bootsplash \\\n  --flavor=main \\\n  --html=public/index.html \\\n  --license-key=xxxxx \\\n  --brand=svgs/light-brand.svg \\\n  --brand-width=80 \\\n  --dark-background=00090A \\\n  --dark-logo=svgs/dark-logo.svg \\\n  --dark-brand=svgs/dark-brand.svg\n```\n\nThis tool relies on the naming conventions that are used in the `/example` project and will therefore create / update the following files:\n\n```bash\n# Without license key\nandroid/app/src/main/res/drawable-mdpi/bootsplash_logo.png\nandroid/app/src/main/res/drawable-hdpi/bootsplash_logo.png\nandroid/app/src/main/res/drawable-xhdpi/bootsplash_logo.png\nandroid/app/src/main/res/drawable-xxhdpi/bootsplash_logo.png\nandroid/app/src/main/res/drawable-xxxhdpi/bootsplash_logo.png\nandroid/app/src/main/AndroidManifest.xml\nandroid/app/src/main/res/values/colors.xml\nandroid/app/src/main/res/values/styles.xml\n\nios/YourApp/BootSplash.storyboard\nios/YourApp/Colors.xcassets/BootSplashBackground-\u003chash\u003e.colorset/Contents.json\nios/YourApp/Images.xcassets/BootSplashLogo-\u003chash\u003e.imageset/Contents.json\nios/YourApp/Images.xcassets/BootSplashLogo-\u003chash\u003e.imageset/logo-\u003chash\u003e.png\nios/YourApp/Images.xcassets/BootSplashLogo-\u003chash\u003e.imageset/logo-\u003chash\u003e@2x.png\nios/YourApp/Images.xcassets/BootSplashLogo-\u003chash\u003e.imageset/logo-\u003chash\u003e@3x.png\nios/YourApp/Info.plist\nios/YourApp.xcodeproj/project.pbxproj\n\npublic/index.html\n\nassets/bootsplash/manifest.json\nassets/bootsplash/logo.png\nassets/bootsplash/logo@1,5x.png\nassets/bootsplash/logo@2x.png\nassets/bootsplash/logo@3x.png\nassets/bootsplash/logo@4x.png\n\n# + Over 40 files with license key 🔑 (brand images, dark mode versions…)\n```\n\n![](./docs/cli_generator.png)\n\n### With Expo\n\n1. First, uninstall `expo-splash-screen`:\n\n```bash\n$ npm uninstall expo-splash-screen\n# --- or ---\n$ yarn remove expo-splash-screen\n```\n\n2. Add the plugin in your `app.json`:\n\n```diff\n{\n  \"expo\": {\n+   \"platforms\": [\"android\", \"ios\", \"web\"], // must be explicit\n    \"plugins\": [\n-     [\n-       \"expo-splash-screen\",\n-       {\n-         \"image\": \"./assets/images/splash-icon.png\",\n-         \"imageWidth\": 200,\n-         \"resizeMode\": \"contain\",\n-         \"backgroundColor\": \"#ffffff\"\n-       }\n-     ],\n+     [\n+       \"react-native-bootsplash\",\n+       {\n+         \"logo\": \"./assets/logo.png\",\n+         \"logoWidth\": 100,\n+         \"background\": \"#f5fcff\"\n+         // …\n+       }\n+     ]\n    ]\n  }\n}\n```\n\n_📌 The available plugins options are:_\n\n```ts\ntype PluginOptions = {\n  android?: {\n    darkContentBarsStyle?: boolean; // Enforce system bars style (default: undefined)\n  };\n\n  logo: string; // Logo file path (PNG or SVG) - required\n  background?: string; // Background color (in hexadecimal format) (default: \"#fff\")\n  logoWidth?: number; // Logo width at @1x (in dp - we recommend approximately ~100) (default: 100)\n  assetsOutput?: string; // Assets output directory path (default: \"assets/bootsplash\")\n\n  // Addon options\n  licenseKey?: string; // License key to enable brand and dark mode assets generation\n  brand?: string; // Brand file path (PNG or SVG)\n  brandWidth?: number; // Brand width at @1x (in dp - we recommend approximately ~80) (default: 80)\n  darkBackground?: string; // [dark mode] Background color (in hexadecimal format)\n  darkLogo?: string; // [dark mode] Logo file path (PNG or SVG)\n  darkBrand?: string; // [dark mode] Brand file path (PNG or SVG)\n};\n```\n\n### With bare React Native\n\n#### iOS\n\nEdit your `ios/YourApp/AppDelegate.swift` file:\n\n```swift\nimport ReactAppDependencyProvider\nimport RNBootSplash // ⬅️ add this import\n\n// …\n\nclass ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {\n\n  // …\n\n  // ⬇️ override this method\n  override func customize(_ rootView: RCTRootView) {\n    super.customize(rootView)\n    RNBootSplash.initWithStoryboard(\"BootSplash\", rootView: rootView) // ⬅️ initialize the splash screen\n  }\n}\n```\n\n#### Android\n\nEdit your `android/app/src/main/java/com/yourapp/MainActivity.kt` file:\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cstrong\u003eWithout react-native-screens\u003c/strong\u003e\u003c/summary\u003e\n\n```kotlin\n// ⬇️ add these required imports\nimport android.os.Bundle\nimport com.zoontek.rnbootsplash.RNBootSplash\n\n// …\n\nclass MainActivity : ReactActivity() {\n\n  // …\n\n  override fun onCreate(savedInstanceState: Bundle?) {\n    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen\n    super.onCreate(savedInstanceState)\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWith react-native-screens \u003e= v4.16.0\u003c/strong\u003e\u003c/summary\u003e\n\n```kotlin\n// ⬇️ add these required imports\nimport android.os.Bundle\nimport com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory\nimport com.zoontek.rnbootsplash.RNBootSplash\n\n// …\n\nclass MainActivity : ReactActivity() {\n\n  // …\n\n  override fun onCreate(savedInstanceState: Bundle?) {\n    supportFragmentManager.fragmentFactory = RNScreensFragmentFactory()\n    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen\n    super.onCreate(savedInstanceState)\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWith react-native-screens \u003c v4.16.0\u003c/strong\u003e\u003c/summary\u003e\n\n```kotlin\n// ⬇️ add these required imports\nimport android.os.Bundle\nimport com.zoontek.rnbootsplash.RNBootSplash\n\n// …\n\nclass MainActivity : ReactActivity() {\n\n  // …\n\n  override fun onCreate(savedInstanceState: Bundle?) {\n    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen\n    super.onCreate(null)\n  }\n}\n```\n\n\u003c/details\u003e\n\n_ℹ️ Refer to [previous package documentation](https://github.com/zoontek/react-native-bootsplash/tree/6.3.12?tab=readme-ov-file#with-bare-react-native) for setup steps with React Native \u003c 0.80._\n\n## API\n\n### hide()\n\nHide the splash screen (immediately, or with a fade out).\n\n#### Method type\n\n```ts\ntype hide = (config?: { fade?: boolean }) =\u003e Promise\u003cvoid\u003e;\n```\n\n#### Usage\n\n```tsx\nimport { useEffect } from \"react\";\nimport { Text } from \"react-native\";\nimport BootSplash from \"react-native-bootsplash\";\n\nconst App = () =\u003e {\n  useEffect(() =\u003e {\n    const init = async () =\u003e {\n      // …do multiple sync or async tasks\n    };\n\n    init().finally(async () =\u003e {\n      await BootSplash.hide({ fade: true });\n      console.log(\"BootSplash has been hidden successfully\");\n    });\n  }, []);\n\n  return \u003cText\u003eMy awesome app\u003c/Text\u003e;\n};\n```\n\n### isVisible()\n\nReturn the current visibility status of the native splash screen.\n\n#### Method type\n\n```ts\ntype isVisible = () =\u003e boolean;\n```\n\n#### Usage\n\n```ts\nimport BootSplash from \"react-native-bootsplash\";\n\nif (BootSplash.isVisible()) {\n  // Do something\n}\n```\n\n### useHideAnimation()\n\nA hook to easily create a custom hide animation by animating all splash screen elements using `Animated`, `react-native-reanimated` or else (similar as the video on top of this documentation).\n\n#### Method type\n\n```ts\ntype useHideAnimation = (config: {\n  ready?: boolean; // a boolean flag to delay the animate execution (default: true)\n\n  // the required generated assets\n  manifest: Manifest; // the manifest file is generated in your assets directory\n  logo?: ImageRequireSource;\n  darkLogo?: ImageRequireSource;\n  brand?: ImageRequireSource;\n  darkBrand?: ImageRequireSource;\n\n  // specify if you are using translucent status / navigation bars\n  // in order to avoid a shift between the native and JS splash screen\n  statusBarTranslucent?: boolean;\n  navigationBarTranslucent?: boolean;\n\n  animate: () =\u003e void;\n}) =\u003e {\n  container: ContainerProps;\n  logo: LogoProps;\n  brand: BrandProps;\n};\n```\n\n#### Usage\n\n```tsx\nimport { useState } from \"react\";\nimport { Animated, Image } from \"react-native\";\nimport BootSplash from \"react-native-bootsplash\";\n\ntype Props = {\n  onAnimationEnd: () =\u003e void;\n};\n\nconst AnimatedBootSplash = ({ onAnimationEnd }: Props) =\u003e {\n  const [opacity] = useState(() =\u003e new Animated.Value(1));\n\n  const { container, logo /*, brand */ } = BootSplash.useHideAnimation({\n    manifest: require(\"../assets/bootsplash/manifest.json\"),\n\n    logo: require(\"../assets/bootsplash/logo.png\"),\n    // darkLogo: require(\"../assets/bootsplash/dark-logo.png\"),\n    // brand: require(\"../assets/bootsplash/brand.png\"),\n    // darkBrand: require(\"../assets/bootsplash/dark-brand.png\"),\n\n    animate: () =\u003e {\n      // Perform animations and call onAnimationEnd\n      Animated.timing(opacity, {\n        useNativeDriver: true,\n        toValue: 0,\n        duration: 500,\n      }).start(() =\u003e {\n        onAnimationEnd();\n      });\n    },\n  });\n\n  return (\n    \u003cAnimated.View {...container} style={[container.style, { opacity }]}\u003e\n      \u003cImage {...logo} /\u003e\n      {/* \u003cImage {...brand} /\u003e */}\n    \u003c/Animated.View\u003e\n  );\n};\n\nconst App = () =\u003e {\n  const [visible, setVisible] = useState(true);\n\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      {/* content */}\n\n      {visible \u0026\u0026 (\n        \u003cAnimatedBootSplash\n          onAnimationEnd={() =\u003e {\n            setVisible(false);\n          }}\n        /\u003e\n      )}\n    \u003c/View\u003e\n  );\n};\n```\n\n**This example is simple for documentation purpose (we only animate the container).**\u003cbr\u003e\n**🤙 A more complex example is available in the [`/example` folder](./example/src/AnimatedBootSplash.tsx).**\n\n## FAQ\n\n### How can I enforce the splash screen system bar colors?\n\nBy default, the system bars uses `dark-content` in light mode and `light-content` in dark mode. To enforce a specific value, edit your `values/styles.xml` file:\n\n```xml\n\u003cresources\u003e\n  \u003c!-- … --\u003e\n\n  \u003cstyle name=\"BootTheme\" parent=\"Theme.BootSplash\"\u003e\n    \u003citem name=\"darkContentBarsStyle\"\u003etrue\u003c/item\u003e\n    \u003c!-- … --\u003e\n  \u003c/style\u003e\n\u003c/resources\u003e\n```\n\n### Why are both light and dark assets inlined in my index.html?\n\nFor the sake of simplicity. Since the light and dark versions of your assets are likely identical (except for the colors), if your `index.html` file is compressed with **gzip**, the size difference will be negligible.\n\n### How should I use it with React Navigation?\n\nIf you are using React Navigation, you can hide the splash screen once the navigation container and all children have finished mounting by using the `onReady` function.\n\n```tsx\nimport { NavigationContainer } from \"@react-navigation/native\";\nimport BootSplash from \"react-native-bootsplash\";\n\nconst App = () =\u003e (\n  \u003cNavigationContainer\n    onReady={() =\u003e {\n      BootSplash.hide();\n    }}\n  \u003e\n    {/* content */}\n  \u003c/NavigationContainer\u003e\n);\n```\n\n### How can I mock the module in my tests?\n\nTesting code which uses this library requires some setup since we need to mock the native methods.\n\nTo add the mocks, create a file `jest/setup.js` (or any other file name) containing the following code:\n\n```ts\njest.mock(\"react-native-bootsplash\", () =\u003e {\n  return {\n    hide: jest.fn().mockResolvedValue(),\n    isVisible: jest.fn(),\n    useHideAnimation: jest.fn().mockReturnValue({\n      container: {},\n      logo: { source: 0 },\n      brand: { source: 0 },\n    }),\n  };\n});\n```\n\nAfter that, we need to add the setup file in the jest config. You can add it under [setupFiles](https://jestjs.io/docs/en/configuration.html#setupfiles-array) option in your jest config file:\n\n```json\n{\n  \"setupFiles\": [\"\u003crootDir\u003e/jest/setup.js\"]\n}\n```\n\n## Sponsors\n\nThis module is provided **as is**, I work on it in my free time.\n\nIf you or your company uses it in a production app, consider sponsoring this project 💰. You also can contact me for **premium** enterprise support: help with issues, prioritize bugfixes, feature requests, etc.\n\n\u003ca href=\"https://github.com/sponsors/zoontek\"\u003e\u003cimg align=\"center\" alt=\"Sponsors list\" src=\"https://raw.githubusercontent.com/zoontek/sponsors/main/sponsorkit/sponsors.svg\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Freact-native-bootsplash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoontek%2Freact-native-bootsplash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoontek%2Freact-native-bootsplash/lists"}