feat: Add splash & screens

App.js

@@ -1,25 +1,64 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
+import SplashScreen from 'react-native-splash-screen';
 
 //Screens
-import HomeScreen from './src/screens/HomeScreen';
+import Start from './src/screens/StartScreen';
+import Story from './src/screens/StoryScreen';
+import Game from './src/screens/GameScreen';
+import Explore from './src/screens/ExploreScreen';
+import Settings from './src/screens/Settings';
 
 //Tabs
 import NavTab from './src/screens/NavTabs';
 
-const Stack = createStackNavigator();
+const MainStack = createStackNavigator();
 
 const App = () => {
+  useEffect(() => {
+    SplashScreen.hide();
+  }, []);
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName={'Home'}>
-        <Stack.Screen
+      <MainStack.Navigator
+        initialRouteName={'Home'}
+        headerMode="none"
+        screenOptions={{
+          headerShown: false,
+        }}>
+        <MainStack.Screen 
+          name="Start"
+          component={Start}
+          options={{headerShown: false}}
+        />
+        <MainStack.Screen
           name="NavTab"
           component={NavTab}
           options={{headerShown: false}}
         />
-      </Stack.Navigator>
+        <MainStack.Screen
+          name="Story"
+          component={Story}
+          options={{headerShown: false}}
+        />
+        <MainStack.Screen
+        name="Game"
+        component={Game}
+        options={{headerShown: false}}
+      />
+        <MainStack.Screen
+          name="Explore"
+          component={Explore}
+          options={{headerShown: false}}
+        />
+
+        <MainStack.Screen
+          name="Settings"
+          component={Settings}
+          options={{headerShown: false}}
+        />
+      </MainStack.Navigator>
     </NavigationContainer>
   );
 };

android/app/build.gradle

@@ -134,6 +134,7 @@ android {
         applicationId "com.marimo"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
+        missingDimensionStrategy 'react-native-camera', 'general' 
         versionCode 1
         versionName "1.0"
     }
@@ -210,6 +211,8 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+    compile project(':@react-native-community_cameraroll')
+
 }
 
 // Run this once to be able to run the application with BUCK
@@ -220,3 +223,10 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+
+
+ext {    
+    react = [
+        nodeExecutableAndArgs:  ["/usr/local/bin/node"]
+    ]
+}

android/app/src/main/AndroidManifest.xml

@@ -7,19 +7,31 @@
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
+      android:roundIcon="@mipmap/ic_launcher"
       android:allowBackup="false"
       android:theme="@style/AppTheme">
+
+      <!-- SplashActivity를 추가하시면 됩니다. -->
+      <activity
+          android:name=".SplashActivity"
+          android:theme="@style/SplashTheme"
+          android:label="@string/app_name">
+          <intent-filter>
+              <action android:name="android.intent.action.MAIN" />
+              <category android:name="android.intent.category.LAUNCHER" />
+          </intent-filter>
+        </activity>
+
+      <!-- MainActivity안에 있는 intent-filter를 제거해주시고, android:exported="true"를 추가해주시면 됩니다. -->
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
+        android:windowSoftInputMode="adjustResize"
+        android:exported="true"/>
+
+      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
-</manifest>
+
+</manifest>

android/app/src/main/java/com/marimo/MainActivity.java

@@ -1,13 +1,20 @@
 package com.marimo;
 
 import com.facebook.react.ReactActivity;
+import org.devio.rn.splashscreen.SplashScreen;
+import android.os.Bundle;
 
 public class MainActivity extends ReactActivity {
 
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.
    */
+  @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        SplashScreen.show(this);
+        super.onCreate(savedInstanceState);
+    }
   @Override
   protected String getMainComponentName() {
     return "Marimo";

android/app/src/main/java/com/marimo/MainApplication.java

@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.BV.LinearGradient.LinearGradientPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/app/src/main/java/com/marimo/SplashActivity.java

@@ -0,0 +1,16 @@
+package com.marimo;
+
+import android.content.Intent;
+import android.os.Bundle;
+import androidx.appcompat.app.AppCompatActivity;
+
+public class SplashActivity extends AppCompatActivity {
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        Intent intent = new Intent(this, MainActivity.class);
+        startActivity(intent);
+        finish();
+    }
+}

android/app/src/main/res/drawable/background_splash.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:drawable="@color/splashscreen_bg"/>
+
+    <item
+        android:width="300dp"
+        android:height="300dp"
+        android:drawable="@mipmap/splash_icon"
+        android:gravity="center" />
+
+</layer-list>

android/app/src/main/res/layout/launch_screen.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@drawable/background_splash"
+    android:orientation="vertical">
+</LinearLayout>

android/app/src/main/res/raw/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "Marimo",
+  "displayName": "Marimo"
+}

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="splashscreen_bg">#ffffff</color>
+    <color name="app_bg">#ffffff</color>
+</resources>

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

@@ -1,9 +1,23 @@
 <resources>
 
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
+    <!-- 베이스 입니다. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- 여기부터 원하는 테마로 변경하시면 됩니다. -->
         <item name="android:textColor">#000000</item>
+
+        <!-- 다음 줄을 추가하여 모든 앱의 기본 상태 표시 줄 색상을 설정하시면 됩니다. -->
+        <item name="android:statusBarColor">@color/app_bg</item>
+        <!-- 모든 앱의 기본 상태 표시 줄 텍스트 색상을 설정하려면 다음 줄을 추가하시면 됩니다. 
+            밝은 색 => (false) / 어두운 색 => (true) -->
+        <item name="android:windowLightStatusBar">false</item>
+        <!-- 다음 줄을 추가하여 모든 앱의 기본 배경색을 설정하시면 됩니다. -->
+        <item name="android:windowBackground">@color/app_bg</item>
+    </style>
+
+    <!-- 스플래시 화면의 정의를 추가하시면 됩니다. -->
+    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:statusBarColor">@color/splashscreen_bg</item>
+        <item name="android:background">@drawable/background_splash</item>
     </style>
 
-</resources>
+</resources>

android/build.gradle

@@ -35,4 +35,4 @@ allprojects {
         jcenter()
         maven { url 'https://www.jitpack.io' }
     }
-}
+}

android/settings.gradle

@@ -1,3 +1,8 @@
 rootProject.name = 'Marimo'
+include ':react-native-linear-gradient'
+project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
+include ':@react-native-community_cameraroll'
+project(':@react-native-community_cameraroll').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-community/cameraroll/android')
+

ios/Marimo.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>