Closed alexpchin closed 3 years ago
The tabs follow the refMap object keys order, and your screen components also should match this order. How are your refMap and screens arranged?
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
Actually, I've just checked the current example for scrollable tabs, actually, the issue is also present there without any changes.
@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.
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.
@PedroBern There may be an issue with the Indicator on the scrollable after #75 It's like the Tabs are in the wrong order?