ADD: Splash Screen

- Added: Splash screen

App.js

@@ -2,12 +2,19 @@
  * @format
  */
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import {NavigationContainer} from '@react-navigation/native';
+import SplashScreen from 'react-native-splash-screen';
 
 import DrawerNavigator from './src/navigators/Main.Drawer';
 
 const App = () => {
+  useEffect(() => {
+    setTimeout(() => {
+      SplashScreen.hide();
+    }, 500);
+  }, []);
+
   return (
     <NavigationContainer>
       <DrawerNavigator />

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

@@ -1,8 +1,20 @@
 package com.wecodetask2;
-
+// react-native-splash-screen 
+import android.os.Bundle;
+import org.devio.rn.splashscreen.SplashScreen;
+import android.os.Bundle; 
+import org.devio.rn.splashscreen.SplashScreen;
+import com.cboy.rn.splashscreen.SplashScreen;
+// react-native-splash-screen 
 import com.facebook.react.ReactActivity;
 
 public class MainActivity extends ReactActivity {
+  // react-native-splash-screen 
+  @Override 
+  protected void onCreate(Bundle savedInstanceState) {
+SplashScreen.show(this, R.style.SplashScreenTheme);     SplashScreen.show(this); 
+     super.onCreate(savedInstanceState);
+SplashScreen.show(this, R.style.SplashScreenTheme);  // react-native-splash-screen 
 
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule

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

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:drawable="@color/splashprimary" />
+    <item>
+        <bitmap
+                android:gravity="center"
+                android:src="@drawable/splash_image" />
+    </item>
+
+</layer-list>

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

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <ImageView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="0dp"
+        android:contentDescription="Splashscreen"
+        android:scaleType="fitCenter"
+        android:background="@color/splashprimary"
+        android:src="@drawable/splashscreen"/>
+</RelativeLayout>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="splashprimary">#FFFFFF</color>
+</resources>

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

@@ -1,5 +1,9 @@
 <resources>
 
+    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
+        <item name="colorPrimaryDark">@color/splashprimary</item>
+    </style>
+
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->

ios/Podfile.lock

@@ -283,6 +283,8 @@ PODS:
     - glog
   - react-native-safe-area-context (3.3.2):
     - React-Core
+  - react-native-splash-screen (3.2.0):
+    - React
   - React-perflogger (0.66.3)
   - React-RCTActionSheet (0.66.3):
     - React-Core/RCTActionSheetHeaders (= 0.66.3)
@@ -442,6 +444,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -519,6 +522,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-splash-screen:
+    :path: "../node_modules/react-native-splash-screen"
   React-perflogger:
     :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
@@ -591,6 +596,7 @@ SPEC CHECKSUMS:
   React-jsinspector: d9c8eb0b53f0da206fed56612b289fec84991157
   React-logger: e522e76fa3e9ec3e7d7115b49485cc065cf4ae06
   react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
+  react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   React-perflogger: 73732888d37d4f5065198727b167846743232882
   React-RCTActionSheet: 96c6d774fa89b1f7c59fc460adc3245ba2d7fd79
   React-RCTAnimation: 8940cfd3a8640bd6f6372150dbdb83a79bcbae6c

ios/SplashScreen.storyboard

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15705" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina6_1" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15706"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
+                                <rect key="frame" x="207" y="876" width="0.0" height="0.0"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="SplashImage" translatesAutoresizingMaskIntoConstraints="NO" id="RL8-Sx-rSy">
+                                <rect key="frame" x="0" y="0" />
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstItem="RL8-Sx-rSy" firstAttribute="top" secondItem="Bcu-3y-fUS" secondAttribute="top" id="AxW-a9-z2S"/>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="RL8-Sx-rSy" secondAttribute="bottom" id="RfO-Bn-vEU"/>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="trailing" secondItem="RL8-Sx-rSy" secondAttribute="trailing" id="hHC-9d-4Ps"/>
+                            <constraint firstItem="RL8-Sx-rSy" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" id="mga-C0-hVM"/>
+                        </constraints>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="SplashImage" width="896" height="896"/>
+    </resources>
+</document>

ios/wecodeTask2.xcodeproj/project.pbxproj

@@ -14,6 +14,7 @@
 		2729A0582C028149D18A1275 /* libPods-wecodeTask2.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B177453F93C5EF3E3C6B816 /* libPods-wecodeTask2.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
 		8C11FA7E7A21D54218F8390D /* libPods-wecodeTask2-wecodeTask2Tests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2B3B0430B63B9A87307EE337 /* libPods-wecodeTask2-wecodeTask2Tests.a */; };
+		9CDE5740274E8CC700BAE2C7 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 9CDE573F274E8CC700BAE2C7 /* SplashScreen.storyboard */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -43,6 +44,7 @@
 		3B177453F93C5EF3E3C6B816 /* libPods-wecodeTask2.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-wecodeTask2.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		522CC821917A95EE8F26C199 /* Pods-wecodeTask2.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-wecodeTask2.debug.xcconfig"; path = "Target Support Files/Pods-wecodeTask2/Pods-wecodeTask2.debug.xcconfig"; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = wecodeTask2/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		9CDE573F274E8CC700BAE2C7 /* SplashScreen.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = SplashScreen.storyboard; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
 
@@ -116,6 +118,7 @@
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
+				9CDE573F274E8CC700BAE2C7 /* SplashScreen.storyboard */,
 				13B07FAE1A68108700A75B9A /* wecodeTask2 */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* wecodeTask2Tests */,
@@ -145,7 +148,6 @@
 				0D2E7ABF686E2030CD6838D2 /* Pods-wecodeTask2-wecodeTask2Tests.debug.xcconfig */,
 				308545A95C54133DD75E4213 /* Pods-wecodeTask2-wecodeTask2Tests.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -244,6 +246,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
+				9CDE5740274E8CC700BAE2C7 /* SplashScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

ios/wecodeTask2.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>

ios/wecodeTask2/AppDelegate.m

@@ -3,6 +3,7 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
+#import "RNSplashScreen.h" // react-native-splash-screen 
 
 #ifdef FB_SONARKIT_ENABLED
 #import <FlipperKit/FlipperClient.h>
@@ -47,6 +48,8 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
+  [RNSplashScreen show]; // react-native-splash-screen 
+
   return YES;
 }
 

ios/wecodeTask2/Images.xcassets/SplashImage.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "[email protected]",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "[email protected]",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "[email protected]",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/wecodeTask2/Info.plist

@@ -38,7 +38,7 @@
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
 	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
+	<string>SplashScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
 	<array>
 		<string>armv7</string>

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@bam.tech/react-native-make": "^3.0.3",
     "@react-native-async-storage/async-storage": "^1.15.11",
     "@react-navigation/drawer": "^6.1.8",
     "@react-navigation/native": "^6.0.6",
@@ -22,6 +23,7 @@
     "react-native-reanimated": "^2.2.4",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.9.0",
+    "react-native-splash-screen": "^3.2.0",
     "react-native-vector-icons": "^9.0.0",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2"

src/Storages/ProductsStorage.js

@@ -8,13 +8,12 @@ const LAST = 'last';
 const ProductsStorage = {
   async initialize(data) {
     try {
-      await AsyncStorage.setItem(KEY, JSON.stringify(data));
-      const prevProducts = await AsyncStorage.getItem(KEY);
+      const rawProducts = await AsyncStorage.getItem(KEY);
+      const rawProductsLength = JSON.parse(rawProducts).length;
 
-      const newProducts = JSON.parse(prevProducts).filter(
-        item => !item.notInteresting,
-      );
-      return newProducts;
+      if (!rawProducts || rawProductsLength !== data.length) {
+        await AsyncStorage.setItem(KEY, JSON.stringify(data));
+      }
     } catch (e) {
       console.error(e);
     }

src/data/productsData.js

@@ -10,7 +10,6 @@ const data = [
     title: '거의새것 정품 구찌 보스턴백 토트백',
     brand: '구찌',
     price: 380000,
-    notInteresting: true,
   },
   {
     id: 3,
@@ -23,7 +22,6 @@ const data = [
     title: '중고 루이비통 장지갑 백화점 풀구성',
     brand: '루이비통',
     price: 400000,
-    notInteresting: true,
   },
   {
     id: 5,
@@ -36,14 +34,12 @@ const data = [
     title: '나이키바람막이',
     brand: '나이키',
     price: 68000,
-    notInteresting: true,
   },
   {
     id: 7,
     title: '구찌 정품 카드지갑 (급처)',
     brand: '구찌',
     price: 100000,
-    notInteresting: true,
   },
   {
     id: 8,
@@ -119,8 +115,8 @@ const data = [
   },
   {
     id: 20,
-    title: '스톤아일랜드',
-    brand: '스톤아일랜드',
+    title: '샤넬 지갑',
+    brand: '샤넬',
     price: 550000,
   },
   // {