React Native Display Modal from React Navigation Drawer

Question

I have an application and I would like to have certain navigation routes display modals over the current page when the user clicks them as opposed to navigating to an entirely different page. My existing code is:

const DrawerNavigator = () => {
    return (
      <Drawer.Navigator>
        <Drawer.Screen name="My Porfolio" component={Portfolio} />
        <Drawer.Screen name="Account" component={Account} />
        <Drawer.Screen name="NBA" component = {NBALobby} />
        <Drawer.Screen name="NFL" component = {NFLLobby} />
        <Drawer.Screen name="How To Play" component = {HowToPlayModal} />
      </Drawer.Navigator>
    );
  }

My modal displays as expected, however it seems to display over a new, completely blank page. Is there a way to maybe call a function from the Drawer Navigator that would display the modal?

My Modal code is:

import React, { Component, useState } from 'react';
import {Text, TextInput, View, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';

import {styles} from '../styles/signUpIn';
    
const HowToPlayModal = () => {
    
    return(
        <Modal isVisible = {true}>
                <View style={styles.container2}>
                <View style={{flexDirection: 'row'}}>
                        <Text style={styles.title}>How To Play</Text>
                        <View style= {{flex:1, alignItems: 'flex-end'}}>
                                <Text style={[styles.fieldTitle, {marginLeft: 0}]}>Remember?</Text>
                                <Text style={styles.accent} >Sign In</Text>
                        </View>      
                </View>
                </View>
        </Modal>
        );
}
    
export default HowToPlayModal;

wobsoriano · Accepted Answer · 2021-07-07T06:12:52.547

You need to create a Root Stack Navigator that will include the Modal component and your Drawer Navigator.

const Drawer = createDrawerNavigator();
const RootStack = createStackNavigator();

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="My Porfolio" component={Portfolio} />
            <Drawer.Screen name="Account" component={Account} />
            <Drawer.Screen name="NBA" component = {NBALobby} />
            <Drawer.Screen name="NFL" component = {NFLLobby} />
        </Drawer.Navigator>
    );
};

const RootStackScreen = () => {
  return (
    <NavigationContainer>
        <RootStack.Navigator mode="modal">
            <RootStack.Screen
                name="Main"
                component={DrawerNavigator}
                options={{ headerShown: false }}
            />
            <RootStack.Screen name="HowToPlayModal" component={HowToPlayModal} />
        </RootStack.Navigator>
    </NavigationContainer>
  );
}

Complete explanation can be found here https://reactnavigation.org/docs/drawer-based-navigation

For React Native Navigation v6, mode="modal" is removed in favor of presentation: 'modal'

React Native Display Modal from React Navigation Drawer

1 Answers1

Linked