@sekizlipenguen/react-native-splash-helper v0.0.1

@sekizlipenguen/react-native-splash-helper

A lightweight React Native library to automatically configure splash screens for both Android and iOS platforms. Simplifies the splash screen setup process for developers.

Features

• Automatic Splash Screen Setup: Configures splash screens for both Android and iOS with minimal setup.
• Theme Detection: Automatically detects application and activity themes in AndroidManifest.xml.
• Cross-Platform Support: Works seamlessly on macOS, Linux, and Windows.
• Customizable: Easily define splash image and background color through a simple configuration.

Installation

Install the library using Yarn or npm:

YARN

yarn add @sekizlipenguen/react-native-splash-helper --dev

NPM

npm install @sekizlipenguen/react-native-splash-helper --save-dev

Note: The xml2js package is included as a dependency and used internally.

Configuration

Configuration Options

To configure the splash helper, add a section to your react-native.config.js file:

module.exports = {
  dependencies: {},
  '@sekizlipenguen/react-native-splash-helper': {
    android: {
      splashImage: './assets/splash_image.png' // Path to your splash image
    },
    ios: {
      splashImage: './assets/splash_image.png'  // Path to your splash image
    }
  }
};

Usage

Run the following command to generate the splash screens:

npx @sekizlipenguen/react-native-splash-helper generate-splash

What It Does

1. Android:

   • Updates styles.xml to include the android:windowBackground property for detected themes.
   • Updates or creates colors.xml with the specified background color.
   • Generates the drawable resource for the splash screen.
   • Updates the AndroidManifest.xml to ensure consistency in theme configuration.

2. iOS:

   • Updates the LaunchScreen.storyboard file with the splash image and background color.
   • Creates the necessary image assets in the Images.xcassets directory.

Example

Android Output

• Updates the following in styles.xml:

  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <item name="android:windowBackground">@drawable/splash_background</item>
  </style>

• Updates or creates colors.xml:

  <resources>
      <color name="splash_background">#ffffff</color>
  </resources>

• Creates splash_background.xml in drawable:

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:drawable="@color/splash_background" />
      <item>
          <bitmap android:gravity="fill" android:src="@drawable/splash_image" />
      </item>
  </layer-list>

iOS Output

• Updates LaunchScreen.storyboard with:

  <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" ...>
      <scene>
          ...
          <view key="view" contentMode="scaleToFill">
              <color key="backgroundColor" systemColor="systemBackgroundColor" />
              <subviews>
                  <imageView contentMode="scaleAspectFill" image="splash_image" ... />
              </subviews>
          </view>
      </scene>
  </document>

Screenshots

Splash Screen Example

Notes

• Make sure your splash image is available at the specified path.
• If any required file (e.g., styles.xml, colors.xml) does not exist, it will be created automatically.
• The script is non-destructive and will not overwrite existing configurations unless necessary.

Contributing

Contributions are welcome! Please submit an issue or pull request on the GitHub repository.

License

MIT © Sekizli Penguen