How to nest stack navigator, bottom tab navigator and drawer navigator?

Question

I have been trying to nest stack navigator inside bottom tab navigator and which has been nested into drawer navigator. In terms of nesting, bottom tab navigator is at the top, then bottom tab navigator and then at the end stack navigator. I have done this so that my bottom tab navigator appears in some of the screens and my drawer appears in all the screens. I have created stacknavigator in order to design the header which is not possible in the case of other navigators.

But I have been unable to do so. My code is running properly without any error but as output, blank screen appears. I am unable to get the desired output and the program is not showing any error.

This is App.js. It contains drawer navigator.

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';


import DocDetails from './DocsScreen';
import Settings from './SettingsScreen';
import DoubtsQ from './DoubtsScreen';
import HelpScreen from './HelpScreen';
import Blocked from './BlockedScreen';
import ProfileStack from './ProfileScreen';
import WhatsUpstack from './WhatsUpscreen';
import { createDrawerNavigator } from '@react-navigation/drawer';


const Drawer = createDrawerNavigator();

export default App=() => ( 
<NavigationContainer>
    <Drawer.Navigator initialRouteName="WhatsUp" drawerPosition="right" > 
        <Drawer.Screen name="WhatsUp" component={WhatsUpstack} options= {{ title:'Main Screen'}} />
        <Drawer.Screen name="Your Profile" component={ProfileStack}/>
        <Drawer.Screen name="Docs" component={DocDetails} options= {{ title:'Your Documents'}} />
        <Drawer.Screen name="Doubts" component={DoubtsQ} options= {{ title:'Your Doubts'}} />
        <Drawer.Screen name="Block" component={Blocked} options= {{ title:'Blocked Details'}} />
        <Drawer.Screen name="Help" component={HelpScreen}/>
        <Drawer.Screen name="Settings" component={Settings}/>
    </Drawer.Navigator>
  </NavigationContainer>
);

This is BottomTab.js where I have created bottom tab navigator. All the components in bottom tab navigator are stack components so that my bottom tab appears in all the screens of the stacks.

BottomTab.js

import React from 'react';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Icon from 'react-native-ionicons';

import WhatsUpstack from './WhatsUpscreen';
import SyllabusStack from './SyllabusScreen';
import RecessStack from './RecessScreen';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

export default BottomTab=() => (
  <Tab.Navigator initialRouteName="WhatsUp"  tabBarOptions={{ activeTintColor: '#e91e63', }} >
    <Tab.Screen name="WhatsUp" component={WhatsUpstack} options={{ tabBarLabel: 'WhatsUp', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="wechat" color={"#000000"} size={30} />), }}/>
    <Tab.Screen name="Syllabus" component={SyllabusStack} options={{ tabBarLabel: 'Syllabus', tabBarIcon: ({ color, size}) => (<MaterialCommunityIcons name="book-open-page-variant" color={"#000000"} size={30} />), }}/>
    <Tab.Screen name="Recess" component={RecessStack} options={{ tabBarLabel: 'Recess', tabBarIcon: ({ color, size}) => (<Icon name="game-controller" color={"#0000FF"} size={30} />), }}/>
  </Tab.Navigator>
);

This is WhatsUpScreen.js where I have imported my bottom tab navigator. It also contains 2 functions WhatsUp and WhatsUpStack.

WhatsUpScreen.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

import DocDetails from './DocsScreen';
import ChatBox from './ChatBox';
import BottomTab from './BottomTab';

function WhatsUp({navigation}) {
  return (
    <View style={styles.container}>
      <Text>All the chats will take place here</Text>
      <StatusBar style="auto" />
      <BottomTab/>
    </View>
  );
}

const Stack= createStackNavigator();

export default function WhatsUpstack() {
  return ( 
            <Stack.Navigator>
              <Stack.Screen name="WhatsUp" component={WhatsUp}/>
              <Stack.Screen name= "Docs" component={DocDetails} />
              <Stack.Screen name= "Sample" component={ChatBox} />
            </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

This is RecessScreen.js which will contain 2 functions RecessStack and Recess.

RecessScreen.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

function Recess({navigation}) {
  return (
    <View style={styles.container}>
      <Text>All the games will exist here!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const Stack= createStackNavigator();

export default function RecessStack() {
  return ( 
            <Stack.Navigator>
              <Stack.Screen name="Games" component={Recess}/>
            </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

SyllabusScreen.js contains two functions Syllabus() and SyllabusStack.

SyllabusScreen.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

import DoubtsQ from './DoubtsScreen';

function Syllabus({navigation}) {
  return (
    <View style={styles.container}>
      <Text>All the details for doubts and syllabus will exist here!!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const Stack= createStackNavigator();

export default function SyllabusStack()
{
  return(
          <Stack.Navigator>
            <Stack.Screen name="Syllabus-wise video links" component={Syllabus}/>
            <Stack.Screen name="Doubts" component={DoubtsQ}/>
          </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});