Using Drawer Navigation alongside Bottom Bar Navigation React Native

Question

I'm still fairly new to app dev but I'm trying to design my UI where after sign in, it shows a drawer navigation on the top of my screen and a bottom bar navigation at the same time, allowing me to browse through pages seamlessly. Right now it designed where I have the drawer navigation and it can take you to the home page and profile page. I only want it to take me to the profile page because home is apart if the bottom bar nav. I'm just confused at this point as to how i may carry it out. It also has home as the header for every screen I'm on, next to the drawer navigation.

import { createDrawerNavigator } from '@react-navigation/drawer';
import React from 'react';
import Profile from '../screens/Profile';
import Home from '../screens/Home';
import Campus from '../screens/Campus';
import Inbox from '../screens/Inbox';
import TabNavigator from './TabNavigator';
import Ionicons from "@expo/vector-icons/Ionicons";

const Drawer = createDrawerNavigator();

function DrawerNavigator() {
  return (
    <Drawer.Navigator screenOptions={{ 
        headerShown: true }}>
      <Drawer.Screen name="Home"  
      component={TabNavigator} 
      options = {{ 
        drawerIcon: ({ color }) => (
            <Ionicons 
            name="home" 
            size={20} 
            color={color} />
          )
        }} />
      <Drawer.Screen name="Profile" 
      component={Profile}
      options = {{ 
        drawerIcon: ({ color }) => (
            <Ionicons 
            name="person-circle-outline" 
            size ={20} 
            color = {color} /> 
          )
        }}
       />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

import { View, Text } from "react-native";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createDrawerNavigator } from '@react-navigation/drawer';
import SignIn from "../screens/SignIn";
import SignUp from "../screens/SignUp";
import ConfirmEmail from "../screens/ConfirmEmail";
import ForgotPassword from "../screens/ForgotPassword";
import ResetPassword from "../screens/ResetPassword";
import DrawerNavigator from "./DrawerNavigator"
import TabNavigator from "./TabNavigator";

const Navigation = () => {
  const Stack = createNativeStackNavigator();
  const Drawer = createDrawerNavigator();
  
  
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="SignIn" component={SignIn} />
        <Stack.Screen name="SignUp" component={SignUp} />
        <Stack.Screen name="ConfirmEmail" component={ConfirmEmail} />
        <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
        <Stack.Screen name="ResetPassword" component={ResetPassword} />


        <Stack.Screen name="TabNavigator" component={DrawerNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createDrawerNavigator } from '@react-navigation/drawer';
import { StyleSheet } from "react-native";
import Home from "../screens/Home";
import Campus from "../screens/Campus";
import Create from "../screens/Create";
import Inbox from "../screens/Inbox";
import Messages from "../screens/Messages";
import Ionicons from "@expo/vector-icons/Ionicons";

const Tab = createBottomTabNavigator();



const TabNavigator = () => {

  
  return (
    <Tab.Navigator 
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: "white",
        tabBarInactiveTintColor: "#071E22",
        tabBarStyle: styles.tabBar,
      }}
    >
      
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarIcon: ({ color }) => (
            <Ionicons name="home" size={20} color={color} />
          ),
          headerStyle: styles.tabHeader,
        }}
      />
      <Tab.Screen
        name="Campus"
        component={Campus}
        options={{
          tabBarIcon: ({ color }) => (
            <Ionicons name="book" size={20} color={color} />
          ),
          headerStyle: styles.tabHeader,
        }}
      />
      <Tab.Screen
        name="Create"
        component={Create}
        options={{
          tabBarIcon: ({ color }) => (
            <Ionicons name="add-circle-outline" size={20} color={color} />
          ),
          headerStyle: styles.tabHeader,
        }}
      />
      <Tab.Screen
        name="Inbox"
        component={Inbox}
        options={{
          tabBarIcon: ({ color }) => (
            <Ionicons name="mail" size={20} color={color} />
          ),
          headerStyle: styles.tabHeader,
          tabBarBadge: 3,
          tabBarBadgeStyle: styles.tabBarBadge,
        }}
      />
      <Tab.Screen
        name="Messages"
        component={Messages}
        options={{
          tabBarIcon: ({ color }) => (
            <Ionicons name="chatbox" size={20} color={color} />
          ),
          headerStyle: styles.tabHeader,
          tabBarBadge: 3,
          tabBarBadgeStyle: styles.tabBarBadge,
        }}
      />
    </Tab.Navigator>
  );
};

export default TabNavigator;


const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: "#83d4d0",
  },
  tabBarBadge: {
    backgroundColor: "red",
  },
});

I've tried hiding the header for the drawer navigation which somewhat helps, but regardless home would still be apart of my navigation list. I tried to just have profile as part of my Drawer Navigation but it's when i get to my Navigation file that i'm confused on implementation.