Enabling scroll on the tab navigation with TabNavigator.

[siddhism]

Current Behavior

providing scrollEnabled : true in TabNavigator doesn't make the tab bar scrollable.

export const Tabs = TabNavigator({
    all: {
      screen: TopicsFlatList,
      navigationOptions: {
        tabBarLabel: 'Feed',
        tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
      },
    },
    world: {
      screen: TopicsFlatList,
      navigationOptions: {
        tabBarLabel: 'world',
        tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
      },
    },
    // .... more categories here
},{
  'lazy': true,
  'scrollEnabled': true,
  'tabStyle': {
      width: 60
    },
  },
);

Expected Behavior

Tab bar should be scrollable.

related discussions :
#86
#133 (comment)

Here is how it looks

Your Environment

software	version
react-navigation	^1.0.0-beta.11
react-native	^0.44.0
node	v6.10.0
npm or yarn	4.1.2

[siddhism]

needed to be passed in tabBarOptions

export const Tabs = TabNavigator({
    all: {
      screen: TopicsFlatList,
      navigationOptions: {
        tabBarLabel: 'Feed',
        tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
      },
    },
    world: {
      screen: TopicsFlatList,
      navigationOptions: {
        tabBarLabel: 'world',
        tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
      },
    },
    // ... more here

},{
  'lazy': true,
  tabBarOptions: {
    scrollEnabled: true,
    activeTintColor: '#e91e63',
  },
  // 'tabBarComponent': TabView.TabBarTop,
},
);

works now.

[JoeeeeeWu]

good

[peni4142]

This does just work for me on Android. I have trouble on iOS. No scrolling tabbar.

export const Tabs = TabNavigator({
    Page1: {
        screen: Page1,
    },
    Page2:{
        screen: Page2,
    },
    Page3:{
        screen: Page3,
    },
    Page4:{
        screen: Page4,
    },
    Page5:{
        screen: Page5,
    },
},
    {
        swipeEnabled:false,
        animationEnabled: true,
        tabBarOptions: {
          scrollEnabled:true,
        },
})

Verionen:
"dependencies": {
"expo": "^23.0.4",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-swiper": "^1.5.13",
"react-navigation": "^1.0.0-beta.21"
}

[jack2684]

Same issue as @peni4142 expo 24.0.2, react native 0.51.0.

[peni4142]

Hi this issue is closed. I recognized it late, too. But I don't know if that is realy a bug, so I didn't open an other one.

[satya164]

It's not a bug. you need to use the TabBarTop component on iOS if you want the scroll behavior.

[peni4142]

I edited it now, but doesn't work:

{
        swipeEnabled:false,
        animationEnabled: true,
        tabBarPosition: 'top',
        tabBarOptions: {
          scrollEnabled:true,
          tabStyle:{
              width: 200,
          }
        },

but no scrollable Tabbar on iOS

[satya164]

you need to use the TabBarTop component

[AGurindapalli]

any example on how to use TabBarTop in the code..

[peni4142]

 

{
        swipeEnabled:false,
        animationEnabled: true,
        tabBarPosition: 'top',
        tabBarComponent: TabBarTop,
        tabBarOptions: {
          scrollEnabled:true,
        },

if I run the App on Android, I get an error by clicking on a tab....

Unsupported top level event type "topScroll" dispatched
extractEvents
C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3519:22
extractEvents
C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3298:71
handleTopLevel
C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3539:64

C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3560:55
batchedUpdates
C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:2754:26
batchedUpdates
C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:202:35
batchedUpdatesWithControlledComponents
C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:209:34
_receiveRootNodeIDEvent
C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3559:50
receiveEvent
C:\Users\user\App\App\node_modules\react-native\Libraries\Renderer\ReactNativeFiber-dev.js:3564:60
__callFunction
C:\Users\user\App\App\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:302:47

C:\Users\user\App\App\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116:26
__guard
C:\Users\user\App\App\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:265:6
callFunctionReturnFlushedQueue
C:\Users\user\App\App\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115:17

[HerlanAssis]

This works for me:
{
swipeEnabled:false,
animationEnabled: true,
tabBarPosition: 'top',
tabBarTopComponent: props => {
},

[mrafei]

@satya164
I want to reset the tabbar to active tab when user is scrolling in the current screen. This will help for a better user experience. Is it possible to manually scroll to a tab in tabbar?
Thanks.

[AbdelhalimAhmed]

i published a new article of my solution on Medium , you can see what have done.
https://medium.com/@abdelhalim.ahmed95/how-to-create-scrollable-and-dynamic-top-tabsbar-using-react-navigation-17ca52acbc51