CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
bobber205
bobber205

Reputation: 13372

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

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?

Upvotes: 0

Views: 309

Answers (1)

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4869

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.

Upvotes: 1

Related Questions