rtl support for expo-router bottom tabs

52 views Asked by At

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?

0

There are 0 answers