React-Native nested navigation not working in expo

I'm using the React Native Stack Navigation to configure the header in my app and then nest a Drawer Navigation inside of it.

In the android emulator, everything is working fine. But whenever I try to open the app using expo, there's nothing more then a white blank screen. Developer tools aren't logging any errors, Expo itself doesn't give me an error nor does the terminal.

I tried replacing the whole navigation with just a <Text> component and in this case Expo shows the text. But I can't seem to find what I'm doing wrong. Some help would be much appreciated since I'm just learning React Native.

This is my code:

index.tsx

import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.tsx

import React, {Component} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import RootStack from './src/__plugins/navigation';

export default class App extends Component {
  render() {
    return (
        <NavigationContainer>
            <RootStack />
        </NavigationContainer>
    );
  }
}

navigation/index.tsx

import {createStackNavigator} from '@react-navigation/stack';
import SignOutModalScreen from '../../_view/SignOutModalScreen';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {faBars, faSignOutAlt, faTimes} from '@fortawesome/free-solid-svg-icons';
import {StyleSheet} from 'react-native';
import StartDrawer from './StartDrawer';
import {DrawerActions} from '@react-navigation/native';

export enum RoutingStack {
    START = 'start',
    GAME = 'main'
}

export enum RoutingDrawer {
    START = 'start',
    GAME = 'game'
}

export enum RoutingIdentifier {
    JOIN_SCREEN = 'join',
    GAME_SCREEN = 'game',
    HELP_SCREEN = 'help',
    SIGNOUT_SCREEN = 'sign_out'
}

const Stack = createStackNavigator();

const RootStack = () => {
    return (
        <Stack.Navigator
          mode="modal"
          screenOptions={({ navigation }) => ({
            headerStyle: {
              backgroundColor: '#80cbc4',
            },
            headerLeft: () => {
              return (
                <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer)}>
                  <FontAwesomeIcon icon={faBars} style={styles.menuIcon} />
                </TouchableOpacity>
              );
            },
            headerRight: () => {
              return (
                <TouchableOpacity onPress={() => navigation.navigate(RoutingIdentifier.SIGNOUT_SCREEN)}>
                  <FontAwesomeIcon icon={faSignOutAlt} style={styles.signOutIcon} />
                </TouchableOpacity>
              );
            },
          })}
        >
            <Stack.Screen
              name={RoutingDrawer.START}
              component={StartDrawer}
              options={{ title: '' }}
            />

            <Stack.Screen
              name={RoutingIdentifier.SIGNOUT_SCREEN}
              component={SignOutModalScreen}
              options={({ navigation }) => ({
                headerTitle: '',
                headerStyle: {
                  elevation: 0,
                  backgroundColor: '#F5FCFF',
                },
                headerLeft: () => {
                  return (
                    <TouchableOpacity onPress={() => navigation.navigate(RoutingDrawer.START)}>
                      <FontAwesomeIcon icon={faTimes} style={styles.closeIcon} />
                    </TouchableOpacity>
                  );
                },
              })}
            />
        </Stack.Navigator>
    );
};

const styles = StyleSheet.create({
    closeIcon: {
        marginStart: 10,
        color: 'black',
    },
    menuIcon: {
        marginStart: 10,
        color: 'white',
    },
    signOutIcon: {
        marginEnd: 10,
        color: 'white',
    },
});

export default RootStack;

And the StartDrawer.tsx

import {createDrawerNavigator} from '@react-navigation/drawer';
import {RoutingIdentifier} from './index';
import JoinPage from '../../join/_view/JoinScreen';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {faQuestionCircle, faSignInAlt} from '@fortawesome/free-solid-svg-icons';
import {StyleSheet} from 'react-native';
import {trans} from '../i18n';

const Drawer = createDrawerNavigator();

const StartDrawer: FC = () => {
    return (
        <Drawer.Navigator drawerType="slide" hideStatusBar={false}>
            <Drawer.Screen
                name={RoutingIdentifier.JOIN_SCREEN}
                component={JoinPage}
                options={{
                    drawerLabel: trans.getString('MENU_START_GAME'),
                    drawerIcon: () => (
                        <FontAwesomeIcon icon={faSignInAlt} style={styles.icon} />
                    ),
                }}
            />
            <Drawer.Screen
                name={RoutingIdentifier.HELP_SCREEN}
                component={() => null}
                options={{
                    drawerLabel: trans.getString('MENU_HELP'),
                    drawerIcon: () => (
                        <FontAwesomeIcon icon={faQuestionCircle} style={styles.icon} />
                    ),
                }}
            />
        </Drawer.Navigator>
    );
};

const styles = StyleSheet.create({
    icon: {
        marginEnd: -20,
        marginStart: 10,
    },
});

export default StartDrawer;