Merge pull request #24 from abdenassar01/dev

Fixing splash screen and updating bottom navigation

App.tsx

@@ -7,16 +7,20 @@ import {
 import TabNavigator from './app/screens/tabs/TabNavigator';
 import { ThemeProvider } from 'styled-components';
 import { light, dark } from './app/assets/theme';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-
+import SplashScreen from 'react-native-splash-screen';
 
 const queryClient = new QueryClient()
 
 const App = () => {
 
   const [ theme, setTheme ] = useState<string>("light")
 
+  useEffect(() => {
+    SplashScreen.hide();
+  }, []);
+
   const storeTheme = async (value: string) => {
     try {
       await AsyncStorage.setItem('@theme', value)

android/app/build.gradle

@@ -140,7 +140,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 2
         multiDexEnabled true
-        versionName "2.2.0"
+        versionName "2.3.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

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

@@ -5,10 +5,14 @@
 import com.facebook.react.ReactRootView;
 import android.os.Bundle;
 
+import android.os.Bundle;
+import org.devio.rn.splashscreen.SplashScreen;
+
 public class MainActivity extends ReactActivity {
 
   /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * Returns the name of the main component registered from JavaScript. This is
+   * used to schedule
    * rendering of the component.
    */
   @Override
@@ -18,12 +22,15 @@ protected String getMainComponentName() {
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
+    SplashScreen.show(this);
     super.onCreate(null);
   }
 
   /**
-   * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
-   * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer
+   * Returns the instance of the {@link ReactActivityDelegate}. There the RootView
+   * is created and
+   * you can specify the renderer you wish to use - the new renderer (Fabric) or
+   * the old renderer
    * (Paper).
    */
   @Override
@@ -46,7 +53,8 @@ protected ReactRootView createRootView() {
 
     @Override
     protected boolean isConcurrentRootEnabled() {
-      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
+      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e.
+      // React 18).
       // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
       return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
     }

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

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical" android:layout_width="match_parent"
-    android:layout_height="match_parent" android:background="@color/splash_blue">
+    android:layout_height="match_parent" android:background="@color/splash_dark">
     <ImageView android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
 </FrameLayout>

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

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="primary_dark">#000000</color>
-    <color name="splash_blue">#1D84B5</color>
+    <color name="splash_dark">#18191A</color>
 </resources>

app/screens/tabs/TabNavigator.tsx

@@ -35,25 +35,25 @@ function TabNavigator(props: Props) {
       <Tab.Screen name='MainSTack' 
         children={ () => <MainStack onThemeToggle={ props.onThemeToggle } /> } 
         options={{
-          tabBarIcon: ({ focused }) => <NavigationIcon focused={ focused } label="Home" icon="home" />
+          tabBarIcon: ({ focused }) => <NavigationIcon theme={ props.theme } focused={ focused } label="Home" icon="home" />
         }}
       />
       <Tab.Screen name='Botola'
         children={ () => <BotolaStack /> }  
         options={{
-          tabBarIcon: ({ focused }) => <NavigationIcon focused={ focused } label="Botola" icon="football" />
+          tabBarIcon: ({ focused }) => <NavigationIcon theme={ props.theme } focused={ focused } label="Botola" icon="football" />
         }}
       />
       <Tab.Screen name='Matches'
         children={ () => <Standing /> } 
         options={{
-          tabBarIcon: ({ focused }) => <NavigationIcon focused={ focused } label="Standing" icon="ios-layers" />
+          tabBarIcon: ({ focused }) => <NavigationIcon theme={ props.theme } focused={ focused } label="Standing" icon="ios-layers" />
         }}
       /> 
       <Tab.Screen name='PlayerOfTheWeek'
         children={ () => <PlayerOfTheWeekStack /> }
         options={{
-          tabBarIcon: ({ focused }) => <NavigationIcon focused={ focused } label="Top Players" icon="person-circle-outline" />
+          tabBarIcon: ({ focused }) => <NavigationIcon theme={ props.theme } focused={ focused } label="Top Players" icon="person-circle-outline" />
         }}
       /> 
     </Tab.Navigator>

app/utils/navigationIcon/NavigationIcon.tsx

@@ -4,12 +4,13 @@ import Icon from 'react-native-vector-icons/Ionicons';
 type Props = {
     focused: boolean,
     label: string,
-    icon: string
+    icon: string,
+    theme: any
 }
 
-export default function NavigationIcon({ focused, label, icon }: Props) {
+export default function NavigationIcon({ focused, label, icon, theme }: Props) {
   return (
-    <IconWrapper style={{ position: 'absolute', bottom: focused ? 5 : 0 }}>
+    <IconWrapper style={{ paddingTop: focused ? 10 : 0, backgroundColor: theme.text, bottom: focused ? 5 : 0, }}>
       <Icon name={ icon } size={ focused ? 25 : 20} color={ focused ? "#FF2782" : "#748c94" } />
       <Label style={{ color: focused ? "#FF2782" : "#748c94" }}>{  label }</Label>
     </IconWrapper>

app/utils/navigationIcon/styles/Styles.ts

@@ -5,6 +5,9 @@ import { MainText } from "../../../assets/text/Text";
 export const IconWrapper = styled(View)`
     justify-content: center;
     align-items: center;
+    position: absolute;
+    border-radius: 50px;
+    width: 70px;
 `
 
 export const Label = styled(MainText)`

package.json

@@ -25,6 +25,7 @@
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.18.1",
     "react-native-skeleton-placeholder": "^5.2.4",
+    "react-native-splash-screen": "^3.3.0",
     "react-native-vector-icons": "^9.2.0",
     "react-query": "^3.39.2",
     "styled-components": "^5.3.6"

yarn.lock

@@ -6000,6 +6000,11 @@ react-native-skeleton-placeholder@^5.2.4:
   resolved "https://registry.yarnpkg.com/react-native-skeleton-placeholder/-/react-native-skeleton-placeholder-5.2.4.tgz#a654fa083ff274a39c763e086f8a850c556d4c95"
   integrity sha512-OZntVq1hU1UX33FltxK2ezT2v9vHIhV8YnEbnMWUCvxT0N9OsgD1qxiHm6qb9YRJVgq2o5z3S7dNPsPnDF/jNg==
 
+react-native-splash-screen@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz#3af71ed17afe50fee69590a45aec399d071ead02"
+  integrity sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA==
+
 react-native-vector-icons@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz#3c0c82e95defd274d56363cbe8fead8d53167ebd"