HOW TO: on tab icon press open modal

[veljkomatic]

I have 5 tab icons, but how can I make one of them to just open modal, not to navigate just open modal...For example you are on home screen and home icon is selected and you have another tab icon for example notify and when you click that tab icon I want just to open modal, I dont want to navigate on Notify screen I want to stay on home screen. How can I do that ?
Thanks

[augustoabreu]

#525 #314 #1059 #1335 may help you

[TomAtterton]

@veljkomatic
So i've managed to get it working by using the tabBarComponent inside the tabNavigatorConifg, you can stop the tab navigation from navigating depending on the index.

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

       )

Once you've done this, my method of showing the view modally on top of the tab views was to put the tabnavigator inside of a stacknavigatior and then just navigate to a new screen inside of the stacknavigator.

[veljkomatic]

@TomAtterton thanks a lot... so I will organize my router like
StackNavigator({
notify: {screen: notifyScreen},
tab: { screen: tabBarScreen)
})
I am wondering how to forbid swipe between notify and tab and how to set interval od transition of screen to 0..so no transition on notify.

Thank you

[dmr07]

+1

[spencercarli]

Hi! In an effort to get the hundreds of issues on this repo under control I'm closing issues tagged as questions. Please don't take this personally - it's simply something we need to do to get the issues to a manageable point. If you still have a question I encourage you to re-read the docs, ask on StackOverflow, or ask on the #react-navigation Reactiflux channel. Thank you!

[sean-macfarlane]

Solution doesn't work with v2

[itsmeek]

In v2, TabBarBottom has been depreciated as you can see from this thread (https://github.com/react-navigation/react-navigation/issues/4297). Because of this, to use a custom Tab Bar, we have to install BottomTabBar from react-navigation-tabs. It is also important to note that the prop jumpToIndex has been changed to jumpTo. Here is the new method to achieve this in v2 based on @TomAtterton's great answer

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import { YellowBox } from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';

import { BottomTabBar } from 'react-navigation-tabs';

import store from './src/store';

import ExploreScreen from './screens/Explore';
import CameraScreen from './screens/Camera';

const BottomTabBarWithModal = (props) => {
  const jumpTo = (index) => {
    const { navigation: { navigate }, jumpTo } = props;

    if (index === 'camera') {
        navigate('Camera');
    } else {
        jumpTo(index);
    }
  }

  return (
    <BottomTabBar {...props} jumpTo={jumpTo} />
  )
}

const rootConfig = {
  mode: 'modal',
  headerMode: 'none',
};

const tabConfig = {
  tabBarComponent: BottomTabBarWithModal,
}

const RootScreen = createBottomTabNavigator({
  explore: ExploreScreen,
  camera: CameraScreen,
}, tabConfig);

const Root = createStackNavigator({
  Root: RootScreen,
  Camera: CameraScreen,
}, rootConfig);

class App extends Component {
  componentDidMount() {
    YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
  }

  render() {
    return (
      <Provider store={store}>
        <Root />
      </Provider>
    );
  }
}

BottomTabBarWithModal.propTypes = {
  jumpTo: PropTypes.func.isRequired,
  navigation: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
}

export default App;

[sean-macfarlane]

I have come up with a simpler solution by using tabBarOnPress instead of changing the tabBarComponent. This works with v2 and the newest "react-navigation-tabs" version "0.3.0", because tabBarOnPress overrides the default jumpTo behaviour.

const RootScreen = createBottomTabNavigator({
  explore: ExploreScreen,
  camera:  {
        screen: CameraScreen,
        navigationOptions: ({ navigation }) => ({
            tabBarOnPress: ({ navigation }) => {
                navigation.navigate("Camera");
            }
        }),
    },
}, {});

const Root = createStackNavigator({
  Root: RootScreen,
  Camera: CameraScreen,
}, {
        headerMode: 'none',
        mode: 'modal',
    });

[ferostabio]

Hi, everyone. I'm trying to accomplish the exact same thing, but I'm encountering an issue. First of all, @sean-macfarlane 's solution doesn't do the trick since what I want is to prevent the tab to appear as selected (and what he does is... the tab is selected, only it also shows a modal).

Previous solution by @itsmeek appears to be what I want (also mentioned here. And I got it to work with a custom tab bar item, just like here here.

But if i try to do it with the BottomTabBar I get the following error:

TypeError: _this3.props.getAccessibilityLabel is not a function

This error is located at:
in TabBarBottom (at withDimensions.js:32)
in withDimensions(TabBatBottom) (at App.js:211)
in tabBarComponent (at createBottomTabNavigator.js:53)
in RCTView (at View.js:60)
in View (at createBottomTabNavigator.js:69)
in TabNavigationView (at createTbNavigator.js:80)
in NavigationView (at createNavigator.js:96)
in Navigator (at createNavigationContainer.js:387)
in NavigationContainer (at SceneView.js:10)
in SceneView (at StackViewLayout.js:439)
in RTCView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at StackViewCard.js:12)
in Card (at createPointerEventsContainer.js:28)
in Container (at StackViewLayout.js:488)
in RTCView (at Views.js:60)

[brentvatne]

@ferostar - create a new issue with full example please!