I'm using expo-router in my react-native project. I encountered a problem in making the bottom tabs of the application. The problem is that I don't know exactly how to start the tabs from the right side because my application is in Farsi.
This is a summary of my code for the bottom tabs
<Tabs
screenOptions={{
tabBarShowLabel: false,
tabBarStyle: {
height: 70,
borderTopStartRadius: SIZES.xxLarge,
borderTopEndRadius: SIZES.xxLarge,
backgroundColor: COLORS.white,
borderWidth: 0,
},
}}
>
<Tabs.Screen
name="home/index"
options={{
tabBarIcon: ({ focused }) => (
//home icon
),
title: "home",
}}
/>
<Tabs.Screen
name="action/index"
options={{
tabBarIcon: ({ focused }) => (
//add Icon
),
title: "add",
}}
/>
<Tabs.Screen
name="print/index"
options={{
tabBarIcon: ({ focused }) => (
//Print icon
),
title: "Print",
}}
/>
</Tabs>
I want the bottom tabs to be arranged like this:
print add home
But obviously they start from the left by default
Home add Print
I tried wrapping my tabs with and give a flex-direction like so :
flex: 1,
flexDirection: "row-reverse",
but it didnt work for me ! Does anyone have an idea how I can solve this problem?