How do I get a BottomTabNavigator in React Navigation to display a Modal StackNavigator?

Question

I have a bottom tab navigator with a handful of tabs.

When the user isn't logged under certain conditions I wanna navigate to a modal screen that is a stack navigator.

How do I do this register the navigator with my bottom tab navigator without it being a tab?

Answer 1

Solution

Wrap your main BottomTabNavigator and Login Screen(StackNavigator) using StackNavigator with Modal mode.

For example

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createStackNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
    mode: 'modal',
  }
));

Official will be helped.