indicatorStyle get width of last element on first element in RTL #338
Description
My app runs perfectly fine in English but when I select Urdu or any other language and then I set it with the I18nManager utility then the indicator gets the width of the last element from the list and places it underneath the first element. Is there any quick fix for that?
environment:
node: 16.19.1
yarn: 1.22.19
npm: 8.19.3
dependencies:
"react-native": "0.66.1"
"react-native-collapsible-tab-view": "^5.0.0-rc.13"
"react-native-pager-view": "^6.0.0"
"react-native-reanimated": "^2.10.0"
my code is as follows:
<Tabs.Container
headerContainerStyle={{ elevation: 0, shadowOpacity: 0 }}
headerHeight={HEADER_COLLAPSED_HEIGHT}
lazy
revealHeaderOnScroll
onIndexChange={setActiveTabIndex}
renderTabBar={(props) => {
return (
<MaterialTabBar
{...props}
keepActiveTabCentered
activeColor={COLORS.primary}
inactiveColor={COLORS.primaryText}
index={activeTabIndex}
indicatorStyle={{ backgroundColor: COLORS.primary, height: 2, padding: 0, bottom: 8 }}
tabStyle={{
width: 'auto',
margin: 0,
marginRight: SIZES.margin5,
paddingHorizontal: 0,
marginHorizontal: 0
}}
labelStyle={categoryText}
contentContainerStyle={{
paddingHorizontal: SIZES.margin3,
backgroundColor: COLORS.bgGray,
width: 'auto'
}}
scrollEnabled
/>
);
}}
renderHeader={Header}
>
{categories.map((item, i) => {
return (
<Tabs.Tab name={item.name} key={`cat-${item.name}-index-${i}`}>
<CatFlatList item={item} setError={setError} />
</Tabs.Tab>
);
})}
</Tabs.Container>;