Indicator width on Scrollable Tabs

[pedrobern]

Indicator width on Scrollable Tabs

[PedroBern]

The tabs follow the refMap object keys order, and your screen components also should match this order. How are your refMap and screens arranged?

[alexpchin]

Hi @PedroBern

My refMap is:

/**
 * This sets the names of the tabs
 */
const [refMap] = useState({
  [t('screens.Search.tabs.tattoos')]: tattoosRef,
  [t('screens.Search.tabs.artists')]: artistsRef,
  [t('screens.Search.tabs.studios')]: studiosRef,
  [t('screens.Search.tabs.collectors')]: collectorsRef,
});

With my Tab.Container code looking like:

<Tabs.Container
  containerRef={containerRef}
  HeaderComponent={_renderHeader}
  headerContainerStyle={TabBarStyle.headerContainerStyle}
  lazy
  onIndexChange={onIndexChange}
  refMap={refMap}
  snapEnabled
  TabBarComponent={_renderTabBar}
>
  <SearchTattoos name={t('screens.Search.tabs.tattoos')} />
  <SearchArtists name={t('screens.Search.tabs.artists')} />
  <SearchStudios name={t('screens.Search.tabs.studios')} />
  <SearchCollectors name={t('screens.Search.tabs.collectors')} />
</Tabs.Container>

This issue also appears in the example, displayed here: #79

[alexpchin]

Actually, I've just checked the current example for scrollable tabs, actually, the issue is also present there without any changes.

[alexpchin]

@PedroBern I've pushed what I think is a fix. I believe that we have to sort by onTabItemLayout by the x value as the order will be defined by the order that they are put on the screen, not their x position. After sorting I believe this is now working.

[PedroBern]

Hey alex I would recommend getting the tab names like this:

const [refMap] = useState({
  [screens.Search.tabs.tattoos]: tattoosRef,
  [screens.Search.tabs.artists]: artistsRef,
  [screens.Search.tabs.studios]: studiosRef,
  [screens.Search.tabs.collectors]: collectorsRef,
});

// on tabBar
getLabelText={(name) => t(name)}

Translating on the tab bar will prevent the whole thing to rerender if the user changes the idiom of the app.