Reversing tab navigator direction to support RTL react navigation

Question

I have been trying to change the tab direction to RTL instead of LTR. Unfortunately, I cannot find out how it works. I used flextDirection in tabBarStyle or style props as "row" or "row-reverse", but when I did so, the whole tab was removed. It only appeared when using column or column-reverse showing at the top or bottom of the screen. Here is my code:

const Tab = createMaterialBottomTabNavigator();

        <Tab.Navigator
            activeColor={theme.colors.text}
            inactiveColor={theme.colors.textAlt}
            barStyle={{
                backgroundColor: theme.colors.background,
                flexDirection: "row-reverse", //In this case an empty tab bar only appears with no screens. Screens only appear when it changes to column
            }}
            shifting={true}
            screenOptions={defaultNavOptions}>
            <Tab.Screen
                name={userConfig.appTexts.homeScreenName}
                component={AppNavigator}
                options={{
                    tabBarIcon: ({ color, size }) => {
                        return <Ionicons name="ios-home" color={color} size={22} />;
                    },
                }}
                initialParams={{ theme, taxonomy }}
            />
            <Tab.Screen
                name={userConfig.appTexts.settingScreenName}
                component={SettingNavigator}
                options={{
                    tabBarIcon: ({ color, size }) => {
                        return <Ionicons name="ios-settings" color={color} size={22} />;
                    },
                }}
                initialParams={{ theme }}
            />
            <Tab.Screen
                name={userConfig.appTexts.savedScreenName}
                component={PostNavigator}
                options={{
                    tabBarIcon: ({ color, size }) => {
                        return <Ionicons name="md-bookmark" color={color} size={22} />;
                    },
                }}
                initialParams={{ saved: true, theme }}
            />
        </Tab.Navigator>

Answer 1

I guess you can change style in the tabBarOptions :

<Tab.Navigator
    tabBarOptions={{
        style: {transform: [{scaleX: -1}]},
    }}> {Your}
</Tab.Navigator>