react native navigation - display header tab and bottom tab on all screens

Question

I am a newbie to react native and essentially I want a header logo with a title across my application. Below this header logo, I need a menu or tabs ( with a few links/tabs that users can click on ) Similarly a footer ( with different links/tabs that user can click on )

So this is how I approached it :

StackNavigator ( show header logo, header title )
   Screen >> BottomTabScreen ( within this screen is a Bottom Tab navigator )


BottomTabScreen
   BottomTabNavigator
      Screen >> TopTabScreen ( within this screen is a Top Tab Navigator )
      Screen >> B2
      Screen >> B3
      ...


 TopTabScreen
   TopTabNavigator
     Screen >> T1
     Screen >> T2
     Screen >> T3
     ...

So with this approach was able to load the application, attached screen print here

My questions are :

#1 with this approach in my bottom tab the first tab ( T ) when clicked will only get used to showing the top tab. Ideally, I would want to always show the top tab and when I click on the first bottom tab ( T ) it should show different screen/content in between the header tab and bottom tab

#2 if I click on any of the other bottom tabs ( B1 or B2 ), they navigate to the new screen BUT then the header tab menu is lost ( I need to ensure the header tab is shown always )

#3 when the application loads I would like to show a landing screen ( almost like a 'splash' screen ) but something that is not tied to any of the menu links ( neither topnav neither bottom nav )

Here is the code : ( App.js )

const StackNav = createNativeStackNavigator();
const TopNav = createMaterialTopTabNavigator();
const BottomNav = createMaterialBottomTabNavigator();


function App(){
  return (
   <NavigationContainer>
     <StackNav.Navigator>
      <StackNav.Screen name="Home" component={BottomTabScreen} 
         options={{ headerTitle: props => <LogoTitle {...props} />, headerBlurEffect: 'dark' 
          }} />                
      </StackNav.Navigator>    
   </NavigationContainer>
 );}

BottomTabScreen contains the BottomNavigator with the first screen containing TopTab:

 const BottomTabScreen = () =>{
   return (
     <BottomNav.Navigator>
        <BottomNav.Screen name="T" component={TopTabScreen}  />
        <BottomNav.Screen name="B1" component={B1Screen}  />
        <BottomNav.Screen name="B2" component={B2Screen} />     
     </BottomNav.Navigator>
   );
  }

The TopTabScreen which contains the TopTab Navigator :

 const TopTabScreen = () =>{
  return (
      <TopNav.Navigator>
          <TopNav.Screen name="About" component={AboutScreen}  />
          <TopNav.Screen name={"Find Us"} component={FindUsScreen} 
      />
          <TopNav.Screen name="Contact" component={ContactScreen}  />
          <TopNav.Screen name="Events" component={EventsScreen}  />      
     </TopNav.Navigator>    
  );

}