plugin-splash-screen

The “plugin-splash-screen” package is an essential component within the Flagship Code ecosystem, meticulously crafted to simplify the creation of splash screens for iOS and Android projects. Leveraging its robust functionality, developers can effortlessly generate a personalized splash screen using a logo or link pre-defined assets, which are then seamlessly copied to their native projects. This plugin streamlines the entire process, enabling developers to create captivating splash screens with ease while ensuring consistency across platforms.

Install

Add @brandingbrand/code-plugin-splash-screen as a development dependency to your React Native project.

yarn add --dev @brandingbrand/code-plugin-splash-screen

npm install --save-dev @brandingbrand/code-plugin-splash-screen

pnpm add --save-dev @brandingbrand/code-plugin-splash-screen

bun add --dev @brandingbrand/code-plugin-splash-screen

Your package.json should now be updated, @brandingbrand/code-plugin-splash-screen should be listed as a devDependency.

{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "author": "Your Name <email@example.com>",
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "~0.72.0"
  },
  "devDependencies": {
    "@brandingbrand/code-plugin-splash-screen": "2.0.0"
  }
}

Configure

Flagship Code Configuration

Upon installing the dependency, it is imperative to update the flagship-code.config.ts file. Specifically, ensure that the plugins array includes the newly installed dependency. This step is crucial, as Flagship Code will only invoke the plugin if it is listed within this array. By including the dependency in the plugins array, you enable Flagship Code to recognize and utilize the functionality provided by the plugin during project execution.

import { defineConfig } from "@brandingbrand/code-cli-kit";

export default defineConfig({
  buildPath: "./coderc/build",
  envPath: "./coderc/env",
  pluginPath: "./coderc/plugins",
  preset: "@brandingbrand/code-preset-react-native",
  plugins: [
    // other plugins
    "@brandingbrand/code-plugin-splash-screen",
  ],
});

For more detailed guidance and information, please refer to the Flagship Code Configuration guide. This resource offers comprehensive instructions and insights to assist you in configuring Flagship Code effectively.

Build Configuration

Depending on the plugin being utilized, additional configuration may be required. In the case of the plugin-splash-screen, it’s essential to incorporate a mandatory configuration into the build settings. This configuration involves specifying the type of splash screen assets that need to be generated.

For the purpose of illustration, the build.internal.ts configuration shall be presented as follows with the generated splash screen:

import { defineBuild } from "@brandingbrand/code-cli-kit";
import { type CodePresetReactNative } from "@brandingbrand/code-preset-react-native";
import { type CodePluginSplashScreen } from "@brandingbrand/code-plugin-splash-screen";

export default defineBuild<CodePresetReactNative & CodePluginSplashScreen>({
  ios: {
    bundleId: "com.brandingbrand",
    displayName: "Branding Brand",
  },
  android: {
    packageName: "com.brandingbrand",
    displayName: "Branding Brand",
  },
  codePluginSplashScreen: {
    plugin: {
      ios: {
        type: "generated",
        generated: {
          logoPath: "./coderc/assets/splash-screen/logo.png",
          backgroundColor: "#fff",
        },
      },
      android: {
        type: "generated",
        generated: {
          logoPath: "./coderc/assets/splash-screen/logo.png",
          backgroundColor: "#fff",
        },
      },
    },
  },
});

For the purpose of illustration, the build.internal.ts configuration shall be presented as follows with the legacy splash screen:

import { defineBuild } from "@brandingbrand/code-cli-kit";
import { type CodePresetReactNative } from "@brandingbrand/code-preset-react-native";
import { type CodePluginSplashScreen } from "@brandingbrand/code-plugin-splash-screen";

export default defineBuild<CodePresetReactNative & CodePluginSplashScreen>({
  ios: {
    bundleId: "com.brandingbrand",
    displayName: "Branding Brand",
  },
  android: {
    packageName: "com.brandingbrand",
    displayName: "Branding Brand",
  },
  codePluginSplashScreen: {
    plugin: {
      ios: {
        type: "legacy",
        legacy: {
          xcassetsDir: "",
          xcassetsFile: "",
          storyboardFile: "",
        },
      },
      android: {
        type: "legacy",
        legacy: {
          assetsDir: "",
        },
      },
    },
  },
});

Options

`codePluginSplashScreen.plugin.ios`

type: SplashScreenIOSLegacy | SplashScreenIOSGenerated

Optional iOS splash screen configuration.

`SplashScreenIOSLegacy`

`type`

type: "legacy"

required

Specifies that the splash screen is of type “legacy”.

`legacy.xcassetsDir`

type: string

required

The path to the legacy splash screen.

`legacy.xcassetsFile`

type: string

required

The name of the xcassets file for the legacy splash screen.

`legacy.storyboardFile`

The name of the storyboard file for the legacy splash screen. This is required becasue the default is LaunchScreen.storyboard which could different from the name of the file supplied.

`SplashScreenIOSGenerated`

`type`

type: "generated"

required

Specifies that the splash screen is of type “generated”.

`generated.logoPath`

type: string

required

The path to the logo image for the generated splash screen.

`generated.backgroundColor`

type: string

required

The background color for the generated splash screen.

`codePluginSplashScreen.plugin.android`

type: SplashScreenAndroidLegacy | SplashScreenAndroidGenerated

Optional iOS splash screen configuration.

`SplashScreenAndroidLegacy`

`type`

type: "legacy"

required

Specifies that the splash screen is of type “legacy”.

`legacy.assetsDir`

type: string

required

The path to the legacy splash screen.

`SplashScreenAndroidGenerated`

`type`

type: "generated"

required

Specifies that the splash screen is of type “generated”.

`generated.logoPath`

type: string

required

The path to the logo image for the generated splash screen.

`generated.backgroundColor`

type: string

required

The background color for the generated splash screen.