fix: add to legacy tabview

Author: okwasniewski

apps/example/src/Examples/FourTabsRTL.tsx

@@ -5,7 +5,7 @@ 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';
+import type { LayoutDirection } from 'react-native-bottom-tabs';
 
 interface Props {
   disablePageAnimations?: boolean;

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,7 +15,7 @@ function NativeBottomTabs() {
       initialRouteName="Chat"
       labeled={true}
       hapticFeedbackEnabled={false}
-      layoutDirection="leftToRight"
+      layoutDirection="ltr"
       tabBarInactiveTintColor="#C57B57"
       tabBarActiveTintColor="#F7DBA7"
       tabBarStyle={{

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,18 +9,18 @@ struct NewTabView: AnyTabView {
   var onSelect: (String) -> Void
   var updateTabBarAppearance: () -> Void
 
-  @ViewBuilder
-  var body: some View {
-    var effectiveLayoutDirection: LayoutDirection {
+  private var effectiveLayoutDirection: LayoutDirection {
     let dir = props.layoutDirection ?? "locale"
     if let mapped = ["rtl": LayoutDirection.rightToLeft,
                      "ltr": LayoutDirection.leftToRight][dir] {
-        return mapped
+      return mapped
     }
     let system = UIView.userInterfaceLayoutDirection(for: .unspecified)
     return system == .rightToLeft ? .rightToLeft : .leftToRight
-}
+  }
 
+  @ViewBuilder
+  var body: some View {
     TabView(selection: $props.selectedPage) {
       ForEach(props.children) { child in
         if let index = props.children.firstIndex(of: child),

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

@@ -15,4 +15,4 @@ export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
 /**
  * Types
  */
-export type { AppleIcon, TabRole } from './types';
+export type { AppleIcon, LayoutDirection, TabRole } from './types';