indicatorStyle get width of last element on first element in RTL

[shahanahmed86]

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>;

https://user-images.githubusercontent.com/42711061/235882825-76e7e96a-857b-4725-8d29-65d384a6c2a8.mp4

[ibrahim7elmasry]

@shahanahmed86 any updates for this issue?

[shahanahmed86]

@shahanahmed86 any updates for this issue?

nope

[ibrahim7elmasry]

try to make scrollEnabled={false}

[shahanahmed86]

try to make scrollEnabled={false}

I did that also but that didn't work. Moreover, the project is now closed.