React native – Hide Bottom Tab Bar in specific screen in react-navigation V.7.x

I am currently using @react-navigation/native and @react-navigation/bottom-tabs to create bottom tab bar. I have successfully created everything and I am stuck in the middle. I need to hide the bottom tab bar only is some specific screens. I tried everything and still couldn’t do that. If anyone can help or give me any idea will be a big help.

I am calling my route in the index like this =>

const Index = () => {
 return (
 <ErrorBoundary
   FallbackComponent={CustomFallBackComponent}
   onError={errorHandler}>
   <Provider store={store}>
     <Loader loading={false} />
     <Routes />
     <IFrameModal />
     <CustomToast store={store} />
    </Provider>
  </ErrorBoundary>
 );
};
export default Index;

My Routes =>

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import {SplashScreenStack} from './StackNavigator';
import BottomTabNavigator from './TabNavigator';
import DrawerNavigator from './DrawerNavigator';

const Stack = createNativeStackNavigator();

export const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="SplashScreenStack"
        screenOptions={{headerShown: false}}>
        <Stack.Screen
          name="SplashScreenStack"
          component={SplashScreenStack}
          options={{gestureEnabled: false}}
        />
        <Stack.Screen
          name="BottomTabNavigator"
          component={BottomTabNavigator}
          options={{gestureEnabled: false}}
        />
        <Stack.Screen
          name="DrawerNavigator"
          component={DrawerNavigator}
          options={{gestureEnabled: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

My Bottom Tab =>

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {
  EcardScreenStack,
  HomeScreenStack,
  MyActivitiesScreenStack,
} from './StackNavigator';
import BottomTabBar from '../components/bottomTabBar/BottomTabBar';

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={({route}) => ({
        tabBarStyle:
          route.name === 'eCard' ? {display: 'none'} : {display: 'flex'},
      })}
      tabBar={props => <BottomTabBar {...props} />}>
      <Tab.Screen
        name="Home"
        component={HomeScreenStack}
        options={{headerShown: false}}
      />
      <Tab.Screen
        name="eCard"
        component={EcardScreenStack}
        options={{headerShown: false}}
      />
      <Tab.Screen name="My Activities" component={MyActivitiesScreenStack} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;

Drawer =>

import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import BottomTabNavigator from './TabNavigator';
import DrawerScreen from '../screens/drawer/Drawer';

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        swipeEdgeWidth: 0.2,
        drawerType: 'front',
        swipeEnabled: true,
        overlayColor: '#292929',
      }}
      drawerContent={props => <DrawerScreen {...props} />}>
      <Drawer.Screen name="BottomTabNavigator" component={BottomTabNavigator} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

Stack =>

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import LoginScreen from '../screens/loginScreen/LoginScreen';
import MyActivityScreen from '../screens/myActivityScreen/MyActicityScreen';
import HomeScreen from '../screens/homeScreen/HomeScreen';
import SplashViewScreen from '../screens/splashScreen/SplashScreen';
import PassionCategory from '../screens/homeScreen/passionDeals/passionCategory/PassionCategory';
import PassionFilter from '../screens/homeScreen/passionDeals/passionFilter/PassionFilter';

const Stack = createNativeStackNavigator();

export const SplashScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="SplashScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="SplashScreen" component={SplashViewScreen} />
    </Stack.Navigator>
  );
};

export const HomeScreenStack = ({navigation}: {navigation: any}) => {
  return (
    <Stack.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="PassionCategory" component={PassionCategory} />
      <Stack.Screen name="PassionFilter" component={PassionFilter} />
    </Stack.Navigator>
  );
};

export const EcardScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="LoginScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  );
};

export const MyActivitiesScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="MyActivity"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="MyActivity" component={MyActivityScreen} />
    </Stack.Navigator>
  );
};

I need to hide the bottom tab bar only for <Stack.Screen name="PassionFilter" component={PassionFilter} /> . I have to hide the bottom tab bar for e-card stack also. Fo that I have used tabBarStyle: route.name === 'eCard' ? {display: 'none'} : {display: 'flex'}, and hide the bottom bar. I am unable to do something like that here because, in the current version on the react-navigation we are unable to capture the nested stack screens.

If there is any idea how to achieve this it will be really helpful for many. Thank you in advance for your help. [I am using class component]