Material TopBar and Material BottomBar for each screen in react native app

Question

I am working on a React Native app and want to incorporate a Bottom Navigation bar to go through certains screens and a Top Navigation Bar to showcase Profile Button and Settings Button. However, I am having issues getting both the navigation bars to show on all screens. I am also using React Native Paper for styling and only the Bottom Navigation Bar is getting styled and not the Top Navigation Bar.

Bars.js - I have a TopTab function for all Top Navigation Tab, a Tab function for all Bottom Tabs and a Layout function to wrap those two tabs together.

import * as React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { MainFeed } from '../Feeds/Home';
import { SocialFeed } from '../Feeds/SocialFeed';
import { FoodFeed } from '../Feeds/FoodFeed';
import { TutoringFeed } from '../Feeds/TutoringFeed';
import { GigWorkFeed } from '../Feeds/GigworkFeed';
import { Portal, FAB } from 'react-native-paper';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


const Stack = createNativeStackNavigator();
const TopTab = createMaterialTopTabNavigator();
const Tab = createMaterialBottomTabNavigator();

export const Tabs = () => {
    return (
      <React.Fragment>
        <Tab.Navigator
        shifting={true}
        sceneAnimationEnabled={true}
        >
            <Tab.Screen 
            name="Home" 
            component={MainFeed}
            options={{
                tabBarIcon: 'home',
              }}/> 
            <Tab.Screen 
            name="Social" 
            component={SocialFeed}
            options={{
                tabBarIcon: 'account-group',
              }}/> 
            <Tab.Screen 
            name="Food" 
            component={FoodFeed}
            options={{
                tabBarIcon: 'food',
              }}/> 
            <Tab.Screen 
            name="Tutoring" 
            component={TutoringFeed}
            options={{
                tabBarIcon: 'notebook',
              }}/> 
            <Tab.Screen 
            name="GigWork" 
            component={GigWorkFeed}
            options={{
                tabBarIcon: 'briefcase',
              }}/> 
        </Tab.Navigator>
        <Portal>
        <FAB
          icon="plus"
          style={{
            position: 'absolute',
            bottom: 150,
            right: 16,
            borderRadius:50
          }}
        />
      </Portal>
        </React.Fragment>
    );  
}; 

export const TopTabs = () => {
  return (
  <TopTab.Navigator>
  <Tab.Screen name="Home" component={MainFeed} />
  <Tab.Screen name="Social" component={SocialFeed} />
</TopTab.Navigator>
)};

export const Layout = () => {
  return (
  <Stack.Navigator>
  <Stack.Screen name="BottomBar" component={Tabs} />
  <Stack.Screen name="TopBar" component={TopTabs} /> //Ignore the screen title here, I will update them later to the correct one
  </Stack.Navigator>
  )
}

App.js - I use as a wrapper to wrap all my current and future screens in those two tabs. However, only either of the tab shows up based on which is first in the Layout function. Currently, BottomBar shows up since Tabs component is the first screen in the Layout function. How can I show these two Bars on every screen and wrap them in react native paper? Thanks!

import { Provider as PaperProvider, TextInput } from "react-native-paper";
import { LoginScreen } from "./App/Screens/Login/login.screen";
import { SignUpScreen } from "./App/Screens/SignUp/signup.screen";
import { Settings } from "./App/Screens/Settings/settings.screen";
import { Password } from "./App/Screens/Settings/password.screen";
import { Dob } from "./App/Screens/Settings/dob.screen";
import { EmailChange } from "./App/Screens/Settings/email.screens";
import { NavigationContainer, StackActions } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { withAuthenticator } from "aws-amplify-react-native";
import Amplify from "@aws-amplify/core";
import awsConfig from "./aws-exports";
import awsmobile from "./aws-exports";
import { Tabs } from "./App/Screens/Navigation/Bars";
import { Layout } from "./App/Screens/Navigation/Bars";


Amplify.configure({ awsConfig, ...awsmobile, Analytics: { disabled: true } });

const Stack = createNativeStackNavigator();

const signUpConfig = {
  hiddenDefaults: ["phone_number"],
  signUpFields: [
    {
      label: "Name",
      key: "name",
      required: true,
      displayOrder: 1,
      type: "name",
      custom: false,
    },
  ],
};

function App() {
  return (
    <PaperProvider>
    <NavigationContainer>
    <Layout>     
      <Stack.Navigator
        screenOptions={{ headerShown: true }}
      >
        <Stack.Screen name="Settings" component={Settings} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
        <Stack.Screen name="Password" component={Password} />
        <Stack.Screen name="Dob" component={Dob} />
        <Stack.Screen name="EmailChange" component={EmailChange} />
      </Stack.Navigator>
    </Layout>    
    </NavigationContainer>
    </PaperProvider>
  );
}

export default withAuthenticator(App, { signUpConfig, includeGreetings: true});