3 thoughts on “support scrollable tab bar?

  1. Looking at this myself, I’ve currently got a custom implementation of a horizontal scroll tab bar, where the items extends the width of the page. I just created a TabNavigator with lots of pages (A-T) and no options.

    image

    It seems that it scrolls off by default, however the items the active bar below is 1/19th of the screen width. Couple things which would make this work:

    1. If the width of the container extends the device width (so it’s scrolling), the active bar should be the width of the items.

    2. If I click an item (e.g. J) it should ideally animate both the active bar & scroll area so the item is in view. Also the same with swiping along.

  2. Am I right in saying scrollEnabled: true only works for when tabBarComponent: TabView.TabBarTop? Didn’t work for me in the iPhone simulator without using the Android TabNavigator presets.

    What I did to get a long scrolling set of tabs was set my tabs config to the following

    const tabsConfig = {
      ...TabNavigator.Presets.AndroidTopTabs,
      lazyLoad: true,
      initialRouteName: '5 Feb',
      tabBarOptions: {
        scrollEnabled: true,
        style: {
          backgroundColor: 'purple'
        },
        labelStyle: {
          fontSize: 12
        },
        tabStyle: {
          width: 60
        },
        indicatorStyle: {
          backgroundColor: 'teal'
        }
      }
    };
    
    TabNavigator(routeConfigs, tabsConfig);
    

    The only required attributes being ...TabNavigator.Presets.AndroidTopTabs, see TabNavigator.js and scrollEnabled

Comments are closed.