Template version: v0.2.2

`react-native-bootsplash`

[!TIP] GitHub address

Installation and Usage

Find the matching version information in the release address of a third-party library: @react-native-oh-tpl/react-native-bootsplash Releases. For older versions that are not published to npm, please refer to the installation guide to install the tgz package.

Go to the project directory and execute the following instruction:

npm

npm install @react-native-oh-tpl/react-native-bootsplash

yarn

yarn add @react-native-oh-tpl/react-native-bootsplash

Generating a Configuration File

To speed up the setup, a CLI is provided to automatically generate configurations and create Android Drawable XML files, iOS Storyboard files, and HarmonyOS Resources files.

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

This command can use multiple parameters:

Usage: react-native generate-bootsplash [options] <logo>

Generate a launch screen using a logo file path (PNG or SVG)

Options:
  --project-type <string>     Project type ("detect", "bare" or "expo") (default: "detect")
  --platforms <list>          Platforms to generate for, separated by a comma (default: "android,ios,web,harmony")
  --background <string>       Background color (in hexadecimal format) (default: "#fff")
  --logo-width <number>       Logo width at @1x (in dp - we recommend approximately ~100) (default: 100)
  --assets-output <string>    Assets output directory path (default: "assets/bootsplash")
  --flavor <string>           Android flavor build variant (where your resource directory is) (default: "main")
  --html <string>             HTML template file path (your web app entry point) (default: "public/index.html")
  --license-key <string>      License key to enable brand and dark mode assets generation
  --brand <string>            Brand file path (PNG or SVG)
  --brand-width <number>      Brand width at @1x (in dp - we recommend approximately ~80) (default: 80)
  --dark-background <string>  [dark mode] Background color (in hexadecimal format)
  --dark-logo <string>        [dark mode] Logo file path (PNG or SVG)
  --dark-brand <string>       [dark mode] Brand file path (PNG or SVG)
  -h, --help                  display help for command

Command example:

# Without license key
npx react-native generate-bootsplash svgs/light-logo.svg

After the command is executed, the following files are created:

# Without license key
android/app/src/main/res/drawable-mdpi/bootsplash_logo.png
android/app/src/main/res/drawable-hdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xhdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xxhdpi/bootsplash_logo.png
android/app/src/main/res/drawable-xxxhdpi/bootsplash_logo.png
android/app/src/main/AndroidManifest.xml
android/app/src/main/res/values/colors.xml
android/app/src/main/res/values/styles.xml

ios/YourApp/BootSplash.storyboard
ios/YourApp/Colors.xcassets/BootSplashBackground-<hash>.colorset/Contents.json
ios/YourApp/Images.xcassets/BootSplashLogo-<hash>.imageset/Contents.json
ios/YourApp/Images.xcassets/BootSplashLogo-<hash>.imageset/logo-<hash>.png
ios/YourApp/Images.xcassets/BootSplashLogo-<hash>.imageset/logo-<hash>@2x.png
ios/YourApp/Images.xcassets/BootSplashLogo-<hash>.imageset/logo-<hash>@3x.png
ios/YourApp/Info.plist
ios/YourApp.xcodeproj/project.pbxproj

harmony/entry/src/main/resources/base/media/bootsplash_logo.png
harmony/entry/src/main/resources/base/element/color.json
harmony/entry/src/main/module.json5

public/index.html

assets/bootsplash/manifest.json
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

Edit the startup ability file, which is usually the first ability configured in the abilities property in the module.json5 file of the entry module.

+ import { window } from '@kit.ArkUI';
+ import { RNBootSplashScreen } from '@react-native-oh-tpl/react-native-bootsplash/src/main/ets/RNBootSplashScreen';

export default class EntryAbility extends RNAbility {
+  onWindowStageCreate(windowStage: window.WindowStage) {
+     RNBootSplashScreen.init(this.context, windowStage).then(() => {
+       super.onWindowStageCreate(windowStage);
+     })
+  }

  ...
}

The following code shows the basic use scenario of the repository:

[!WARNING] The name of the imported repository remains unchanged.

[!TIP] The logo parameter is used to obtain local images from react-native-boot-splash demo.

import { useState, useEffect } from "react";
import {
  Animated,
  View,
  Text,
  Dimensions,
  Platform,
  StatusBar,
  StyleSheet,
} from "react-native";
import BootSplash from "react-native-bootsplash";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  text: {
    fontSize: 30,
    fontWeight: "700",
    margin: 20,
    lineHeight: 30,
    color: "#333",
    textAlign: "center",
  },
});

type Props = {
  onAnimationEnd: () => void,
};

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

  const { container, logo /*, brand */ } = BootSplash.useHideAnimation({
    manifest: require("../source/bootsplash_manifest.json"),
    logo: require("../source/bootsplash_logo.png"),
    statusBarTranslucent: true,
    navigationBarTranslucent: false,

    animate: () => {
      const { height } = Dimensions.get("window");
      Animated.stagger(250, [
        Animated.spring(translateY, {
          useNativeDriver: true,
          toValue: -50,
        }),
        Animated.spring(translateY, {
          useNativeDriver: true,
          toValue: height,
        }),
      ]).start();
      Animated.timing(opacity, {
        useNativeDriver: true,
        toValue: 0,
        duration: 150,
        delay: 350,
      }).start(() => {
        onAnimationEnd();
      });
    },
  });

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

const App = () => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    StatusBar.setBarStyle("dark-content");
  }, []);

  return (
    <>
      <View style={styles.container}>
        <Text style={styles.text}>Hello World</Text>
        {visible && (
          <AnimatedBootSplash
            onAnimationEnd={() => {
              BootSplash.isVisible();
              console.log("--------++++AnimationEnd");
              setVisible(false);
            }}
          />
        )}
      </View>
    </>
  );
};

export default App;

// bootsplash_manifest.json
{
  "background": "#F5FCFF",
  "logo": {
    "width": 300,
    "height": 89
  }
}

Use Codegen

If this repository has been adapted to Codegen, generate the bridge code of the third-party library by using the Codegen. For details, see Codegen Usage Guide.

Link

Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking.

Open the harmony directory of the HarmonyOS project in DevEco Studio.

1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2. Introducing Native Code

Currently, two methods are available:

Method 1 (recommended): Use the HAR file.

[!TIP] The HAR file is stored in the harmony directory in the installation path of the third-party library.

Open entry/oh-package.json5 file and add the following dependencies:

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-oh-tpl/react-native-bootsplash": "file:../../node_modules/@react-native-oh-tpl/react-native-bootsplash/harmony/boot_splash.har"
  }

Click the sync button in the upper right corner.

Alternatively, run the following instruction on the terminal:

cd entry
ohpm install

Method 2: Directly link to the source code.

[!TIP] For details, see Directly Linking Source Code.

3. Introducing RNBootSplashPackage to ArkTS

Open the entry/src/main/ets/RNPackagesFactory.ts file and add the following code:

  ...
+ import { RNBootSplashPackage } from '@react-native-oh-tpl/react-native-bootsplash/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new RNBootSplashPackage(ctx)
  ];
}

4. Running

Click the sync button in the upper right corner.

Alternatively, run the following instruction on the terminal:

cd entry
ohpm install

Then build and run the code.

Constraints

Compatibility

To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.

Check the release version information in the release address of the third-party library: @react-native-oh-tpl/react-native-bootsplash Releases

API

[!tip] The Platform column indicates the platform where the properties are supported in the original third-party library.

[!tip] If the value of HarmonyOS Support is yes, it means that the HarmonyOS platform supports this property; no means the opposite; partially means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.

Name	Description	Type	Required	Platform	HarmonyOS Support
hide	Hide the splash screen.	function	no	Android/iOS	yes
isVisible	Return the current visibility status of the native splash screen.	function	no	Android/iOS	yes
useHideAnimation	A 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).	function	no	Android/iOS	yes

hide

type hide = (config?: { fade?: boolean }) => Promise<void>;

Name	Description	Type	Required	Platform	HarmonyOS Support
fade	Hide the splash screen (immediately, or with a fade out).	boolean	No	iOS/Android	partially

useHideAnimation

useHideAnimation(config: {UseHideAnimationConfig}) => {container: ContainerProps;logo: LogoProps;brand: BrandProps;};

Name	Description	Type	Required	Platform	HarmonyOS Support
ready	a boolean flag to delay the animate execution (default: true)	boolean	No	iOS/Android	partially
manifest	the manifest file is generated in your assets directory	Manifest	Yes	iOS/Android	partially
logo	logo image in animation	ImageRequireSource	No	iOS/Android	partially
darkLogo	logo image in animation in dark mode	ImageRequireSource	No	iOS/Android	partially
brand	brand image in animation	ImageRequireSource	No	iOS/Android	partially
darkBrand	brand image in animation in dark mode	ImageRequireSource	No	iOS/Android	partially
statusBarTranslucent	sets whether the status bar is transparent	boolean	No	iOS/Android	partially
navigationBarTranslucent	sets whether the navigation bar is transparent	boolean	No	iOS/Android	partially
animate	custom hide animation	function	Yes	iOS/Android	partially

Known Issues

The animation property cannot be set in the HarmonyOS window, because setting the fade parameter of the hide API to true does not take effect. issue#13

Others

When the generate-bootsplash command is executed, the --brand, --brand-width, and --dark-* options can be used only after a license is purchased. The involved functions are not open-source and are not supported by the HarmonyOS platform.

License

This project is licensed under The MIT License (MIT).

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`react-native-bootsplash`

Installation and Usage

npm

yarn

Generating a Configuration File

Use Codegen

Link

1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project

2. Introducing Native Code

3. Introducing RNBootSplashPackage to ArkTS

4. Running

Constraints

Compatibility

API

hide

useHideAnimation

Known Issues

Others

License

FilesExpand file tree

en.md

Latest commit

History

en.md

File metadata and controls

react-native-bootsplash

Installation and Usage

npm

yarn

Generating a Configuration File

Use Codegen

Link

1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project

2. Introducing Native Code

3. Introducing RNBootSplashPackage to ArkTS

4. Running

Constraints

Compatibility

API

hide

useHideAnimation

Known Issues

Others

License

`react-native-bootsplash`