feat(Tabs): add native RTL support for bottom tabs on iOS & Android

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabsHostViewManager.kt

@@ -142,6 +142,11 @@ class TabsHostViewManager :
         value: String?,
     ) = Unit
 
+    override fun setDirectionMode(
+        view: TabsHost,
+        value: String?,
+    ) = Unit
+
     @ReactProp(name = "tabBarHidden")
     override fun setTabBarHidden(
         view: TabsHost,

android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsManagerDelegate.java

@@ -30,6 +30,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "nativeContainerBackgroundColor":
         mViewManager.setNativeContainerBackgroundColor(view, ColorPropConverter.getColor(value, view.getContext()));
         break;
+      case "directionMode":
+        mViewManager.setDirectionMode(view, (String) value);
+        break;
       case "tabBarBackgroundColor":
         mViewManager.setTabBarBackgroundColor(view, ColorPropConverter.getColor(value, view.getContext()));
         break;

android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsManagerInterface.java

@@ -16,6 +16,7 @@
 public interface RNSBottomTabsManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
   void setTabBarHidden(T view, boolean value);
   void setNativeContainerBackgroundColor(T view, @Nullable Integer value);
+  void setDirectionMode(T view, @Nullable String value);
   void setTabBarBackgroundColor(T view, @Nullable Integer value);
   void setTabBarItemTitleFontFamily(T view, @Nullable String value);
   void setTabBarItemTitleFontSize(T view, float value);

apps/src/tests/issue-tests/Test3598.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import {
+  BottomTabsContainer,
+  type TabConfiguration,
+} from '../../shared/gamma/containers/bottom-tabs/BottomTabsContainer';
+import { CenteredLayoutView } from '../../shared/CenteredLayoutView';
+import { I18nManager, Text } from 'react-native';
+
+function makeTab(title: string) {
+  return function Tab() {
+    return (
+      <CenteredLayoutView>
+        <Text>{title}</Text>
+        <Text style={{ fontWeight: 'bold' }}>
+          {'Direction is ' + (I18nManager.isRTL ? 'RTL' : 'LTR')}
+        </Text>
+      </CenteredLayoutView>
+    );
+  };
+}
+
+function App() {
+  const TAB_CONFIGS: TabConfiguration[] = [
+    {
+      tabScreenProps: {
+        tabKey: 'Tab1',
+        title: 'قائمة ١',
+        icon: {
+          android: {
+            type: 'drawableResource',
+            name: 'sym_call_missed',
+          },
+          ios: {
+            type: 'sfSymbol',
+            name: 'sun.max',
+          },
+        },
+      },
+      component: makeTab('Tab 1'),
+    },
+    {
+      tabScreenProps: {
+        tabKey: 'Tab2',
+        title: 'قائمة ٢',
+        icon: {
+          android: {
+            type: 'drawableResource',
+            name: 'sym_call_incoming',
+          },
+          ios: {
+            type: 'sfSymbol',
+            name: 'snow',
+          },
+        },
+      },
+      component: makeTab('Tab 2'),
+    },
+  ];
+
+  return <BottomTabsContainer tabConfigs={TAB_CONFIGS} />;
+}
+
+export default App;

apps/src/tests/issue-tests/index.ts

@@ -180,6 +180,7 @@ export { default as Test3564 } from './Test3564';
 export { default as Test3566 } from './Test3566';
 export { default as Test3576 } from './Test3576';
 export { default as Test3596 } from './Test3596';
+export { default as Test3598 } from './Test3598';
 export { default as Test3611 } from './Test3611';
 export { default as Test3617 } from './Test3617';
 export { default as TestScreenAnimation } from './TestScreenAnimation';

ios/bottom-tabs/host/RNSBottomTabsHostComponentView.h

@@ -56,6 +56,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 @property (nonatomic, readonly) BOOL experimental_controlNavigationStateInJS;
 
+@property (nonatomic, readonly) UISemanticContentAttribute directionMode;
+
 #if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
 @property (nonatomic, readonly) UITabBarMinimizeBehavior tabBarMinimizeBehavior API_AVAILABLE(ios(26.0));
 #endif // Check for iOS >= 26

ios/bottom-tabs/host/RNSBottomTabsHostComponentView.mm

@@ -352,6 +352,24 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
       }
   }
 
+  if (newComponentProps.directionMode != oldComponentProps.directionMode) {
+    _directionMode =
+        rnscreens::conversion::UISemanticContentAttributeFromTabsHostCppEquivalent(newComponentProps.directionMode);
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(17_0)
+    if (@available(iOS 17.0, *)) {
+      _controller.traitOverrides.layoutDirection = _directionMode == UISemanticContentAttributeForceRightToLeft
+          ? UITraitEnvironmentLayoutDirectionRightToLeft
+          : UITraitEnvironmentLayoutDirectionLeftToRight;
+    } else
+#endif // RNS_IPHONE_OS_VERSION_AVAILABLE(17_0)
+    {
+      _controller.view.semanticContentAttribute = _directionMode;
+      _controller.tabBar.semanticContentAttribute = _directionMode;
+      [[UIView appearanceWhenContainedInInstancesOfClasses:@[ _controller.tabBar.class ]]
+          setSemanticContentAttribute:_directionMode];
+    }
+  }
+
   // Super call updates _props pointer. We should NOT update it before calling super.
   [super updateProps:props oldProps:oldProps];
 }
@@ -544,6 +562,24 @@ - (void)setTabBarControllerModeFromRNSTabBarControllerMode:(RNSTabBarControllerM
     }
 }
 
+- (void)setDirectionMode:(UISemanticContentAttribute)directionMode
+{
+  _directionMode = directionMode;
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(17_0)
+  if (@available(iOS 17.0, *)) {
+    _controller.traitOverrides.layoutDirection = _directionMode == UISemanticContentAttributeForceRightToLeft
+        ? UITraitEnvironmentLayoutDirectionRightToLeft
+        : UITraitEnvironmentLayoutDirectionLeftToRight;
+  } else
+#endif // RNS_IPHONE_OS_VERSION_AVAILABLE(17_0)
+  {
+    _controller.view.semanticContentAttribute = _directionMode;
+    _controller.tabBar.semanticContentAttribute = _directionMode;
+    [[UIView appearanceWhenContainedInInstancesOfClasses:@[ _controller.tabBar.class ]]
+        setSemanticContentAttribute:_directionMode];
+  }
+}
+
 - (void)setOnNativeFocusChange:(RCTDirectEventBlock)onNativeFocusChange
 {
   [self.reactEventEmitter setOnNativeFocusChange:onNativeFocusChange];

ios/bottom-tabs/host/RNSBottomTabsHostComponentViewManager.mm

@@ -34,6 +34,7 @@ - (UIView *)view
 // This remapping allows us to store UITabBarControllerMode in the component while accepting a custom enum as input
 // from JS.
 RCT_REMAP_VIEW_PROPERTY(tabBarControllerMode, tabBarControllerModeFromRNSTabBarControllerMode, RNSTabBarControllerMode);
+RCT_EXPORT_VIEW_PROPERTY(directionMode, UISemanticContentAttribute);
 
 // TODO: Missing prop
 //@property (nonatomic, readonly) BOOL experimental_controlNavigationStateInJS;

ios/conversion/RNSConversions-BottomTabs.mm

@@ -485,4 +485,19 @@ UIUserInterfaceStyle UIUserInterfaceStyleFromBottomTabsScreenCppEquivalent(
   }
 }
 
+UISemanticContentAttribute UISemanticContentAttributeFromTabsHostCppEquivalent(
+    react::RNSBottomTabsDirectionMode directionMode)
+{
+  using enum facebook::react::RNSBottomTabsDirectionMode;
+  switch (directionMode) {
+    case Ltr:
+      return UISemanticContentAttributeForceLeftToRight;
+    case Rtl:
+      return UISemanticContentAttributeForceRightToLeft;
+    default:
+      RCTLogError(@"[RNScreens] unsupported direction mode");
+      break;
+  }
+}
+
 }; // namespace rnscreens::conversion

ios/conversion/RNSConversions.h

@@ -107,6 +107,9 @@ UIInterfaceOrientationMask UIInterfaceOrientationMaskFromRNSOrientation(RNSOrien
 RNSOrientation RNSOrientationFromUIInterfaceOrientationMask(UIInterfaceOrientationMask orientationMask);
 #endif // !TARGET_OS_TV
 
+UISemanticContentAttribute UISemanticContentAttributeFromTabsHostCppEquivalent(
+    react::RNSBottomTabsDirectionMode directionMode);
+
 #pragma mark SplitViewHost props
 
 UISplitViewControllerSplitBehavior SplitViewPreferredSplitBehaviorFromHostProp(

src/components/ScreenStackItem.tsx

@@ -22,6 +22,7 @@ import { FooterComponent } from './ScreenFooter';
 import { SafeAreaViewProps } from './safe-area/SafeAreaView.types';
 import SafeAreaView from './safe-area/SafeAreaView';
 import { featureFlags } from '../flags';
+import { isIOS26OrHigher } from './helpers/PlatformUtils';
 
 type Props = Omit<
   ScreenProps,
@@ -87,10 +88,7 @@ function ScreenStackItem(
     headerConfig.blurEffect !== 'none';
 
   warnOnce(
-    hasEdgeEffects &&
-      hasBlurEffect &&
-      Platform.OS === 'ios' &&
-      parseInt(Platform.Version, 10) >= 26,
+    hasEdgeEffects && hasBlurEffect && isIOS26OrHigher,
     '[RNScreens] Using both `blurEffect` and `scrollEdgeEffects` simultaneously may cause overlapping effects.',
   );
 
@@ -114,8 +112,7 @@ function ScreenStackItem(
     contentStyle = contentWrapperStyles;
   }
 
-  const shouldUseSafeAreaView =
-    Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 26;
+  const shouldUseSafeAreaView = isIOS26OrHigher;
 
   const content = (
     <>

src/components/helpers/PlatformUtils.ts

@@ -0,0 +1,4 @@
+import { Platform } from 'react-native';
+
+export const isIOS26OrHigher =
+  Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 26;

src/components/tabs/TabsAccessory.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import BottomTabsAccessoryNativeComponent from '../../fabric/bottom-tabs/BottomTabsAccessoryNativeComponent';
 import { TabsAccessoryProps } from './TabsAccessory.types';
-import { StyleSheet } from 'react-native';
+import { I18nManager, StyleSheet } from 'react-native';
+import { isIOS26OrHigher } from '../helpers/PlatformUtils';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
@@ -11,7 +12,23 @@ export default function TabsAccessory(props: TabsAccessoryProps) {
     <BottomTabsAccessoryNativeComponent
       {...props}
       collapsable={false}
-      style={[props.style, StyleSheet.absoluteFill]}
+      style={[
+        props.style,
+        StyleSheet.absoluteFill,
+        styles.directionFromI18nManagerForIOS26,
+      ]}
     />
   );
 }
+
+const styles = StyleSheet.create({
+  // This style is needed on iOS 26+ to bring back valid direction as we're forcing
+  // `ltr` in TabsHost to ensure correct TabsBottomAccessory layout.
+  directionFromI18nManagerForIOS26: {
+    direction: isIOS26OrHigher
+      ? I18nManager.isRTL
+        ? 'rtl'
+        : 'ltr'
+      : undefined,
+  },
+});

src/components/tabs/TabsHost.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import {
+  I18nManager,
   Platform,
   StyleSheet,
   findNodeHandle,
@@ -16,6 +17,7 @@ import { bottomTabsDebugLog } from '../../private/logging';
 import TabsAccessory from './TabsAccessory';
 import { TabsAccessoryEnvironment } from './TabsAccessory.types';
 import TabsAccessoryContent from './TabsAccessoryContent';
+import { isIOS26OrHigher } from '../helpers/PlatformUtils';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
@@ -62,17 +64,17 @@ function TabsHost(props: TabsHostProps) {
 
   return (
     <BottomTabsNativeComponent
-      style={styles.fillParent}
+      style={[styles.fillParent, styles.forceLtrForIOS26]}
       onNativeFocusChange={onNativeFocusChangeCallback}
       controlNavigationStateInJS={experimentalControlNavigationStateInJS}
       nativeContainerBackgroundColor={nativeContainerStyle?.backgroundColor}
+      directionMode={I18nManager.isRTL ? 'rtl' : 'ltr'}
       // @ts-ignore suppress ref - debug only
       ref={componentNodeRef}
       {...filteredProps}>
       {filteredProps.children}
       {bottomAccessory &&
-        Platform.OS === 'ios' &&
-        parseInt(Platform.Version, 10) >= 26 &&
+        isIOS26OrHigher &&
         (Platform.constants.reactNativeVersion.minor >= 82 ? (
           <TabsAccessory>
             <TabsAccessoryContent environment="regular">
@@ -102,4 +104,9 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
+  // For TabsBottomAccessory layout to work correctly, we need to use
+  // `ltr`. We restore direction in children views.
+  forceLtrForIOS26: {
+    direction: isIOS26OrHigher ? 'ltr' : undefined,
+  },
 });

src/components/tabs/TabsScreen.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import { Freeze } from 'react-freeze';
 import {
+  I18nManager,
   Image,
   ImageResolvedAssetSource,
   Platform,
@@ -34,6 +35,7 @@ import type {
   PlatformIconAndroid,
   PlatformIconIOS,
 } from '../../types';
+import { isIOS26OrHigher } from '../helpers/PlatformUtils';
 
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
@@ -130,7 +132,11 @@ function TabsScreen(props: TabsScreenProps) {
   return (
     <BottomTabsScreenNativeComponent
       collapsable={false}
-      style={[style, styles.fillParent]}
+      style={[
+        style,
+        styles.fillParent,
+        styles.directionFromI18nManagerForIOS26,
+      ]}
       onWillAppear={onWillAppearCallback}
       onDidAppear={onDidAppearCallback}
       onWillDisappear={onWillDisappearCallback}
@@ -379,4 +385,13 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
   },
+  // This style is needed on iOS 26+ to bring back valid direction as we're forcing
+  // `ltr` in TabsHost to ensure correct TabsBottomAccessory layout.
+  directionFromI18nManagerForIOS26: {
+    direction: isIOS26OrHigher
+      ? I18nManager.isRTL
+        ? 'rtl'
+        : 'ltr'
+      : undefined,
+  },
 });

src/fabric/bottom-tabs/BottomTabsNativeComponent.ts

@@ -29,6 +29,8 @@ type TabBarMinimizeBehavior =
 
 type TabBarControllerMode = 'automatic' | 'tabBar' | 'tabSidebar';
 
+type DirectionMode = 'rtl' | 'ltr';
+
 export interface NativeProps extends ViewProps {
   // Events
   onNativeFocusChange?: CT.DirectEventHandler<NativeFocusChangeEvent>;
@@ -37,6 +39,10 @@ export interface NativeProps extends ViewProps {
   tabBarHidden?: CT.WithDefault<boolean, false>;
   nativeContainerBackgroundColor?: ColorValue;
 
+  // We can't use `direction` name for this prop as it's also used by
+  // direction style View prop.
+  directionMode?: CT.WithDefault<DirectionMode, 'ltr'>;
+
   // Appearance
   // tabBarAppearance?: TabBarAppearance; // Does not work due to codegen issue.