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 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;