solved bottomtabbar problem

src/hooks/useSignedUser.ts

@@ -3,13 +3,22 @@ import SignedUser from "../types/user"
 import { getUserAsyncStorage } from "../services/asyncStorageUser";
 
 export const useSignedUser = () => {
-    const [user, setUser] = useState<SignedUser | null>(null);
+    const [userAndLoading, setUserAndLoading] = useState<{
+        signedUser: SignedUser | null,
+        isLoading: boolean
+    }>({
+        signedUser: null,
+        isLoading: true
+    });
     const setData = async () => {
         const _user = await getUserAsyncStorage();
-        setUser(_user);
+        setUserAndLoading({
+            signedUser: _user,
+            isLoading: false
+        });
     }
     useEffect(() => {
         setData();
     }, []);
-    return user;
+    return userAndLoading;
 }

src/navigation/bottomTabBar/bottomTabBar.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { BottomTabBarButtonProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import React from 'react'
 import { useIsDarkMode } from '../../hooks/useIsDarkMode';
 import WishListScreen from '../../screens/wishList';
@@ -9,6 +9,9 @@ import { COLORS, SIZES } from '../../constants';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 const TabBar = createBottomTabNavigator();
+const renderBottomBtn = ({ children , onPress }: BottomTabBarButtonProps) => (<TouchableOpacity style={styles.btmBtn} onPress={onPress}>
+    {children}
+</TouchableOpacity>)
 const MainTabBar = () => {
     const isDark = useIsDarkMode();
     return (
@@ -17,23 +20,26 @@ const MainTabBar = () => {
                 headerShown: false,
                 tabBarStyle: styles.bottomTabBarCustomStyle,
                 tabBarActiveTintColor: COLORS.white,
-                tabBarInactiveTintColor: COLORS.socendry,
+                tabBarInactiveTintColor: COLORS.tintColor,
                 tabBarShowLabel: false
             }
         }}>
             <TabBar.Screen name='WishList' component={WishListScreen} options={({ navigation }) => (
                 {
                     tabBarIcon: ({ focused, color, size }) => (<Icon name='heart' size={SIZES.iconSize} color={color} />),
+                    tabBarButton: renderBottomBtn
                 }
             )} />
             <TabBar.Screen name='Home' component={Home} options={({ navigation }) => (
                 {
-                    tabBarIcon: ({ focused, color, size }) => (<Icon name='home' size={SIZES.iconSize} color={color} />)
+                    tabBarIcon: ({ focused, color, size }) => (<Icon name='home' size={SIZES.iconSize} color={color} />),
+                    tabBarButton: renderBottomBtn
                 }
             )} />
             <TabBar.Screen name='Cart' component={CartScreen} options={({ navigation }) => (
                 {
-                    tabBarIcon: ({ focused, color, size }) => (<Icon name='shopping-cart' size={SIZES.iconSize} color={color} />)
+                    tabBarIcon: ({ focused, color, size }) => (<Icon name='shopping-cart' size={SIZES.iconSize} color={color} />),
+                    tabBarButton: renderBottomBtn
                 }
             )} />
         </TabBar.Navigator>
@@ -44,7 +50,7 @@ export default MainTabBar
 
 const styles = StyleSheet.create({
     bottomTabBarCustomStyle: {
-        borderRadius: SIZES.radius,
+        borderRadius: SIZES.radius2,
         padding: 5 * SIZES.padding2,
         justifyContent: "center",
         alignItems: "center",
@@ -54,6 +60,13 @@ const styles = StyleSheet.create({
         left: 0.05 * SIZES.fullScreenWidth,
         bottom: 30,
         backgroundColor: COLORS.primary,
-        elevation : 0
+        elevation: 0
+    },
+    btmBtn: {
+        flex: 1,
+        backgroundColor: COLORS.transparent,
+        height : 25,
+        bottom: 30,
+        alignSelf : "center"
     }
 })

src/navigation/index.tsx

@@ -5,17 +5,19 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import LoginScreen from '../screens/loginScreen';
 import MainTabBar from './bottomTabBar/bottomTabBar';
 import { useSignedUser } from '../hooks/useSignedUser';
+import LoadingMainScreenMyScreen from '../screens/loadingScreen';
 
 const StackNavigation = createNativeStackNavigator();
 export default function Navigation() {
     const signedUser = useSignedUser();
     return (
         <NavigationContainer>
-            <StackNavigation.Navigator initialRouteName={ 'root'} screenOptions={({ navigation }) => {
+            <StackNavigation.Navigator initialRouteName={'_loading'} screenOptions={({ navigation }) => {
                 return {
                     headerShown: false
                 }
             }}>
+                <StackNavigation.Screen name='_loading' component={LoadingMainScreenMyScreen} />
                 <StackNavigation.Screen name='login' component={LoginScreen} />
                 <StackNavigation.Screen name='root' component={MainTabBar} />
             </StackNavigation.Navigator>

src/screens/loadingScreen/index.tsx

@@ -0,0 +1,40 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React, { useEffect, useRef } from 'react'
+import { ActivityIndicator } from "@react-native-material/core";
+import { COLORS } from '../../constants';
+import { useIsDarkMode } from '../../hooks/useIsDarkMode';
+import { useSignedUser } from '../../hooks/useSignedUser';
+import { useNavigation } from '@react-navigation/native';
+
+const LoadingMainScreenMyScreen = () => {
+    const isDark = useIsDarkMode();
+    const userAndLoading = useSignedUser();
+    // ref to use side effects on new values only
+    const renderRef = useRef<number>(0);
+    // navigation
+    const navigation = useNavigation();
+    useEffect(() => {
+        if (renderRef.current === 0) renderRef.current += 1;
+        else {
+            if (userAndLoading.signedUser) navigation.navigate("root" as never);
+            else navigation.navigate("login" as never);
+        }
+    }, [
+        userAndLoading.isLoading
+    ])
+    return (
+        <View style={[styles.screen, { backgroundColor: isDark ? COLORS.black : COLORS.white }]}>
+            <ActivityIndicator size={"large"} color={COLORS.tintColor} />
+        </View>
+    )
+}
+
+export default LoadingMainScreenMyScreen
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center"
+    },
+})