'React native navigation: Use a modal screen inside a drawer navigator

I have been using a StackNavigator from React Navigation and I have been able to use presentation: 'modal' to show a screen as a modal within the stack.

I've now found it would be best to use a drawer navigator for a set of nested screens within my app.

However, now the screen doesn't act like a modal at all. Is it possible to have a modal screen within a drawer navigator?

My Drawer navigator looks liks:

const AccountDrawer = createDrawerNavigator()

function AccountScreen() {
    return (
        <AccountDrawer.Navigator initialRouteName="Overview">
            <AccountDrawer.Screen
                name="Overview"
                component={Account}
            />
            <AccountDrawer.Screen
                name="Login"
                component={LoginView}
                options={() => ({
                    title: 'Login or sign up',
                    presentation: 'modal',
                })}
            />
            <AccountDrawer.Screen
                name="About"
                component={About}
            />
        </AccountDrawer.Navigator>
    )
}

export default AccountScreen

Screenshot of what it looks like: enter image description here

Screenshot of what I need it to look like: enter image description here

Is this even possible with a drawer?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source