How to make a TabNavigator button by tapping a modal screen using React Navigation

Question

Using the navigation tab "Navigation Navigation" https://reactnavigation.org/docs/navigators/tab how to make one of the tab buttons by tapping the screen in full screen? I see that the stack navigator has a mode=modal option. How do I get this mode, which will be used when I click the TakePhoto tab TakePhoto ? Clicking on it currently still displays the tab bar below.

 const MyApp = TabNavigator({ Home: { screen: MyHomeScreen, }, TakePhoto: { screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal? }, }); 

Answer 1

In fact, there is no support in react-navigation to change the way you present on the fly from default to modal (see the discussion of this here ). I ran into the same problem and solved it using the very top StackNavigator with headerMode set to none and mode set to modal :

 const MainTabNavigator = TabNavigator( { Tab1Home: { screen: Tab1Screen }, Tab2Home: { screen: Tab2Screen } } ); const LoginRegisterStackNavigator = StackNavigator({ Login: { screen: LoginScreen } }); const ModalStackNavigator = StackNavigator({ MainTabNavigator: { screen: MainTabNavigator }, LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator } }, { headerMode: 'none', mode: 'modal' }); 

This allows me to do the following (using the abbreviation) in Tab1Screen and Tab2Screen to bring up a modal view from anywhere I want:

 this.props.navigation.navigate('LoginScreenStackNavigator'); 

Answer 2

Not sure if this is still relevant for you, but I managed to find it to achieve this.

So, I managed to get it to work using tabBarComponent inside tabNavigatorConifg, you can stop the navigation on the tab from navigation depending on the index.

  tabBarComponent: ({jumpToIndex, ...props, navigation}) => ( <TabBarBottom {...props} jumpToIndex={index => { if (index === 2) { navigation.navigate('camera') } else { jumpToIndex(index) } }} /> ) 

After you did this, my method of displaying a view in mod over tab views was to place the tabnavigator inside the navigatior stack, and then just go to the new screen inside the stacknavigator.

Answer 3

One way to make the tab bar go away is to hide the tabBar with visible: false :

 const MyApp = TabNavigator({ Home: { screen: MyHomeScreen, }, TakePhoto: { screen: PhotoPickerScreen, navigationOptions: { tabBar: { visible: false, }, }, }, }); 

However, it does not seem to cause any transition to full-screen mode, which I assume is desirable?

Another option would be to wrap PhotoPickerScreen inside the new StackNavigator and set this navigator to = 'modal' mode.

You may need to start navigating this modal from onPress to tabItem in some way (e.g. navigation.navigate('TakePhoto') .)

Notice I'm trying to wrap my head around the best way to structure navigation, so ...

The third option, implementing StackNavigator as the parent, and then adding MyApp TabNavigator as the first route inside it, might be the most flexible solution. Then the TakePhoto screen will be at the same level as the TabNavigator, allowing you to route it to wherever you are.

Hear what you come up with!

Answer 4

Documents are mixed in some areas, but here it is:

  export default class HomeScene extends Component { static navigationOptions = { title: 'foo', header:{ visible: true } } .... }