Merge pull request #3 from Aku-mi/splash_screen

Splash screen

cattleia-native-app/App/Components/Loader/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {View, ActivityIndicator} from 'react-native';
+
+interface Props {
+  dark?: boolean;
+}
+
+export const Load: React.FC<Props> = ({dark}) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: dark ? '#000' : '#fff',
+      }}>
+      <ActivityIndicator size="large" color={dark ? '#fff' : '#000'} />
+    </View>
+  );
+};

cattleia-native-app/App/index.tsx

@@ -1,13 +1,24 @@
-import React from 'react';
-import {Provider} from 'react-redux';
+import React, {useEffect} from 'react';
+import SplashScreen from 'react-native-splash-screen';
 import {store, persistor} from './redux/store';
+import {useColorScheme} from 'react-native';
 import {PersistGate} from 'redux-persist/integration/react';
+import {Provider} from 'react-redux';
 import {Pages} from './pages';
+import {Load} from './Components/Loader';
 
-export default () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Pages />
-    </PersistGate>
-  </Provider>
-);
+export default () => {
+  const colorScheme = useColorScheme();
+  useEffect(() => {
+    SplashScreen.hide();
+  }, []);
+  return (
+    <Provider store={store}>
+      <PersistGate
+        loading={<Load dark={colorScheme === 'dark'} />}
+        persistor={persistor}>
+        <Pages />
+      </PersistGate>
+    </Provider>
+  );
+};

cattleia-native-app/App/pages/index.tsx

@@ -3,7 +3,7 @@ import theme from '../utils/theme';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {useSelector, useDispatch} from 'react-redux';
 import {NavigationContainer} from '@react-navigation/native';
-import {useColorScheme} from 'react-native';
+import {StatusBar, useColorScheme} from 'react-native';
 import {RootState} from '../redux/store';
 import {HomePage} from './HomePage';
 import {Register} from './Register';
@@ -27,6 +27,10 @@ export const Pages = () => {
   const colors = darkTheme ? theme.dark : theme.light;
   return (
     <NavigationContainer>
+      <StatusBar
+        backgroundColor={colors.bgColor}
+        barStyle={!darkTheme ? 'dark-content' : 'light-content'}
+      />
       <Stack.Navigator
         initialRouteName="HomePage"
         screenOptions={{

cattleia-native-app/android/app/build.gradle

@@ -146,6 +146,15 @@ android {
         }
     }
     signingConfigs {
+        release {
+            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
+                storeFile file(MYAPP_UPLOAD_STORE_FILE)
+                storePassword MYAPP_UPLOAD_STORE_PASSWORD
+                keyAlias MYAPP_UPLOAD_KEY_ALIAS
+                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
+            }
+        }
+
         debug {
             storeFile file('debug.keystore')
             storePassword 'android'
@@ -160,7 +169,7 @@ android {
         release {
             // Caution! In production, you need to generate your own keystore file.
             // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
+            signingConfig signingConfigs.release
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }

cattleia-native-app/android/app/src/main/java/com/app/MainActivity.java

@@ -1,7 +1,11 @@
 package com.app;
 
+import android.os.Bundle;
+
 import com.facebook.react.ReactActivity;
 
+import org.devio.rn.splashscreen.SplashScreen;
+
 public class MainActivity extends ReactActivity {
 
   /**
@@ -12,4 +16,10 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "app";
   }
+
+  @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        SplashScreen.show(this);  // here
+        super.onCreate(savedInstanceState);
+    }
 }

cattleia-native-app/android/app/src/main/java/com/app/MainApplication.java

@@ -4,6 +4,7 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

cattleia-native-app/android/app/src/main/res/layout/launch_screen.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical" android:layout_width="match_parent"
+    android:layout_height="match_parent">
+    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
+</RelativeLayout>

cattleia-native-app/android/app/src/main/res/values/colors.xml

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

cattleia-native-app/android/gradle.properties

@@ -26,3 +26,8 @@ android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
 FLIPPER_VERSION=0.75.1
+
+MYAPP_UPLOAD_STORE_FILE=aku.keystore
+MYAPP_UPLOAD_KEY_ALIAS=aku
+MYAPP_UPLOAD_STORE_PASSWORD=dhVL6LugQ3e5ynmW
+MYAPP_UPLOAD_KEY_PASSWORD=dhVL6LugQ3e5ynmW

cattleia-native-app/android/settings.gradle

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

cattleia-native-app/ios/Podfile

@@ -12,6 +12,8 @@ target 'app' do
     :hermes_enabled => false
   )
 
+  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
+
   target 'appTests' do
     inherit! :complete
     # Pods for testing

cattleia-native-app/package.json

@@ -25,6 +25,7 @@
     "react-native-reanimated": "^2.2.0",
     "react-native-safe-area-context": "^3.3.0",
     "react-native-screens": "^3.5.0",
+    "react-native-splash-screen": "^3.2.0",
     "react-native-vector-icons": "^8.1.0",
     "react-redux": "^7.2.4",
     "redux-persist": "^6.0.0",

cattleia-native-app/yarn.lock

@@ -5616,6 +5616,11 @@ react-native-screens@^3.5.0:
   dependencies:
     warn-once "^0.1.0"
 
+react-native-splash-screen@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.2.0.tgz#d47ec8557b1ba988ee3ea98d01463081b60fff45"
+  integrity sha512-Ls9qiNZzW/OLFoI25wfjjAcrf2DZ975hn2vr6U9gyuxi2nooVbzQeFoQS5vQcbCt9QX5NY8ASEEAtlLdIa6KVg==
+
 react-native-vector-icons@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz#e8ee2b17bc4d9f636da1c6f67feee8e2a850c3d8"