feat: Add layoutDirection prop to TabView for RTL support (#494)

* feat: Add `layoutDirection` prop to `TabView` for iOS RTL support, including a new example.

* Update packages/react-native-bottom-tabs/ios/TabViewProvider.swift

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* refactor: update layoutDirection prop to use 'locale' for consistency across components

* feat(android): add support for layout direction in ReactBottomNavigationView

* fix(iOS): enhance layout direction handling in NewTabView for better RTL support

* Update packages/react-native-bottom-tabs/ios/TabViewProps.swift

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update packages/react-native-bottom-tabs/ios/TabViewProvider.swift

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: update layoutDirection prop in FourTabsRTL to use 'rtl'

* fix: add to legacy tabview

---------

Co-authored-by: Ahmed Awaad <ashahin@bankaljazira.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Oskar Kwaśniewski <oskarkwasniewski@icloud.com>

Author: 4 people

apps/example/src/App.tsx

@@ -23,6 +23,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import JSBottomTabs from './Examples/JSBottomTabs';
 import ThreeTabs from './Examples/ThreeTabs';
 import FourTabs from './Examples/FourTabs';
+import FourTabsRTL from './Examples/FourTabsRTL';
 import MaterialBottomTabs from './Examples/MaterialBottomTabs';
 import SFSymbols from './Examples/SFSymbols';
 import LabeledTabs from './Examples/Labeled';
@@ -72,6 +73,9 @@ const FourTabsActiveIndicatorColor = () => {
 const UnlabeledTabs = () => {
   return <LabeledTabs showLabels={false} />;
 };
+const FourTabsRightToLeft = () => {
+  return <FourTabsRTL layoutDirection={'rtl'} />;
+};
 
 const examples = [
   {
@@ -161,6 +165,7 @@ const examples = [
     name: 'Bottom Accessory View',
     screenOptions: { headerShown: false },
   },
+  { component: FourTabsRightToLeft, name: 'Four Tabs - RTL' },
 ];
 
 function App() {

apps/example/src/Examples/FourTabsRTL.tsx

@@ -0,0 +1,95 @@
+import TabView, { SceneMap } from 'react-native-bottom-tabs';
+import React from 'react';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+import { I18nManager, type ColorValue } from 'react-native';
+import type { LayoutDirection } from 'react-native-bottom-tabs';
+
+interface Props {
+  disablePageAnimations?: boolean;
+  scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+  backgroundColor?: ColorValue;
+  translucent?: boolean;
+  hideOneTab?: boolean;
+  rippleColor?: ColorValue;
+  activeIndicatorColor?: ColorValue;
+  layoutDirection?: LayoutDirection;
+}
+
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+  chat: Chat,
+});
+
+export default function FourTabsRTL({
+  disablePageAnimations = false,
+  scrollEdgeAppearance = 'default',
+  backgroundColor,
+  translucent = true,
+  hideOneTab = false,
+  rippleColor,
+  activeIndicatorColor,
+  layoutDirection = 'locale',
+}: Props) {
+  React.useLayoutEffect(() => {
+    if (layoutDirection === 'rtl') {
+      I18nManager.allowRTL(true);
+      I18nManager.forceRTL(true);
+    }
+    return () => {
+      if (layoutDirection === 'rtl') {
+        I18nManager.allowRTL(false);
+        I18nManager.forceRTL(false);
+      }
+    };
+  }, [layoutDirection]);
+  const [index, setIndex] = React.useState(0);
+  const [routes] = React.useState([
+    {
+      key: 'article',
+      title: 'المقالات',
+      focusedIcon: require('../../assets/icons/article_dark.png'),
+      unfocusedIcon: require('../../assets/icons/chat_dark.png'),
+      badge: '!',
+    },
+    {
+      key: 'albums',
+      title: 'البومات',
+      focusedIcon: require('../../assets/icons/grid_dark.png'),
+      badge: '5',
+      hidden: hideOneTab,
+    },
+    {
+      key: 'contacts',
+      focusedIcon: require('../../assets/icons/person_dark.png'),
+      title: 'المتراسلين',
+      badge: ' ',
+    },
+    {
+      key: 'chat',
+      focusedIcon: require('../../assets/icons/chat_dark.png'),
+      title: 'المحادثات',
+      role: 'search',
+    },
+  ]);
+
+  return (
+    <TabView
+      sidebarAdaptable
+      disablePageAnimations={disablePageAnimations}
+      scrollEdgeAppearance={scrollEdgeAppearance}
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+      tabBarStyle={{ backgroundColor }}
+      translucent={translucent}
+      rippleColor={rippleColor}
+      activeIndicatorColor={activeIndicatorColor}
+      layoutDirection={layoutDirection}
+    />
+  );
+}

apps/example/src/Examples/MaterialBottomTabs.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
 import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';

apps/example/src/Examples/NativeBottomTabs.tsx

@@ -15,6 +15,7 @@ function NativeBottomTabs() {
       initialRouteName="Chat"
       labeled={true}
       hapticFeedbackEnabled={false}
+      layoutDirection="ltr"
       tabBarInactiveTintColor="#C57B57"
       tabBarActiveTintColor="#F7DBA7"
       tabBarStyle={{

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -127,6 +127,10 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
     layout(left, top, right, bottom)
   }
 
+  fun applyDirection(dir: Int) {
+      bottomNavigation.layoutDirection = dir   
+  }
+
   override fun requestLayout() {
     super.requestLayout()
     @Suppress("SENSELESS_COMPARISON") // layoutCallback can be null here since this method can be called in init

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt

@@ -167,6 +167,15 @@ class RCTTabViewManager(context: ReactApplicationContext) :
       view.isHapticFeedbackEnabled = value
   }
 
+  override fun setLayoutDirection(view: ReactBottomNavigationView, value: String?) {
+      val direction = when (value) {
+          "rtl" -> View.LAYOUT_DIRECTION_RTL
+          "ltr" -> View.LAYOUT_DIRECTION_LTR
+          else -> View.LAYOUT_DIRECTION_LOCALE
+      }
+      view.applyDirection(direction)
+  }
+
   override fun setFontFamily(view: ReactBottomNavigationView?, value: String?) {
     view?.setFontFamily(value)
   }

packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm

@@ -160,6 +160,10 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     _tabViewProvider.hapticFeedbackEnabled = newViewProps.hapticFeedbackEnabled;
   }
 
+  if (oldViewProps.layoutDirection != newViewProps.layoutDirection) {
+    _tabViewProvider.layoutDirection = RCTNSStringFromStringNilIfEmpty(newViewProps.layoutDirection);
+  }
+
   if (oldViewProps.fontSize != newViewProps.fontSize) {
     _tabViewProvider.fontSize = [NSNumber numberWithInt:newViewProps.fontSize];
   }

packages/react-native-bottom-tabs/ios/TabView/LegacyTabView.swift

@@ -7,6 +7,16 @@ struct LegacyTabView: AnyTabView {
   var onSelect: (String) -> Void
   var updateTabBarAppearance: () -> Void
 
+  private var effectiveLayoutDirection: LayoutDirection {
+    let dir = props.layoutDirection ?? "locale"
+    if let mapped = ["rtl": LayoutDirection.rightToLeft,
+                     "ltr": LayoutDirection.leftToRight][dir] {
+      return mapped
+    }
+    let system = UIView.userInterfaceLayoutDirection(for: .unspecified)
+    return system == .rightToLeft ? .rightToLeft : .leftToRight
+  }
+
   @ViewBuilder
   var body: some View {
     TabView(selection: $props.selectedPage) {
@@ -19,6 +29,7 @@ struct LegacyTabView: AnyTabView {
         onLayout(size)
       }
     }
+    .environment(\.layoutDirection, effectiveLayoutDirection)
     .hideTabBar(props.tabBarHidden)
   }
 

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

@@ -9,6 +9,16 @@ struct NewTabView: AnyTabView {
   var onSelect: (String) -> Void
   var updateTabBarAppearance: () -> Void
 
+  private var effectiveLayoutDirection: LayoutDirection {
+    let dir = props.layoutDirection ?? "locale"
+    if let mapped = ["rtl": LayoutDirection.rightToLeft,
+                     "ltr": LayoutDirection.leftToRight][dir] {
+      return mapped
+    }
+    let system = UIView.userInterfaceLayoutDirection(for: .unspecified)
+    return system == .rightToLeft ? .rightToLeft : .leftToRight
+  }
+
   @ViewBuilder
   var body: some View {
     TabView(selection: $props.selectedPage) {
@@ -49,6 +59,7 @@ struct NewTabView: AnyTabView {
         }
       }
     }
+    .environment(\.layoutDirection, effectiveLayoutDirection)
     .measureView { size in
       onLayout(size)
     }

packages/react-native-bottom-tabs/ios/TabViewProps.swift

@@ -66,6 +66,7 @@ class TabViewProps: ObservableObject {
   @Published var translucent: Bool = true
   @Published var disablePageAnimations: Bool = false
   @Published var hapticFeedbackEnabled: Bool = false
+  @Published var layoutDirection: String?
   @Published var fontSize: Int?
   @Published var fontFamily: String?
   @Published var fontWeight: String?