React Native Bootsplash

https://github.com/zoontek/react-native-bootsplash
Admin
🚀 Show a splash screen during app startup. Hide it when you are ready.
Tokens:25,435
Snippets:301
Trust Score:9.5
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Platform-Specific Setup

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Configuration examples tailored for individual platforms.

```json
{
  "plugins": [
    [
      "react-native-bootsplash",
      {
        "logo": "./assets/logo.svg",
        "android": {
          "darkContentBarsStyle": true
        }
      }
    ]
  ]
}
```

```json
{
  "plugins": [
    [
      "react-native-bootsplash",
      {
        "logo": "./assets/logo.svg"
      }
    ]
  ]
}
```

```json
{
  "plugins": [
    [
      "react-native-bootsplash",
      {
        "logo": "./assets/logo.svg",
        "assetsOutput": "public/splash"
      }
    ]
  ]
}
```

--------------------------------

### Full Setup with Dark Mode and Brand

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Configures a complete splash screen setup including dark mode and branding, requiring a license key.

```bash
export BOOTSPLASH_LICENSE_KEY="your-license-key"

npx react-native-bootsplash generate svgs/light-logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets/bootsplash \
  --flavor=main \
  --html=public/index.html \
  --brand=svgs/light-brand.svg \
  --brand-width=80 \
  --dark-background=00090A \
  --dark-logo=svgs/dark-logo.svg \
  --dark-brand=svgs/dark-brand.svg
```

--------------------------------

### Minimal Setup (Light Mode Only)

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Basic configuration for a light-mode-only splash screen.

```json
{
  "expo": {
    "plugins": [
      [
        "react-native-bootsplash",
        {
          "logo": "./assets/logo.svg"
        }
      ]
    ]
  }
}
```

```bash
npx react-native-bootsplash generate ./assets/logo.svg
```

--------------------------------

### Configure Jest Setup File

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Add the created setup file to the `setupFiles` option in your jest configuration. This ensures the mocks are loaded before tests run.

```json
{
  "setupFiles": ["<rootDir>/jest/setup.js"]
}
```

--------------------------------

### Install react-native-bootsplash

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Install the library using npm or yarn.

```bash
npm install --save react-native-bootsplash
# --- or ---
yarn add react-native-bootsplash
```

--------------------------------

### Basic Light Mode Setup

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Performs a standard generation for Android, iOS, and Web without dark mode.

```bash
npx react-native-bootsplash generate svgs/light-logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets/bootsplash \
  --flavor=main \
  --html=public/index.html
```

--------------------------------

### Standard Setup (Light and Dark Mode)

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Configuration supporting both light and dark mode assets.

```typescript
export default {
  plugins: [
    [
      "react-native-bootsplash",
      {
        logo: "./assets/logo.svg",
        background: "#f5fcff",
        logoWidth: 100,
        assetsOutput: "assets/bootsplash",
        darkBackground: "#00090a",
        darkLogo: "./assets/dark-logo.svg",
      }
    ]
  ]
}
```

```bash
export BOOTSPLASH_LICENSE_KEY="your-license-key"

npx react-native-bootsplash generate ./assets/logo.svg \
  --background "#f5fcff" \
  --logo-width 100 \
  --assets-output assets/bootsplash \
  --dark-background "#00090a" \
  --dark-logo "./assets/dark-logo.svg"
```

--------------------------------

### Import and use Manifest

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/types.md

Example of importing the Manifest type and loading the generated manifest JSON file.

```typescript
import type { Manifest } from "react-native-bootsplash";

const manifest: Manifest = require("../assets/bootsplash/manifest.json");
// {
//   "background": "#f5fcff",
//   "darkBackground": "#00090a",
//   "logo": { "width": 100, "height": 80 },
//   "brand": { "bottom": 60, "width": 80, "height": 40 }
// }
```

--------------------------------

### Complete Setup (Brand + Dark Mode)

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Advanced configuration including branding assets and Android-specific status bar styling.

```typescript
export default {
  plugins: [
    [
      "react-native-bootsplash",
      {
        logo: "./assets/logo.svg",
        background: "#f5fcff",
        logoWidth: 100,
        brand: "./assets/brand.svg",
        brandWidth: 80,
        darkBackground: "#00090a",
        darkLogo: "./assets/dark-logo.svg",
        darkBrand: "./assets/dark-brand.svg",
        android: {
          darkContentBarsStyle: true,
        },
      }
    ]
  ]
}
```

```bash
export BOOTSPLASH_LICENSE_KEY="your-license-key"

npx react-native-bootsplash generate ./assets/logo.svg \
  --background "#f5fcff" \
  --logo-width 100 \
  --brand ./assets/brand.svg \
  --brand-width 80 \
  --dark-background "#00090a" \
  --dark-logo ./assets/dark-logo.svg \
  --dark-brand ./assets/dark-brand.svg
```

--------------------------------

### Implement UseHideAnimationConfig

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/types.md

Example implementation of the configuration object for the useHideAnimation hook.

```typescript
import type { UseHideAnimationConfig } from "react-native-bootsplash";

const config: UseHideAnimationConfig = {
  manifest: require("../assets/bootsplash/manifest.json"),
  ready: true,
  logo: require("../assets/bootsplash/logo.png"),
  darkLogo: require("../assets/bootsplash/dark-logo.png"),
  brand: require("../assets/bootsplash/brand.png"),
  animate: () => {
    // perform animation
  },
};
```

--------------------------------

### Test BootSplash Integration

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/usage-examples.md

Example test suite verifying that the splash screen hides correctly and visibility checks function as expected.

```typescript
import { render } from "@testing-library/react-native";
import BootSplash from "react-native-bootsplash";
import { App } from "./App";

describe("App", () => {
  it("hides splash screen on initialization", async () => {
    render(<App />);

    await new Promise((resolve) => setTimeout(resolve, 100));

    expect(BootSplash.hide).toHaveBeenCalledWith({ fade: true });
  });

  it("checks splash screen visibility", () => {
    BootSplash.isVisible();
    expect(BootSplash.isVisible).toHaveBeenCalled();
  });
});
```

--------------------------------

### Manifest JSON Structure

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Example of the manifest.json file structure containing asset metadata for background, logo, and brand dimensions.

```json
{
  "background": "#f5fcff",
  "darkBackground": "#00090a",
  "logo": {
    "width": 100,
    "height": 80
  },
  "brand": {
    "bottom": 60,
    "width": 80,
    "height": 40
  }
}
```

--------------------------------

### Configure BootSplashPluginConfig

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/types.md

Example implementation of the BootSplashPluginConfig object for use in Expo project configuration.

```typescript
import type { BootSplashPluginConfig } from "react-native-bootsplash/expo";

const config: BootSplashPluginConfig = {
  logo: "./assets/logo.svg",
  background: "#f5fcff",
  logoWidth: 100,
  assetsOutput: "assets/bootsplash",
  brand: "./assets/brand.svg",
  darkBackground: "#00090a",
  darkLogo: "./assets/dark-logo.svg",
  darkBrand: "./assets/dark-brand.svg",
  android: {
    darkContentBarsStyle: true,
  },
};
```

--------------------------------

### Base64 Image Encoding

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Example of using base64 data URIs for zero-network latency splash screen images.

```html
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEA..." />
```

--------------------------------

### Retrieve Platform Constants

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/native-module.md

Example usage of getConstants to retrieve device metrics and dark mode status.

```typescript
const constants = NativeModule.getConstants();
// {
//   darkModeEnabled: false,
//   logoSizeRatio: 2,
//   navigationBarHeight: 48,
//   statusBarHeight: 24
// }
```

--------------------------------

### Show CLI help for asset generation

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

View available options for the asset generation command.

```bash
npx react-native-bootsplash generate --help
# --- or ---
yarn react-native-bootsplash generate --help
```

--------------------------------

### Use Config in hide function

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/types.md

Example of passing a configuration object to the hide function.

```typescript
import { hide, type Config } from "react-native-bootsplash";

const config: Config = { fade: true };
await hide(config);
```

--------------------------------

### Define web entry point

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Use the --html flag to specify the path to the web application's entry point HTML file.

```bash
npx react-native-bootsplash generate logo.svg --html index.html
```

--------------------------------

### Display CLI Help

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Shows help information for the CLI or specific commands.

```bash
npx react-native-bootsplash --help
npx react-native-bootsplash generate --help
```

--------------------------------

### Set Web HTML template

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Point to the HTML template file for web asset generation.

```bash
npx react-native-bootsplash generate logo.svg --html public/index.html
npx react-native-bootsplash generate logo.svg --html index.html
```

--------------------------------

### npx react-native-bootsplash --help

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Displays help information for the CLI tool.

```APIDOC
## CLI Command: npx react-native-bootsplash --help

### Description
Displays usage instructions and available commands for the react-native-bootsplash CLI.

### Usage
```bash
npx react-native-bootsplash --help
npx react-native-bootsplash generate --help
```
```

--------------------------------

### Configuring BootSplash Statically

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/expo-plugin.md

Define the plugin configuration directly in the app.json file.

```jsonc
{
  "expo": {
    "name": "MyApp",
    "slug": "myapp",
    "platforms": ["android", "ios", "web"],
    "plugins": [
      [
        "react-native-bootsplash",
        {
          "logo": "./assets/logo.png",
          "logoWidth": 100,
          "background": "#f5fcff",
          "brand": "./assets/brand.png",
          "darkBackground": "#00090A",
          "darkLogo": "./assets/dark-logo.png",
          "darkBrand": "./assets/dark-brand.png"
        }
      ]
    ]
  }
}
```

--------------------------------

### Configure Android BootSplash

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/README.md

Initialize the splash screen in your MainActivity using the theme resource.

```kotlin
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    RNBootSplash.init(this, R.style.BootTheme)
    super.onCreate(savedInstanceState)
  }
}
```

--------------------------------

### Initialize BootSplash in MainActivity

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Add the necessary imports and initialization call within the MainActivity onCreate method.

```kotlin
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash
```

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
  RNBootSplash.init(this, R.style.BootTheme)
  super.onCreate(savedInstanceState)
}
```

--------------------------------

### Importing BootSplash modules

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/api-reference.md

Demonstrates the available import patterns for the BootSplash library.

```typescript
import BootSplash from "react-native-bootsplash";
// or
import { hide } from "react-native-bootsplash";
```

--------------------------------

### Integrate BootSplash in AppDelegate

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Import the library and initialize the storyboard within the AppDelegate customize method.

```swift
import RNBootSplash
```

```swift
public override func customize(_ rootView: UIView) {
  super.customize(rootView)
  RNBootSplash.initWithStoryboard("BootSplash", rootView: rootView)
}
```

--------------------------------

### Configure Brand Image

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the path to the brand image file, which requires a license key.

```json
{
  "brand": "./assets/brand.svg",
  "licenseKey": "xxxx-xxxx-xxxx-xxxx"
}
```

--------------------------------

### Configure Info.plist for Launch Screen

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Add the UILaunchStoryboardName key to Info.plist to register the BootSplash storyboard.

```xml
<key>UILaunchStoryboardName</key>
<string>BootSplash</string>
```

--------------------------------

### Define BootTheme Style

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Configure the BootTheme style in styles.xml to reference splash screen resources.

```xml
<style name="BootTheme" parent="Theme.BootSplash">
  <item name="postBootSplashTheme">@style/AppTheme</item>
  <item name="bootSplashBackground">@color/bootsplash_background</item>
  <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
  <item name="bootSplashBrand">@drawable/bootsplash_brand</item>
  <item name="darkContentBarsStyle">true</item>
</style>
```

--------------------------------

### View Build Output Structure

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/module-structure.md

The directory structure of the generated build output.

```text
dist/
├── commonjs/
│   ├── index.js
│   └── extras/
│       ├── expo.js
│       └── generate.js
├── module/
│   ├── index.js
│   └── extras/
│       ├── expo.js
│       └── generate.js
└── typescript/
    ├── commonjs/
    │   ├── index.d.ts
    │   └── extras/
    │       ├── expo.d.ts
    │       └── generate.d.ts
    └── module/
        ├── index.d.ts
        └── extras/
            ├── expo.d.ts
            └── generate.d.ts
```

--------------------------------

### Configure Assets Output Directory

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Specify the directory where generated assets will be placed.

```json
{
  "assetsOutput": "src/resources/splash"
}
```

--------------------------------

### Generate Assets via CLI

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/README.md

Run the generate command to create splash screen assets for specified platforms.

```bash
npx react-native-bootsplash generate ./assets/logo.svg \
  --platforms=android,ios,web \
  --background="#f5fcff" \
  --logo-width=100
```

--------------------------------

### Generate boot splash assets

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Basic usage of the generate command with a logo file.

```bash
npx react-native-bootsplash generate ./assets/logo.svg
```

--------------------------------

### Configure target platforms

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Specify which platforms to generate assets for using the --platforms option.

```bash
# Generate for all platforms (default)
npx react-native-bootsplash generate logo.svg --platforms android,ios,web

# Generate for specific platforms
npx react-native-bootsplash generate logo.svg --platforms ios
npx react-native-bootsplash generate logo.svg --platforms android,web
```

--------------------------------

### Use license key for advanced features

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Provide a license key to enable brand and dark mode assets, either via flag or environment variable.

```bash
npx react-native-bootsplash generate logo.svg \
  --license-key "xxxx-xxxx-xxxx-xxxx" \
  --brand ./assets/brand.svg \
  --dark-logo ./assets/dark-logo.svg
```

```bash
export BOOTSPLASH_LICENSE_KEY="xxxx-xxxx-xxxx-xxxx"
npx react-native-bootsplash generate logo.svg \
  --brand ./assets/brand.svg \
  --dark-logo ./assets/dark-logo.svg
```

--------------------------------

### Set brand image

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Specify a brand image file, requiring a license key.

```bash
npx react-native-bootsplash generate logo.svg \
  --license-key "xxxx" \
  --brand ./assets/brand.svg
```

--------------------------------

### Configure License Key

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the license key for advanced features. Note that using environment variables is recommended over hardcoding in the config file.

```json
{
  "licenseKey": "xxxx-xxxx-xxxx-xxxx"
}
```

```bash
export BOOTSPLASH_LICENSE_KEY="xxxx-xxxx-xxxx-xxxx"
eas build
```

--------------------------------

### Android MainActivity Kotlin Integration (No Screens)

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Initialize RNBootSplash in your Android MainActivity.kt file for projects without react-native-screens. Ensure required imports are added.

```kotlin
// ⬇️ add these required imports
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

// …

class MainActivity : ReactActivity() {

  // …

  override fun onCreate(savedInstanceState: Bundle?) {
    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState)
  }
}
```

--------------------------------

### withBootSplash: ConfigPlugin

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/module-structure.md

Expo plugin for configuring the splash screen in an Expo project.

```APIDOC
## withBootSplash: ConfigPlugin

### Description
An Expo plugin used to configure the splash screen settings within the app.json or app.config.js file.

### Usage
Import from 'react-native-bootsplash/expo' and add to the plugins array in your Expo configuration.
```

--------------------------------

### Importing isVisible

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/api-reference.md

Demonstrates the available import patterns for the isVisible method.

```typescript
import BootSplash from "react-native-bootsplash";
// or
import { isVisible } from "react-native-bootsplash";
```

--------------------------------

### Configure Logo Path

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the path to the logo image file relative to the project root.

```json
{
  "logo": "./assets/logo.png"
}
```

--------------------------------

### Configure iOS BootSplash

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/README.md

Initialize the splash screen in your iOS AppDelegate using the storyboard name.

```swift
import RNBootSplash

class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
  override func customize(_ rootView: RCTRootView) {
    super.customize(rootView)
    RNBootSplash.initWithStoryboard("BootSplash", rootView: rootView)
  }
}
```

--------------------------------

### Set Android flavor

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Specify the Android build variant for resource generation.

```bash
npx react-native-bootsplash generate logo.svg --flavor main
npx react-native-bootsplash generate logo.svg --flavor development
npx react-native-bootsplash generate logo.svg --flavor staging
```

--------------------------------

### Mock react-native-bootsplash for Tests

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Mock the native methods of react-native-bootsplash for testing purposes. Create a `jest/setup.js` file and configure it in your jest settings.

```ts
jest.mock("react-native-bootsplash", () => ({
  hide: jest.fn().mockResolvedValue(),
  isVisible: jest.fn(),
  useHideAnimation: jest.fn().mockReturnValue({
    container: {},
    logo: { source: 0 },
    brand: { source: 0 },
  }),
}));
```

--------------------------------

### Configuring BootSplash Dynamically

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/expo-plugin.md

Use the plugin within an app.config.ts file to define splash screen assets and settings.

```typescript
import type { ConfigContext, ExpoConfig } from "expo/config";
import bootsplash from "react-native-bootsplash/expo";

export default ({ config }: ConfigContext): ExpoConfig => ({
  name: "MyApp",
  slug: "myapp",
  platforms: ["android", "ios", "web"],
  plugins: [
    bootsplash({
      logo: "./assets/logo.png",
      logoWidth: 100,
      background: "#f5fcff",
      brand: "./assets/brand.png",
      darkBackground: "#00090A",
      darkLogo: "./assets/dark-logo.png",
      darkBrand: "./assets/dark-brand.png",
      licenseKey: process.env.BOOTSPLASH_LICENSE_KEY,
    }),
  ],
});
```

--------------------------------

### Set iOS Info.plist path

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Provide a custom path to the iOS Info.plist file.

```bash
npx react-native-bootsplash generate logo.svg --plist ios/MyApp/Info.plist
```

--------------------------------

### Generate assets without license key

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Generate splash screen assets for specified platforms with custom background and logo dimensions. Assets are saved to the specified output directory.

```bash
yarn react-native-bootsplash generate svgs/light-logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets/bootsplash \
  --flavor=main \
  --html=public/index.html
```

--------------------------------

### Generate assets with license key

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Generate splash screen assets including dark mode and brand images using a license key. This command enables advanced features and outputs a comprehensive set of assets.

```bash
yarn react-native-bootsplash generate svgs/light-logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets/bootsplash \
  --flavor=main \
  --html=public/index.html \
  --license-key=xxxxx \
  --brand=svgs/light-brand.svg \
  --brand-width=80 \
  --dark-background=00090A \
  --dark-logo=svgs/dark-logo.svg \
  --dark-brand=svgs/dark-brand.svg
```

--------------------------------

### Set assets output directory

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Specify the directory where generated assets will be saved.

```bash
npx react-native-bootsplash generate logo.svg --assets-output assets/splash
npx react-native-bootsplash generate logo.svg --assets-output src/resources/bootsplash
```

--------------------------------

### CLI Generate Options

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/README.md

Available command-line arguments for the generate command.

```bash
npx react-native-bootsplash generate <logo> [options]
  --platforms <list>              # default: android,ios,web
  --background <string>           # default: #fff
  --logo-width <number>           # default: 100
  --assets-output <string>        # default: assets/bootsplash
  --brand <string>
  --brand-width <number>          # default: 80
  --dark-background <string>
  --dark-logo <string>
  --dark-brand <string>
  --license-key <string>
  --flavor <string>               # default: main
  --html <string>                 # default: public/index.html
  --plist <string>
```

--------------------------------

### BootSplash API Methods

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/README.md

Core functions for managing the splash screen visibility and custom animations.

```typescript
// Hide splash screen
hide(config?: { fade?: boolean }): Promise<void>

// Check if splash is visible
isVisible(): boolean

// Hook for custom animations
useHideAnimation(config: {
  manifest: Manifest;
  ready?: boolean;
  logo?: ImageRequireSource;
  darkLogo?: ImageRequireSource;
  brand?: ImageRequireSource;
  darkBrand?: ImageRequireSource;
  animate: () => void;
  statusBarTranslucent?: boolean;
  navigationBarTranslucent?: boolean;
}): {
  container: ContainerProps;
  logo: LogoProps;
  brand: BrandProps;
}
```

--------------------------------

### Configure BOOTSPLASH_LICENSE_KEY

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the license key as an environment variable for CLI commands or CI/CD pipelines.

```bash
export BOOTSPLASH_LICENSE_KEY="your-license-key"
npx react-native-bootsplash generate logo.svg --brand brand.svg
```

```bash
BOOTSPLASH_LICENSE_KEY=${{ secrets.BOOTSPLASH_LICENSE_KEY }} eas build
```

--------------------------------

### Specify Android build flavor

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Use the --flavor flag to target a specific Android build variant.

```bash
npx react-native-bootsplash generate logo.svg --flavor development
```

--------------------------------

### Expo Configuration with Dark Mode

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/usage-examples.md

Configure BootSplash with dark mode assets and platform-specific settings. Requires a valid license.

```typescript
export default {
  platforms: ["android", "ios", "web"],
  plugins: [
    [
      "react-native-bootsplash",
      {
        logo: "./assets/logo.svg",
        background: "#f5fcff",
        logoWidth: 100,
        brand: "./assets/brand.svg",
        brandWidth: 80,
        darkBackground: "#00090a",
        darkLogo: "./assets/dark-logo.svg",
        darkBrand: "./assets/dark-brand.svg",
        android: {
          darkContentBarsStyle: true,
        },
      },
    ],
  ],
};
```

--------------------------------

### Configure Dark Mode Background

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the background color for dark mode, requiring a license key.

```json
{
  "darkBackground": "#00090a",
  "licenseKey": "xxxx-xxxx-xxxx-xxxx"
}
```

--------------------------------

### App Integration with State Management

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/usage-examples.md

Manages splash visibility state in conjunction with an asynchronous app initialization process.

```typescript
import { useEffect, useState } from "react";
import { SafeAreaView } from "react-native";
import BootSplash from "react-native-bootsplash";
import { AnimatedBootSplash } from "./components/AnimatedBootSplash";
import { AppNavigator } from "./navigation/AppNavigator";
import { useAppStore } from "./store";

export const App = () => {
  const [splashVisible, setSplashVisible] = useState(true);
  const { initializeApp } = useAppStore();

  useEffect(() => {
    const init = async () => {
      try {
        await initializeApp();
      } finally {
        // Keep splash visible until animation completes
      }
    };

    init();
  }, [initializeApp]);

  const handleAnimationEnd = async () => {
    setSplashVisible(false);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      {splashVisible ? (
        <AnimatedBootSplash onAnimationEnd={handleAnimationEnd} />
      ) : null}
      <AppNavigator />
    </SafeAreaView>
  );
};
```

--------------------------------

### Generate Splash Screen via CLI

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/usage-examples.md

Commands to generate splash screens from SVG assets. Requires specifying platforms and background colors.

```bash
npx react-native-bootsplash generate ./assets/logo.svg \
  --platforms=android,ios,web \
  --background=#f5fcff \
  --logo-width=100
```

```bash
export BOOTSPLASH_LICENSE_KEY="your-license-key"

npx react-native-bootsplash generate ./assets/logo.svg \
  --platforms=android,ios,web \
  --background=#f5fcff \
  --logo-width=100 \
  --dark-background=#00090a \
  --dark-logo=./assets/dark-logo.svg
```

```bash
export BOOTSPLASH_LICENSE_KEY="your-license-key"

npx react-native-bootsplash generate ./assets/logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --brand=./assets/brand.svg \
  --brand-width=80 \
  --dark-background=00090A \
  --dark-logo=./assets/dark-logo.svg \
  --dark-brand=./assets/dark-brand.svg
```

--------------------------------

### Expo App Config - Static Configuration

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Configure react-native-bootsplash using static configuration in app.json. Ensure 'platforms' are explicitly defined.

```json
{
  "expo": {
    // …
    "platforms": ["android", "ios", "web"], // must be explicit
    "plugins": [
      [
        "react-native-bootsplash",
        {
          "logo": "./assets/logo.png",
          "logoWidth": 100,
          "background": "#f5fcff",
          // …
        },
      ],
    ],
  },
}
```

--------------------------------

### getConstants()

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/native-module.md

Retrieves configuration constants from the native splash screen module.

```APIDOC
## getConstants()

### Description
Returns an object containing configuration constants for the splash screen, such as dark mode status and layout dimensions.

### Returns
- **darkModeEnabled** (boolean) - Indicates if dark mode is currently active.
- **logoSizeRatio** (number, optional) - The ratio of the logo size.
- **navigationBarHeight** (number, optional) - The height of the navigation bar.
- **statusBarHeight** (number, optional) - The height of the status bar.
```

--------------------------------

### Default API Usage

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/api-reference.md

Import the default BootSplash object to access hide, isVisible, and useHideAnimation methods.

```typescript
import BootSplash from "react-native-bootsplash";

await BootSplash.hide({ fade: true });
const visible = BootSplash.isVisible();
const animProps = BootSplash.useHideAnimation({ ... });
```

--------------------------------

### Set custom iOS Info.plist path

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Use the --plist flag to provide a custom path to the iOS Info.plist file for advanced configurations.

```bash
npx react-native-bootsplash generate logo.svg --plist ios/MyApp/Custom.plist
```

--------------------------------

### Generate with Dark Background

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Configures a dark mode background color using a license key.

```bash
npx react-native-bootsplash generate logo.svg \
  --license-key "xxxx" \
  --dark-background "#00090A" \
  --dark-logo ./assets/dark-logo.svg
```

--------------------------------

### Configure Dark Mode Logo

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the logo image for dark mode, requiring a license key.

```json
{
  "darkLogo": "./assets/dark-logo.svg",
  "licenseKey": "xxxx-xxxx-xxxx-xxxx"
}
```

--------------------------------

### Configure Logo Width

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the logo width at 1x density in density-independent pixels.

```json
{
  "logoWidth": 80
}
```

--------------------------------

### Configure Android Manifest Theme

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Update the MainActivity theme in the Android manifest to use the BootTheme.

```xml
<activity
  android:name=".MainActivity"
  android:theme="@style/BootTheme"
  <!-- ... -->
/>
```

--------------------------------

### Implement Basic Fade-Out Animation

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/usage-examples.md

Applies a simple opacity transition to the entire splash screen container.

```typescript
import { useState } from "react";
import { Animated, View } from "react-native";
import BootSplash from "react-native-bootsplash";

const AnimatedBootSplash = ({ onAnimationEnd }: { onAnimationEnd: () => void }) => {
  const [opacity] = useState(() => new Animated.Value(1));

  const { container, logo, brand } = BootSplash.useHideAnimation({
    manifest: require("../assets/bootsplash/manifest.json"),
    logo: require("../assets/bootsplash/logo.png"),
    brand: require("../assets/bootsplash/brand.png"),
    animate: () => {
      Animated.timing(opacity, {
        useNativeDriver: true,
        toValue: 0,
        duration: 500,
      }).start(() => {
        onAnimationEnd();
      });
    },
  });

  return (
    <Animated.View {...container} style={[container.style, { opacity }]}>
      <Animated.Image {...logo} />
      <Animated.Image {...brand} />
    </Animated.View>
  );
};
```

--------------------------------

### Asset Generation Warnings and Errors

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Displays console output for common asset generation warnings and fatal license errors.

```text
⚠️  Logo width must be a multiple of 2. It has been rounded to 100dp.
```

```text
⚠️  Logo exceeds 134x134dp. It might be cropped by Android.
```

```text
⚠️  No android/app/src/main/res directory found. Skipping Android assets generation…
```

```text
❌ You need to specify a license key in order to use brand, --dark-background, --dark-logo, --dark-brand.
```

--------------------------------

### Android MainActivity Kotlin Integration (Screens < v4.16.0)

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Initialize RNBootSplash in your Android MainActivity.kt file for projects using react-native-screens older than version 4.16.0. Note the super call argument.

```kotlin
// ⬇️ add these required imports
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

// …

class MainActivity : ReactActivity() {

  // …

  override fun onCreate(savedInstanceState: Bundle?) {
    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
    super.onCreate(null)
  }
}
```

--------------------------------

### iOS Asset Directory Structure

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

The required directory structure for BootSplash assets within the iOS project.

```text
ios/YourApp/
├── BootSplash.storyboard
├── Images.xcassets/
│   ├── BootSplashLogo-{hash}/
│   │   └── Contents.json
│   └── BootSplashBrand-{hash}/ (if provided)
│       └── Contents.json
└── Colors.xcassets/
    ├── BootSplashBackground/
    │   └── Contents.json
    └── BootSplashBackground-{hash}/ (dark mode, if provided)
        └── Contents.json
```

--------------------------------

### Set brand width

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Define the brand width in density-independent pixels, requiring a license key and brand image.

```bash
npx react-native-bootsplash generate logo.svg \
  --license-key "xxxx" \
  --brand ./assets/brand.svg \
  --brand-width 100
```

--------------------------------

### Configure Dark Mode Brand

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the brand image for dark mode, requiring a license key and the brand option.

```json
{
  "brand": "./assets/brand.svg",
  "darkBrand": "./assets/dark-brand.svg",
  "licenseKey": "xxxx-xxxx-xxxx-xxxx"
}
```

--------------------------------

### Retrieve License Key from Environment

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Accesses the license key from the process environment variables.

```typescript
const licenseKey = process.env["BOOTSPLASH_LICENSE_KEY"];
```

--------------------------------

### Configure Brand Width

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Set the brand width at 1x density in density-independent pixels.

```json
{
  "brand": "./assets/brand.svg",
  "brandWidth": 100
}
```

--------------------------------

### Hide BootSplash after Initialization

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/usage-examples.md

Standard pattern to hide the splash screen once application data has finished loading.

```typescript
import { useEffect } from "react";
import BootSplash from "react-native-bootsplash";

export const App = () => {
  useEffect(() => {
    // Do initialization work
    const init = async () => {
      await loadAppData();
    };

    init().finally(() => {
      BootSplash.hide();
    });
  }, []);

  return <AppContent />;
};
```

--------------------------------

### Android MainActivity Kotlin Integration (Screens >= v4.16.0)

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Initialize RNBootSplash in your Android MainActivity.kt file for projects using react-native-screens version 4.16.0 or higher. This includes setting the fragment factory.

```kotlin
// ⬇️ add these required imports
import android.os.Bundle
import com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory
import com.zoontek.rnbootsplash.RNBootSplash

// …

class MainActivity : ReactActivity() {

  // …

  override fun onCreate(savedInstanceState: Bundle?) {
    supportFragmentManager.fragmentFactory = RNScreensFragmentFactory()
    RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState)
  }
}
```

--------------------------------

### Configure Expo Plugin

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/README.md

Add the bootsplash plugin to your app.config.ts to automate asset generation and configuration.

```typescript
import bootsplash from "react-native-bootsplash/expo";

export default {
  plugins: [
    bootsplash({
      logo: "./assets/logo.svg",
      background: "#f5fcff",
    }),
  ],
};
```

--------------------------------

### Configure Expo App Plugin

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/module-structure.md

Add the plugin to your app.json configuration file to enable the Expo plugin.

```json
{
  "plugins": [
    "react-native-bootsplash",
    "react-native-bootsplash/app.plugin.js"
  ]
}
```

--------------------------------

### Expo Plugin Configuration Options

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/README.md

Available configuration properties for the Expo plugin.

```typescript
{
  logo: string;                    // required
  background?: string;             // default: "#fff"
  logoWidth?: number;              // default: 100
  assetsOutput?: string;           // default: "assets/bootsplash"
  brand?: string;                  // requires licenseKey
  brandWidth?: number;             // default: 80
  darkBackground?: string;         // requires licenseKey
  darkLogo?: string;               // requires licenseKey
  darkBrand?: string;              // requires licenseKey
  android?: { darkContentBarsStyle?: boolean };
}
```

--------------------------------

### HTML Structure for BootSplash

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

The required HTML container and style block for the splash screen.

```html
<div id="bootsplash">
  <div id="bootsplash-container">
    <img id="bootsplash-logo" src="data:image/png;base64,..." />
    <img id="bootsplash-brand" src="data:image/png;base64,..." />
  </div>
</div>
<style id="bootsplash-style">
  /* CSS here */
</style>
```

--------------------------------

### react-native-bootsplash generate

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Generates boot splash screen assets from a provided logo file. This command supports various options to customize the output for Android, iOS, and Web platforms.

```APIDOC
## CLI Command: generate

### Description
Generates boot splash assets from a logo file. This command processes the input image and creates the necessary assets for the specified platforms.

### Signature
`react-native-bootsplash generate [options] <logo>`

### Arguments
- **logo** (string) - Required - Path to the logo image file (PNG or SVG format).

### Options
- **--platforms** (string) - Optional - Platforms to generate assets for, separated by commas. Default: "android,ios,web".
- **--background** (string) - Optional - Background color in hexadecimal format. Default: "#fff".
- **--logo-width** (number) - Optional - Logo width at @1x in density-independent pixels. Default: 100.
- **--assets-output** (string) - Optional - Output directory path for generated assets. Default: "assets/bootsplash".
- **--flavor** (string) - Optional - Android build variant. Platform: Android only.
- **--html** (string) - Optional - Path to the HTML template file. Platform: Web only.
- **--plist** (string) - Optional - Path to a custom Info.plist file. Platform: iOS only.
- **--license-key** (string) - Optional - License key to enable brand and dark mode assets generation.
- **--brand** (string) - Optional - Path to the brand image file. Requires --license-key.
- **--brand-width** (number) - Optional - Brand width at @1x in density-independent pixels. Default: 80. Requires --brand and --license-key.

### Usage Example
```bash
npx react-native-bootsplash generate ./assets/logo.svg --background "#ffffff" --logo-width 100
```
```

--------------------------------

### Configure Android System Bars

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Enforce dark content style for Android system bars.

```json
{
  "android": {
    "darkContentBarsStyle": true
  }
}
```

--------------------------------

### Expo App Config - Dynamic Configuration

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/README.md

Configure react-native-bootsplash using dynamic configuration in app.config.js or app.config.ts. Ensure 'platforms' are explicitly defined.

```typescript
import type { ConfigContext, ExpoConfig } from "expo/config";
import bootsplash from "react-native-bootsplash/expo"; // use `require` in app.config.js

export default ({ config }: ConfigContext): ExpoConfig => ({
  // …
  platforms: ["android", "ios", "web"], // must be explicit
  plugins: [
    bootsplash({
      logo: "./assets/logo.png",
      logoWidth: 100,
      background: "#f5fcff",
      // …
    }),
  ],
});
```

--------------------------------

### Plugin Configuration Signature

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/expo-plugin.md

The default export signature for the plugin configuration.

```typescript
export default (
  config: BootSplashPluginConfig
): [typeof PACKAGE_NAME, BootSplashPluginConfig] => 
  [PACKAGE_NAME, config]
```

--------------------------------

### iOS Only with Custom Plist

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Generates assets for iOS using a custom Plist file path.

```bash
npx react-native-bootsplash generate assets/logo.svg \
  --platforms=ios \
  --background="#f5fcff" \
  --logo-width=100 \
  --plist ios/MyApp/Custom.plist
```

--------------------------------

### Generate with Dark Brand

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Adds a dark mode brand image, requiring both a brand and a license key.

```bash
npx react-native-bootsplash generate logo.svg \
  --license-key "xxxx" \
  --brand ./assets/brand.svg \
  --dark-brand ./assets/dark-brand.svg
```

--------------------------------

### Manifest

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/types.md

The Manifest type represents the metadata structure for generated splash screen assets.

```APIDOC
## Manifest

### Description
Metadata about generated splash screen assets, typically loaded from a JSON file generated by the CLI.

### Fields
- **background** (string) - Required - Hexadecimal background color (e.g., "#ffffff")
- **darkBackground** (string) - Optional - Hexadecimal background color for dark mode
- **logo.width** (number) - Required - Logo width in density-independent pixels (dp)
- **logo.height** (number) - Required - Logo height in density-independent pixels (dp)
- **brand.bottom** (number) - Optional - Distance from bottom for brand positioning (Android only, in pixels)
- **brand.width** (number) - Optional - Brand width in density-independent pixels (dp)
- **brand.height** (number) - Optional - Brand height in density-independent pixels (dp)

### Usage Example
```typescript
import type { Manifest } from "react-native-bootsplash";

const manifest: Manifest = require("../assets/bootsplash/manifest.json");
```
```

--------------------------------

### Import Main Module

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/module-structure.md

Use these import statements to access the main library functionality via CommonJS or ES6.

```typescript
// CommonJS
const BootSplash = require("react-native-bootsplash");
const { hide, isVisible } = require("react-native-bootsplash");

// ES6
import BootSplash from "react-native-bootsplash";
import { hide, isVisible, useHideAnimation } from "react-native-bootsplash";
import type { Config, Manifest } from "react-native-bootsplash";
```

--------------------------------

### Generate assets for specific platforms

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Use the --platforms flag to restrict asset generation to specific platforms like ios or web.

```bash
npx react-native-bootsplash generate logo.svg --platforms ios,web
```

--------------------------------

### Expo Plugin Usage

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/module-structure.md

Configuring the plugin within an Expo project configuration file.

```typescript
import bootsplash from "react-native-bootsplash/expo";

export default {
  plugins: [bootsplash({ logo: "./assets/logo.svg" })]
}
```

--------------------------------

### Switching Android Theme for Edge-to-Edge Support

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/MIGRATION.md

Demonstrates the change in Android's `styles.xml` to adopt the new default edge-to-edge theme for BootSplash, replacing older specific edge-to-edge themes.

```diff
<!-- values/styles.xml -->
- <style name="BootTheme" parent="Theme.BootSplash.EdgeToEdge">
+ <style name="BootTheme" parent="Theme.BootSplash">

```

--------------------------------

### BootSplashPluginConfig

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/expo-plugin.md

Configuration object structure for the BootSplash Expo plugin.

```APIDOC
## BootSplashPluginConfig

### Description
Configuration object used to define splash screen assets and styling within the Expo plugin.

### Properties
- **logo** (string) - Required - Path to logo file (PNG or SVG).
- **background** (string) - Optional - Background color in hexadecimal format (Default: "#fff").
- **logoWidth** (number) - Optional - Logo width at @1x in density-independent pixels (Default: 100).
- **assetsOutput** (string) - Optional - Output directory path for generated assets (Default: "assets/bootsplash").
- **brand** (string) - Optional - Path to brand file (PNG or SVG) - requires license key.
- **brandWidth** (number) - Optional - Brand width at @1x in density-independent pixels (Default: 80).
- **darkBackground** (string) - Optional - Dark mode background color in hexadecimal format - requires license key.
- **darkLogo** (string) - Optional - Dark mode logo file path (PNG or SVG) - requires license key.
- **darkBrand** (string) - Optional - Dark mode brand file path (PNG or SVG) - requires license key.
- **android.darkContentBarsStyle** (boolean) - Optional - Enforce system bars (status and navigation bars) style to dark-content.
- **licenseKey** (string) - Optional - License key for addon features (deprecated - use BOOTSPLASH_LICENSE_KEY environment variable).
```

--------------------------------

### hide(config?: { fade?: boolean }): Promise<void>

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/README.md

Hides the splash screen. Optionally accepts a configuration object to enable a fade animation.

```APIDOC
## hide(config?: { fade?: boolean }): Promise<void>

### Description
Hides the native splash screen. This is typically called after the application has finished loading its initial data.

### Parameters
- **config** (object) - Optional - Configuration object.
  - **fade** (boolean) - Optional - Whether to use a fade animation when hiding the splash screen.
```

--------------------------------

### Configure Background Color

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/configuration.md

Define the background color for the splash screen using a hexadecimal color code.

```json
{
  "background": "#f5fcff"
}
```

--------------------------------

### BootSplash.hide

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/api-reference.md

Hides the splash screen. Accepts an optional configuration object to enable fading.

```APIDOC
## BootSplash.hide

### Description
Hides the splash screen. This method returns a promise that resolves once the splash screen is hidden.

### Parameters
- **options** (object) - Optional - Configuration object.
  - **fade** (boolean) - Optional - Whether to use a fade animation when hiding the splash screen.
```

--------------------------------

### Sharp Image Quality Configuration

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Configuration used for processing images via Sharp to maintain maximum fidelity.

```typescript
.png({ quality: 100 })
```

--------------------------------

### Updating Expo App Configuration for Bootsplash

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/MIGRATION.md

Shows how to update the `app.json` file to include the react-native-bootsplash plugin with new configuration options, including specifying platforms explicitly.

```json
// app.json
{
  "expo": {
+   "platforms": ["android", "ios", "web"], // must be explicit
    "plugins": [
-     ["react-native-bootsplash", { "assetsDir": "./assets/bootsplash" }],
+     [
+       "react-native-bootsplash",
+       {
+         "logo": "./assets/logo.png",
+         "background": "#f5fcff",
+         "logoWidth": 100,
+         "assetsOutput": "./assets/bootsplash"
+         // …
+       }
+     ]
    ]
  }
}
```

--------------------------------

### Generate with Dark Logo

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/cli-reference.md

Specifies a dark mode logo file path, requiring a license key.

```bash
npx react-native-bootsplash generate logo.svg \
  --license-key "xxxx" \
  --dark-logo ./assets/dark-logo.svg
```

--------------------------------

### Define Splash Screen Colors

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/asset-generation.md

Set the background color for the splash screen in light and dark mode resource files.

```xml
<color name="bootsplash_background">#f5fcff</color>
```

```xml
<color name="bootsplash_background">#00090a</color>
```

--------------------------------

### Config

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/types.md

The Config type defines the options available when hiding the splash screen.

```APIDOC
## Config

### Description
Configuration object passed to the `hide()` function to control splash screen removal behavior.

### Fields
- **fade** (boolean) - Optional - Whether to fade out the splash screen over 250ms before removing it. Default: false

### Usage Example
```typescript
import { hide, type Config } from "react-native-bootsplash";

const config: Config = { fade: true };
await hide(config);
```
```

--------------------------------

### Retrieve Constants for UI Scaling

Source: https://github.com/zoontek/react-native-bootsplash/blob/master/_autodocs/native-module.md

Access native constants on mount to adjust assets and layout dimensions based on device-specific values.

```typescript
const [
  {
    darkModeEnabled,
    logoSizeRatio = 1,
    navigationBarHeight = 0,
    statusBarHeight = 0,
  },
] = useState(() => NativeModule.getConstants());
```
Tokens:
Raw