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

Author: Ahmed Awaad

apps/example/src/App.tsx

@@ -74,7 +74,7 @@ const UnlabeledTabs = () => {
   return <LabeledTabs showLabels={false} />;
 };
 const FourTabsRightToLeft = () => {
-  return <FourTabsRTL layoutDirection={'rightToLeft'} />;
+  return <FourTabsRTL layoutDirection={'locale'} />;
 };
 
 const examples = [
@@ -165,7 +165,7 @@ const examples = [
     name: 'Bottom Accessory View',
     screenOptions: { headerShown: false },
   },
-  { component: FourTabsRightToLeft, name: 'Four Tabs - RTL', platform: 'ios' },
+  { component: FourTabsRightToLeft, name: 'Four Tabs - RTL' },
 ];
 
 function App() {

apps/example/src/Examples/FourTabsRTL.tsx

@@ -1,10 +1,11 @@
 import TabView, { SceneMap } from 'react-native-bottom-tabs';
-import React, { useState } from 'react';
+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/src/types';
 
 interface Props {
   disablePageAnimations?: boolean;
@@ -14,7 +15,7 @@ interface Props {
   hideOneTab?: boolean;
   rippleColor?: ColorValue;
   activeIndicatorColor?: ColorValue;
-  layoutDirection?: 'leftToRight' | 'rightToLeft';
+  layoutDirection?: LayoutDirection;
 }
 
 const renderScene = SceneMap({
@@ -32,22 +33,22 @@ export default function FourTabsRTL({
   hideOneTab = false,
   rippleColor,
   activeIndicatorColor,
-  layoutDirection = 'leftToRight',
+  layoutDirection = 'locale',
 }: Props) {
   React.useLayoutEffect(() => {
-    if (layoutDirection === 'rightToLeft') {
+    if (layoutDirection === 'rtl') {
       I18nManager.allowRTL(true);
       I18nManager.forceRTL(true);
     }
     return () => {
-      if (layoutDirection === 'rightToLeft') {
+      if (layoutDirection === 'rtl') {
         I18nManager.allowRTL(false);
         I18nManager.forceRTL(false);
       }
     };
   }, [layoutDirection]);
-  const [index, setIndex] = useState(0);
-  const [routes] = useState([
+  const [index, setIndex] = React.useState(0);
+  const [routes] = React.useState([
     {
       key: 'article',
       title: 'المقالات',

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -22,7 +22,13 @@ import { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
 import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
 import NativeTabView from './TabViewNativeComponent';
 import useLatestCallback from 'use-latest-callback';
-import type { AppleIcon, BaseRoute, NavigationState, TabRole } from './types';
+import type {
+  AppleIcon,
+  BaseRoute,
+  LayoutDirection,
+  NavigationState,
+  TabRole,
+} from './types';
 import DelayedFreeze from './DelayedFreeze';
 import {
   BottomAccessoryView,
@@ -202,11 +208,10 @@ interface Props<Route extends BaseRoute> {
    */
   renderBottomAccessoryView?: BottomAccessoryViewProps['renderBottomAccessoryView'];
   /**
-   * The direction of the layout. (iOS only)
-   * @platform ios
-   * @default 'leftToRight'
+   * The direction of the layout.
+   * @default 'locale'
    */
-  layoutDirection?: 'leftToRight' | 'rightToLeft';
+  layoutDirection?: LayoutDirection;
 }
 
 const ANDROID_MAX_TABS = 100;
@@ -245,7 +250,7 @@ const TabView = <Route extends BaseRoute>({
   tabBarStyle,
   tabLabelStyle,
   renderBottomAccessoryView,
-  layoutDirection = 'leftToRight',
+  layoutDirection = 'locale',
   ...props
 }: Props<Route>) => {
   // @ts-ignore

packages/react-native-bottom-tabs/src/types.ts

@@ -7,6 +7,8 @@ export type AppleIcon = { sfSymbol: SFSymbol };
 
 export type TabRole = 'search';
 
+export type LayoutDirection = 'ltr' | 'rtl' | 'locale';
+
 export type BaseRoute = {
   key: string;
   title?: string;

packages/react-navigation/src/navigators/createNativeBottomTabNavigator.tsx

@@ -43,6 +43,7 @@ function NativeBottomTabNavigator({
   screenOptions,
   tabBarActiveTintColor: customActiveTintColor,
   tabBarInactiveTintColor: customInactiveTintColor,
+  layoutDirection = 'locale',
   ...rest
 }: NativeBottomTabNavigatorProps) {
   const { colors } = useTheme();
@@ -77,6 +78,7 @@ function NativeBottomTabNavigator({
     <NavigationContent>
       <NativeBottomTabView
         {...rest}
+        layoutDirection={layoutDirection}
         tabBarActiveTintColor={activeTintColor}
         tabBarInactiveTintColor={inactiveTintColor}
         state={state}

packages/react-navigation/src/views/NativeBottomTabView.tsx

@@ -19,6 +19,7 @@ type Props = NativeBottomTabNavigationConfig & {
 
 export default function NativeBottomTabView({
   state,
+  layoutDirection,
   navigation,
   descriptors,
   tabBar,
@@ -114,6 +115,7 @@ export default function NativeBottomTabView({
           });
         }
       }}
+      layoutDirection={layoutDirection}
     />
   );
 }