show navigation on specific screens

src/navigation/navigation.tsx

@@ -1,5 +1,8 @@
 import Stack from '@pages/globalStackManager';
-import {NavigatorScreenParams} from '@react-navigation/native';
+import {
+  NavigatorScreenParams,
+  getFocusedRouteNameFromRoute,
+} from '@react-navigation/native';
 import {
   BottomTabBarProps,
   createBottomTabNavigator,
@@ -13,7 +16,7 @@ import ProfileTab, {
   ProfileStackNavigatorParamList,
 } from './tabs/main/ProfileTab';
 import {FadeInView} from '@helper/animations';
-import {View} from 'react-native';
+import {Animated, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {
   RegistrationScreenAnim,
@@ -25,6 +28,7 @@ import {useSelector} from 'react-redux';
 import {RootState, store as reduxStore} from '@redux/store';
 import {Text} from '@gluestack-ui/themed';
 import {MyTouchableOpacity} from '@components/MyTouchableOpacity';
+import {useEffect, useRef} from 'react';
 
 export type RootStackNavigatorParamList = {
   Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
@@ -94,6 +98,11 @@ const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat'];
 function CustomTabBar(props: BottomTabBarProps) {
   const {state, navigation} = props;
 
+  const routeName = props.state.routes[props.state.index].name;
+  const nestedRouteName = getFocusedRouteNameFromRoute(
+    props.state.routes[props.state.index],
+  );
+
   const lang = useSelector(
     (state: RootState) => state.appVariables.lang.navigation.home,
   );
@@ -109,8 +118,35 @@ function CustomTabBar(props: BottomTabBarProps) {
     lang.chats.tabName,
   ];
 
+  const allowedTabs = ['Profile', 'Calendar', 'Map', 'Chats'];
+
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (
+      nestedRouteName === undefined ||
+      (allowedTabs.includes(routeName) && nestedRouteName === 'Overview')
+    ) {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(fadeAnim, {
+        toValue: 100,
+        duration: 150,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [nestedRouteName, fadeAnim]);
+
   return (
-    <View style={{backgroundColor: currentTheme.backgroundDark400}}>
+    <Animated.View
+      style={{
+        backgroundColor: currentTheme.backgroundDark400,
+        transform: [{translateY: fadeAnim}],
+      }}>
       <View
         style={{
           flexDirection: 'row',
@@ -188,7 +224,7 @@ function CustomTabBar(props: BottomTabBarProps) {
           );
         })}
       </View>
-    </View>
+    </Animated.View>
   );
 }
 
@@ -198,7 +234,10 @@ function HomeStack() {
   return (
     <Tab.Navigator
       tabBar={props => <CustomTabBar {...props} />}
-      screenOptions={{headerShown: false, unmountOnBlur: false}}>
+      screenOptions={{
+        headerShown: false,
+        unmountOnBlur: false,
+      }}>
       <Tab.Screen name="Profile" component={ProfileTabAnim} />
       <Tab.Screen name="Calendar" component={CalendarTabAnim} />
       <Tab.Screen name="Map" component={MapTabAnim} />