Feature/62 rn splash screen

App.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import BottomTabNavigator from './src/navigation/BottomTabNavigator';
-import { useState } from 'react';
 import { RootStackParamList } from './types/navigation';
 import SignIn from './src/pages/auth/SignIn';
 import SignUp from './src/pages/auth/SignUp';
 import SignInComplete from './src/pages/auth/SignInComplete';
 import AlarmSettings from './src/pages/auth/AlarmSettingsPage';
 import NicknamePage from './src/pages/auth/NicknamePage';
 import AlarmPage from './src/pages/main/AlarmPage';
+import RNBootSplash from 'react-native-bootsplash';
 
 export type LoggedInParamList = {
   Orders: undefined;
@@ -23,14 +24,16 @@ const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
 function App() {
+  useEffect(() => {
+    RNBootSplash.hide({ fade: true });
+  }, []);
+
   console.log('App 렌더링됨');
   const MyTheme = {
     ...DefaultTheme,
     colors: { ...DefaultTheme.colors, background: '#fff' },
   };
 
-  const [isTaskStarted, setIsTaskStarted] = useState(true);
-  const [isLoggedIn, setLoggedIn] = useState(false);
   return (
     <NavigationContainer theme={MyTheme}>
       <Stack.Navigator id="stack">

android/app/src/main/AndroidManifest.xml

@@ -1,27 +1,27 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET" />
 
-    <uses-permission android:name="android.permission.INTERNET" />
-
-    <application
-      android:name=".MainApplication"
+  <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"
+    android:usesCleartextTraffic="${usesCleartextTraffic}"
+    android:supportsRtl="true">
+    <activity
+      android:name=".MainActivity"
       android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
-      android:theme="@style/AppTheme"
-      android:usesCleartextTraffic="${usesCleartextTraffic}"
-      android:supportsRtl="true">
-      <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">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-    </application>
+      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+      android:launchMode="singleTask"
+      android:windowSoftInputMode="adjustResize"
+      android:exported="true"
+      android:theme="@style/BootTheme">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
+    </activity>
+  </application>
 </manifest>

android/app/src/main/java/com/oil/MainActivity.kt

@@ -1,9 +1,11 @@
 package com.oil
 
+import android.os.Bundle
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
+import com.zoontek.rnbootsplash.RNBootSplash
 
 class MainActivity : ReactActivity() {
 
@@ -13,6 +15,11 @@ class MainActivity : ReactActivity() {
    */
   override fun getMainComponentName(): String = "OIL"
 
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    RNBootSplash.init(this)
+  }
+
   /**
    * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
    * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]

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

@@ -0,0 +1,3 @@
+<resources>
+    <color name="bootsplash_background">#ffffff</color>
+</resources>

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

@@ -1,9 +1,12 @@
 <resources>
-
-    <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>
 
+    <style name="BootTheme" parent="Theme.BootSplash">
+        <item name="bootSplashBackground">@color/bootsplash_background</item>
+        <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
+        <item name="postBootSplashTheme">@style/AppTheme</item>
+    </style>
 </resources>

assets/bootsplash/manifest.json

@@ -0,0 +1,7 @@
+{
+  "background": "#ffffff",
+  "logo": {
+    "width": 160,
+    "height": 120
+  }
+}