[RN] React Native Bootsplash

React Native Bootsplash

[ react-native-bootsplash 공식문서 ]

모바일 애플리케이션에 스플래시 화면과 앱 아이콘을 추가하기 위한 훌륭한 옵션입니다.

그것은 즉시 스플래시 화면과 앱 아이콘을 생성하는 데 활용할 수 있는 CLI와 함께 제공됩니다.

자세히 살펴봅시다.

S.W. ( vs. react-native-splash-screen )

Strong

• CLI assets generator 와 함께 제공된다.
• assets generator를 사용하여 다양한 크기의 앱 아이콘을 생성할 수 있다.
• assets generator를 사용하여 적절한 크기의 splash screen을 생성하고, CLI의 명령으로 splash screen을 사용자 정의할 수 있다.
• CLI는 자동으로 Android Drawable XML 파일을 자동으로 생성한다.
• 사용자가 splash screen의 화면 지속 시간을 지정할 수 있다.
• API를 사용하면 Jest와 같은 라이브러리를 사용하여 쉽게 테스트 할 수 있다.
• 132kB의 비교적 작은 번들 크기를 가지고 있다.

---

Weak

• 라이브러리가 단독 개발자에 의해 개발되고 기여자가 상대적으로 적다.
• 사용자는 Android 및 iOS용 splash screen을 구성해야 한다.
• 구성이 길고 iOS 용 Xcode를 사용해야 한다.
• .gif 확장자 파일과 애니메이션을 허용하지 않는다.
• Expo CLI 환경은 지원하지 않는다.

---

Supplies

Splash Screen에 사용할 4096px x 4096px 로고 이미지 ( .png, .svg ) 파일

---

Setup

Installation

$ npm install react-native-bootsplash

+ cd ios && pod install

# --- or ---

$ yarn add react-native-bootsplash

+ cd ios && pod install

---

Assets Generation

$ npx react-native generate-bootsplash [Logo_path] \ [options]

+ cd ios && pod install

# --- or ---

$ yarn react-native generate-bootsplash [Logo_path] \ [options]

+ cd ios && pod install

Logo_path :

Project Root 로부터 Logo 파일 위치

예시 ) . / assets / images / logo_ss.png

Options :

--platforms <list>          Platforms to generate for, separated by a comma (default: "android,ios,web")
--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
--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: "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

---

Example :

yarn react-native generate-bootsplash svgs/light_logo.svg \
  --platforms=android,ios,web \
  --background=F5FCFF \
  --logo-width=100 \
  --assets-output=assets \
  --flavor=main \
  --html=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

>> Android 

android/app/src/main/res/values/colors.xml
android/app/src/main/res/drawable-hdpi/bootsplash_logo.png
android/app/src/main/res/drawable-mdpi/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

>> iOS

ios/RNBootSplashExample/BootSplash.storyboard
ios/RNBootSplashExample.xcodeproj/project.pbxproj
ios/RNBootSplashExample/Info.plist
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/Contents.json
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo-<hash>.png
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo-<hash>@2x.png
ios/RNBootSplashExample/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo-<hash>@3x.png

>> Web

index.html

>> Assets
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

>> With licence key
{...}


# Thanks for using react-native-bootsplash
# Done in 2.75s.

---

Android

styles.xml 수정

android/app/src/main/res/values/styles.xml

<resources>

  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <!-- Your base theme customization -->
  </style>

  <!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
  <style name="BootTheme" parent="Theme.BootSplash">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
    <item name="bootSplashBrand">@drawable/bootsplash_brand</item> <!-- Only if you have a brand image -->
    <item name="postBootSplashTheme">@style/AppTheme</item>
  </style>

</resources>

---

AndroidManifest.xml 수정

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- … -->

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme"> <!-- Apply @style/AppTheme on .MainApplication -->
    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustResize"
      android:exported="true"
      android:theme="@style/BootTheme"> <!-- Apply @style/BootTheme on .MainActivity -->
      <!-- … -->
    </activity>
  </application>
</manifest>

---

MainActivity.{java,kt} 수정

android/app/src/main/java/com/yourprojectname/MainActivity.{java,kt}

MainActivity.java (react-native < 0.73)

// …

// add these required imports:
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  // …

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this, R.style.BootTheme); // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState); // super.onCreate(null) with react-native-screens
  }
}

MainActivity.kt (react-native >= 0.73)

// …

// 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) // super.onCreate(null) with react-native-screens
  }
}

---

iOS

AppDelegate.mm 수정

ios / [ ProjectName ] / AppDelegate.mm

#import "AppDelegate.h"
#import "RNBootSplash.h" // ⬅️ add the header import

// …

@implementation AppDelegate

// …

// ⬇️ Add this before file @end (for react-native 0.74+)
- (void)customizeRootView:(RCTRootView *)rootView {
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen
}

// OR

// ⬇️ Add this before file @end (for react-native < 0.74)
- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
                          moduleName:(NSString *)moduleName
                           initProps:(NSDictionary *)initProps {
  UIView *rootView = [super createRootViewWithBridge:bridge moduleName:moduleName initProps:initProps];
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen
  return rootView;
}

@end

Usage

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

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

const App = () => {
  useEffect(() => {
    const init = async () => {
      // …do multiple sync or async tasks
    };

    init().finally(async () => {
      await BootSplash.hide({ fade: true });
      console.log("BootSplash has been hidden successfully");
    });
  }, []);

  return <Text>My awesome app</Text>;
};


------- 사용법 -------
  

import BootSplash from "react-native-bootsplash";

type isVisible = () => Promise<boolean>;

BootSplash.isVisible().then((value) => console.log(value));

---

With React Navigation

import { NavigationContainer } from "@react-navigation/native";
import BootSplash from "react-native-bootsplash";

const App = () => (
  <NavigationContainer
    onReady={() => {
      BootSplash.hide();
    }}
  >
    {/* content */}
  </NavigationContainer>
);

---

Test With Jest

jest/setup.js (or any other file name)

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

jest.config

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

---

Status Bar Transparent

values.styles.xml

- <resources>
+ <resources xmlns:tools="http://schemas.android.com/tools">

  <style name="BootTheme" parent="Theme.BootSplash">
    <!-- … -->

+   <!-- Apply color + style to the status bar (true = dark-content, false = light-content) -->
+   <item name="android:statusBarColor" tools:targetApi="m">@color/bootsplash_background</item>
+   <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
  </style>

edge-to-edge layout

values.styles.xml

- <style name="BootTheme" parent="Theme.BootSplash">
+ <style name="BootTheme" parent="Theme.BootSplash.EdgeToEdge">

---