Neverending Perpetual Motion

    react-native-bootsplash-cli-fork
    TypeScript icon, indicating that this package has built-in type declarations

    4.3.2 • Public • Published

    react-native-bootsplash-cli-fork

    npm version npm MIT Platform - Android Platform - iOS

    This is a fork of react-native-bootsplash CLI. Fork allows generating dark mode splash screens. Fork is based on original react-native-bootsplash CLI with following changes:

    • New parameter: --dark-logo [path], allows to specify different logo for dark mode themes
    • New parameter: --dark-background-color [color], allows to specify different background color for dark mode themes

    Note: this is NOT a fork/replacement of react-native-bootsplash itself! You still need to install and configure react-native-bootsplash according to instructions. This library could be used as a replacement of Assets generation step.

    Installation

    $ npm install --save react-native-bootsplash-cli-fork
    # --- or ---
    $ yarn add react-native-bootsplash-cli-fork

    Usage

    CLI could generate assets, create the Android Drawable XML file and the iOS Storyboard file automatically .

    $ npx react-native generate-bootsplash-fork --help
    # --- or ---
    $ yarn react-native generate-bootsplash-fork --help

    The command can take multiple arguments:

    yarn react-native generate-bootsplash-fork <logoPath>
    
    Generate a launch screen using an original logo file
    
    Options:
      --background-color <color>       color used as launch screen background (in hexadecimal format) (default: "#fff")
      --logo-width <width>             logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
      --assets-path [path]             path to your static assets directory (useful to require the logo file in JS)
      --flavor <flavor>                [android only] flavor build variant (outputs in an android resource directory other than "main")
      --dark-logo [path]          [optional] if specified, will be used for splashscreen that is shown when phone is in dark mode
      --dark-background-color <color>  [optional] color used as launch screen background when phone is in dark mode (in hexadecimal format) (default: "#000"). Only used if --dark-logo-path is set!
      -h, --help                  output usage information

    Full command usage example

    yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \
      --background-color=F5FCFF \
      --dark-logo=assets/bootsplash_logo_dark.png \
      --logo-width=100 \
      --assets-path=assets \
      --flavor=main

    This tool generates assets that could later be used by react-native-bootsplash:

    # Only if --assets-path was specified
    assets/bootsplash_logo.png
    assets/bootsplash_logo@1,5x.png
    assets/bootsplash_logo@2x.png
    assets/bootsplash_logo@3x.png
    assets/bootsplash_logo@4x.png
    # if dark logo is specified
    assets/bootsplash_logo_dark.png
    assets/bootsplash_logo_dark@1,5x.png
    assets/bootsplash_logo_dark@2x.png
    assets/bootsplash_logo_dark@3x.png
    assets/bootsplash_logo_dark@4x.png
    
    android/app/src/main/res/values/colors.xml (creation and addition)
    android/app/src/main/res/values-night/colors.xml
    android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png
    android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png
    android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png
    android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png
    android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png
    # if dark logo is specified
    android/app/src/main/res/mipmap-hdpi/bootsplash_logo_dark.png
    android/app/src/main/res/mipmap-mdpi/bootsplash_logo_dark.png
    android/app/src/main/res/mipmap-xhdpi/bootsplash_logo_dark.png
    android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo_dark.png
    android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo_dark.png
    
    
    ios/YourProjectName/BootSplash.storyboard
    ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png
    ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png
    ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png
    # if dark logo is specified
    ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo_dark.png
    ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo_dark@2x.png
    ios/YourProjectName/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo_dark@3x.png

    If you want to have different splashscreen in Dark Mode, also create/edit the android/app/src/main/res/values-night/styles.xml:

    <resources>
      <!-- BootTheme should inherit from Theme.SplashScreen -->
      <style name="BootTheme" parent="Theme.SplashScreen">
        <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo_dark</item>
        <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
        <item name="postSplashScreenTheme">@style/AppTheme</item>
      </style>
    
    </resources>

    Install

    npm i react-native-bootsplash-cli-fork

    DownloadsWeekly Downloads

    497

    Version

    4.3.2

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    17

    Last publish

    Collaborators

    • shaddix