React Native RTL issue

[mktufan21]

The code is not working perfectly when I am changing to right to left , below I have added some dummy code to check I tried to add isRtl={I18nManager.isRTL} but looks like it is not working perfactly

there are some overlapping of component

<Tab.Navigator
            initialRouteName={TABS_ROUTES.ACCOUNT}
            tabBar={(props) => (
                <BottomFabBar
                    mode="default"
                    isRtl={I18nManager.isRTL}
                    focusedButtonStyle={{
                        shadowColor: '#000',
                        shadowOffset: {
                            width: 0,
                            height: 7,
                        },
                        shadowOpacity: 0.41,
                        shadowRadius: 9.11,
                        elevation: 14,
                    }}
                    bottomBarContainerStyle={{
                        position: 'absolute',
                        bottom: 0,
                        left: 0,
                        right: 0,
                    }}
                    {...props}
                />
            )}>
            <Tab.Screen
                name={TABS_ROUTES.ACCOUNT}
                component={HomeStack}
                options={({route}) => ({
                    headerShown: false,
                    tabBarLabel: t('accountMenuTitle'),
                    tabBarIcon: tabBarIcon(route),
                })}
            />
            <Tab.Screen
                name={TABS_ROUTES.PROJECTS}
                component={ProjectStack}
                options={({route}) => ({
                    headerShown: false,
                    tabBarLabel: t('projectMneuTitle'),
                    tabBarIcon: tabBarIcon(route),
                })}
            />
            <Tab.Screen
                name={TABS_ROUTES.INVOICE}
                component={InvoiceStack}
                options={({route}) => ({
                    headerShown: false,
                    tabBarLabel: t('invoiceMenuTitle'),
                    tabBarIcon: tabBarIcon(route),
                })}
            />
            <Tab.Screen
                name={TABS_ROUTES.SHARED}
                component={SharedResourceStack}
                initialParams={{
                    mfFooterConfig: homeFooterConfig.MAP_HOME,
                }}
                options={({route}) => ({
                    headerShown: false,
                    tabBarLabel: t('sharedMenuTitle'),
                    tabBarIcon: tabBarIcon(route),
                })}
            />
            <Tab.Screen
                name={TABS_ROUTES.MORE}
                component={MoreStack}
                options={({route}) => ({
                    headerShown: false,
                    tabBarLabel: t('moreMenuTitle'),
                    tabBarIcon: tabBarIcon(route),
                })}
            />
        </Tab.Navigator>

If I add a background Color overlap issue gone but icon look like this

bottomBarContainerStyle={{
                        position: 'absolute',
                        bottom: 0,
                        left: 0,
                        right: 0,

backgroundColor: '#FFFFFF',
                    }}

This is in Normal Mode