v0.0.6-All navigation color done

tjikaljedy · May 30, 2022 · 5f2edfb · 5f2edfb
1 parent cdcf683
commit 5f2edfb
Show file tree

Hide file tree

Showing 29 changed files with 262 additions and 259 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,17 @@
 ### React-Native Notice
 
+### NOTE for React-Navigation
+
+    <Stack.Navigator
+      initialRouteName="HomeScreen"
+      screenOptions={{
+        headerStatusBarHeight: 0, <----
+      }}>
+
+    <Navigator
+      initialRouteName="Home"
+      safeAreaInsets={{bottom: 0}} <----
+
 ### Starting 2022-05-10
 
 The main concern in develop in react-native is to maintain dependancy version the packages.

diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml
@@ -2,7 +2,5 @@
     <string name="app_name">crazyrich</string>
     <style name="SplashTheme" parent="AppTheme">
         <item name="android:windowBackground">@drawable/splash</item>
-        <item name="android:statusBarColor">@color/colorSecondary</item>
-        <item name="android:navigationBarColor">@color/colorSecondary</item>
     </style>
 </resources>
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
@@ -3,9 +3,5 @@
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:textColor">#000000</item>
-        <item name="android:windowBackground">@color/colorSecondary</item>
-        <!--<item name="android:statusBarColor">@color/colorSecondary</item>
-        <item name="android:navigationBarColor">@color/colorSecondary</item>
-        -->
     </style>
 </resources>
diff --git a/index.js b/index.js
@@ -1,6 +1,3 @@
-/**
- * @format
- */
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crazyrich",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -25,8 +25,10 @@
     "@viro-community/react-viro": "2.22.0",
     "accounting": "^0.4.1",
     "dayjs": "^1.10.4",
+    "install": "^0.13.0",
     "lottie-ios": "^3.2.3",
     "lottie-react-native": "^5.1.1",
+    "npm": "^8.11.0",
     "react": "^17.0.2",
     "react-native": "^0.67.4",
     "react-native-confirmation-code-field": "^6.5.1",
@@ -35,7 +37,6 @@
     "react-native-maps": "^0.30.1",
     "react-native-modal": "^13.0.1",
     "react-native-navigation-bar-color": "^2.0.1",
-    "react-native-pager-view": "^5.4.15",
     "react-native-permissions": "^3.3.1",
     "react-native-pressable-opacity": "^1.0.10",
     "react-native-ratings": "^7.4.0",

diff --git a/src/components/elements/SearchBar/styles.ts b/src/components/elements/SearchBar/styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
   searchContainer: {

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1 +1,2 @@
-export {default as useTheme} from './useThemeColors';
+import {default as useTheme} from './useThemeColors';
+export {useTheme};
diff --git a/src/hooks/useStatusNav.tsx b/src/hooks/useStatusNav.tsx
@@ -1,66 +1,100 @@
-import React, {useContext} from 'react';
-import {useTheme} from './index';
 import {StatusBar, StatusBarProps, Platform} from 'react-native';
-//import SystemNavigationBar from 'react-native-system-navigation-bar';
-type ParamProps = {
-  inverse?: boolean;
+import changeNavigationBarColor from 'react-native-navigation-bar-color';
+
+type ThemeColors = {
+  primary: string;
+  secondary: string;
+  background: string;
+  card: string;
+  text: string;
+  border: string;
+};
+
+interface ScreenNavProp {
+  routeName?: any;
+  colors?: any;
+  theme?: any;
+  translucent?: boolean;
   statusColor?: string;
-  statusBaseLight?: boolean;
+  isBarLight?: boolean;
   navColor?: string;
-  navBaseLight?: boolean;
-};
+  isNavLight?: boolean;
+}
 
-const styleLight = 'light-content';
-const styleDark = 'dark-content';
-const inverseColor = 'transparent';
-const blackColor = 'black';
+interface StatusNavProp {
+  defaultColor: any;
+  defaultTheme: any;
+  translucent?: boolean;
+  statusColor?: string;
+  isBarLight?: boolean;
+  navColor?: string;
+  isNavLight?: boolean;
+}
+
+class StatusNav {
+  static setScreenNav = (params?: ScreenNavProp) => {
+    const defaultColor = params?.colors as ThemeColors;
+    const defaultTheme = params?.theme;
+    if (
+      params?.routeName === 'AcquireARScreen' ||
+      params?.routeName === 'AcquireScreen'
+    ) {
+      StatusNav.setStatusNav({
+        defaultColor: defaultColor,
+        defaultTheme: defaultTheme,
+        translucent: true,
+      });
+    } else if (params?.routeName === 'AuthenticationScreen') {
+      StatusNav.setStatusNav({
+        defaultColor: defaultColor,
+        defaultTheme: defaultTheme,
+        statusColor: defaultColor.primary,
+        navColor: defaultColor.card,
+      });
+    } else if (params?.routeName === 'HomeScreen') {
+      StatusNav.setStatusNav({
+        defaultColor: defaultColor,
+        defaultTheme: defaultTheme,
+      });
+    }
+  };
 
-const useStatusNav = (params: ParamProps) => {
-  const {theme, colors} = useTheme();
-  const baseColor = colors.card;
-  const themeIsLight = theme === 'light';
+  static setStatusNav = (params?: StatusNavProp) => {
+    const styleLight = 'light-content';
+    const styleDark = 'dark-content';
+    const translucentColor = 'translucent';
+    const blackColor = 'black';
 
-  let navColor = params?.navColor === undefined ? baseColor : blackColor;
-  let navStyle = params?.navBaseLight ? true : false;
+    const colors = params?.defaultColor;
+    const theme = params?.defaultTheme;
 
-  let barColor =
-    params?.statusColor === undefined ? baseColor : params.statusColor;
+    const baseColor = colors.card;
+    const themeIsLight = theme === 'light';
+    var navStyle = params?.isNavLight ? params.isNavLight : themeIsLight;
+    var barStyle = params?.isBarLight ? params.isBarLight : themeIsLight;
+    const barStyleType = {
+      styleType: barStyle ? styleDark : styleLight,
+    };
 
-  let baseLight =
-    params?.statusBaseLight === undefined
-      ? themeIsLight
-      : params.statusBaseLight;
+    var navColor =
+      params?.navColor === undefined ? baseColor : params?.navColor;
+    var barColor =
+      params?.statusColor === undefined ? baseColor : params?.statusColor;
 
-  const defaultNav = () => {
-    console.log('>>>>>>>> DEFAULT' + theme);
-    //const currStatusStyle = baseLight ? styleDark : styleLight;
-    //navStyle = baseLight ? true : false;
-    // StatusBar.setTranslucent(false);
-    //StatusBar.setBarStyle(currStatusStyle);
-    StatusBar.setBackgroundColor(baseColor);
-    if (Platform.OS === 'android') {
-      // SystemNavigationBar.setNavigationColor(baseColor, !themeIsLight);
+    if (params?.translucent) {
+      navColor = translucentColor;
+      navStyle = false;
+      barStyleType.styleType = styleLight;
+      //StatusBar.setTranslucent(true);
+      StatusBar.setBackgroundColor('rgba(0,0,0,0.4)');
+    } else {
+      StatusBar.setTranslucent(false);
+      StatusBar.setBackgroundColor(barColor);
     }
-  };
-  const translucentNav = () => {
-    console.log('hree');
-
+    StatusBar.setBarStyle(barStyleType.styleType as any);
     if (Platform.OS === 'android') {
-      //SystemNavigationBar.fullScreen(true);
-      //const result = SystemNavigationBar.setNavigationColor(
-      //   'hsla(110, 56%, 49%, 0.5)',
-      //   !themeIsLight,
-      // );
+      changeNavigationBarColor(navColor, navStyle, false);
     }
-    //StatusBar.setBackgroundColor('rgba(0,0,0,0.2)');
   };
-  const leanBackNav = () => {};
-
-  React.useEffect(() => {
-    defaultNav();
-  }, []);
-
-  return {defaultNav, translucentNav, leanBackNav};
-};
-
-export default useStatusNav;
+}
+export default StatusNav;
diff --git a/src/redux/rootReducers.ts b/src/redux/rootReducers.ts
@@ -5,15 +5,13 @@ import theme from './slices/themeSlice';
 import artSlice from './slices/artSlice';
 import portalSlice from './slices/portalSlice';
 import camera from './slices/cameraSlice';
-import statusnav from './slices/statusNavSlice';
 
 //Reducer
 const reducers = {
   theme,
   camera,
   artSlice,
   portalSlice,
-  statusnav,
 };
 
 const persistConfig = {

diff --git a/src/routes/RootNavigation.tsx b/src/routes/RootNavigation.tsx
@@ -1,10 +1,9 @@
 import React, {useContext} from 'react';
-import {Platform, InteractionManager} from 'react-native';
+import {Platform, InteractionManager, View, StatusBar} from 'react-native';
 import {
   NavigationContainer,
   useNavigationContainerRef,
 } from '@react-navigation/native';
-//import changeNavigationBarColor from 'react-native-navigation-bar-color';
 import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
 import TabNavigation from '@src/routes/TabNavigation';
 import DishDetails from '@src/screens/DishDetails';
@@ -14,16 +13,13 @@ import AcquireAR from '@src/screens/AcquireAR';
 import AuthenticationStack from '@src/routes/Stacks/AuthenticationStack';
 import AuthContext from '@src/context/auth-context';
 import {useTheme} from '@src/hooks';
-//Test
-//import {initialDefault, fetchDefault} from '@src/redux/slices/statusNavSlice';
-//import {useAppDispatch, useAppSelector} from '@src/redux/useRedux';
+import StatusNav from '@src/hooks/useStatusNav';
+
 const RootStack = createStackNavigator();
 
 const RootNavigation = () => {
   //Default
-  const {colors, navTheme, theme} = useTheme();
-  //const dispatch = useAppDispatch();
-  //const statusNav = useAppSelector(fetchDefault);
+  const {colors, theme, navTheme} = useTheme();
   const {userToken} = useContext(AuthContext);
   const navigationRef = useNavigationContainerRef();
   const screenOptions =
@@ -32,41 +28,25 @@ const RootNavigation = () => {
           ...TransitionPresets.SlideFromRightIOS,
         }
       : {
-          ...TransitionPresets.ScaleFromCenterAndroid,
+          ...TransitionPresets.ModalTransition,
         };
-  /*React.useEffect(() => {
-    dispatch(
-      initialDefault({
-        default: {themeColor: colors.card, themeMode: theme},
-        current: {themeColor: colors.card, themeMode: theme},
-      }),
-    );
-  }, [colors]);*/
 
-  /*React.useEffect(() => {
-    const routeName = navigationRef.current?.getCurrentRoute();
-    console.log('>>> 1 ' + routeName);
-    if (routeName?.name === 'AcquireARScreen') {
-      changeNavigationBarColor('translucent', true, false);
-    }
-    if (routeName?.name === 'AuthenticationScreen') {
-      changeNavigationBarColor(colors.card, true, true);
-    } else {
-      changeNavigationBarColor(colors.card, true, true);
-    }
-  }, []);*/
   return (
     <NavigationContainer
       ref={navigationRef}
       theme={navTheme}
-      onUnhandledAction={() => {
-        console.log('ddddd');
-      }}
       onStateChange={() => {
-        const routeName = navigationRef.current?.getCurrentRoute();
-        console.log('>>> 2 ' + routeName);
-        if (routeName?.name === 'AcquireARScreen') {
-          //changeNavigationBarColor('translucent', true, false);
+        const route = navigationRef.current?.getCurrentRoute();
+        if (
+          route?.name === 'AcquireARScreen' ||
+          route?.name === 'AcquireScreen' ||
+          route?.name === 'HomeScreen'
+        ) {
+          StatusNav.setScreenNav({
+            routeName: route?.name,
+            colors: colors,
+            theme: theme,
+          });
         }
       }}>
       <RootStack.Navigator screenOptions={screenOptions}>