From 5433e8f14c66abca04f63ae576d042bb1dff4552 Mon Sep 17 00:00:00 2001 From: Ahmed Awaad Date: Tue, 16 Dec 2025 15:49:42 +0300 Subject: [PATCH 1/8] feat: Add `layoutDirection` prop to `TabView` for iOS RTL support, including a new example. --- apps/example/src/App.tsx | 5 + apps/example/src/Examples/FourTabsRTL.tsx | 94 +++++++++++++++++++ .../example/src/Examples/NativeBottomTabs.tsx | 1 + .../ios/RCTTabViewComponentView.mm | 4 + .../ios/TabView/NewTabView.swift | 7 ++ .../ios/TabViewProps.swift | 1 + .../ios/TabViewProvider.swift | 8 ++ .../react-native-bottom-tabs/src/TabView.tsx | 8 ++ .../src/TabViewNativeComponent.ts | 1 + 9 files changed, 129 insertions(+) create mode 100644 apps/example/src/Examples/FourTabsRTL.tsx diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index ba1f7606..22604d9e 100644 --- a/apps/example/src/App.tsx +++ b/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 ; }; +const FourTabsRightToLeft = () => { + return ; +}; const examples = [ { @@ -161,6 +165,7 @@ const examples = [ name: 'Bottom Accessory View', screenOptions: { headerShown: false }, }, + { component: FourTabsRightToLeft, name: 'Four Tabs - RTL', platform: 'ios' }, ]; function App() { diff --git a/apps/example/src/Examples/FourTabsRTL.tsx b/apps/example/src/Examples/FourTabsRTL.tsx new file mode 100644 index 00000000..46e43fc2 --- /dev/null +++ b/apps/example/src/Examples/FourTabsRTL.tsx @@ -0,0 +1,94 @@ +import TabView, { SceneMap } from 'react-native-bottom-tabs'; +import React, { useState } 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'; + +interface Props { + disablePageAnimations?: boolean; + scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent'; + backgroundColor?: ColorValue; + translucent?: boolean; + hideOneTab?: boolean; + rippleColor?: ColorValue; + activeIndicatorColor?: ColorValue; + layoutDirection?: 'leftToRight' | 'rightToLeft'; +} + +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 = 'leftToRight', +}: Props) { + React.useLayoutEffect(() => { + if (layoutDirection === 'rightToLeft') { + I18nManager.allowRTL(true); + I18nManager.forceRTL(true); + } + return () => { + if (layoutDirection === 'rightToLeft') { + I18nManager.allowRTL(false); + I18nManager.forceRTL(false); + } + }; + }, [layoutDirection]); + const [index, setIndex] = useState(0); + const [routes] = 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 ( + + ); +} diff --git a/apps/example/src/Examples/NativeBottomTabs.tsx b/apps/example/src/Examples/NativeBottomTabs.tsx index 190db787..7e89aa3a 100644 --- a/apps/example/src/Examples/NativeBottomTabs.tsx +++ b/apps/example/src/Examples/NativeBottomTabs.tsx @@ -15,6 +15,7 @@ function NativeBottomTabs() { initialRouteName="Chat" labeled={true} hapticFeedbackEnabled={false} + layoutDirection="leftToRight" tabBarInactiveTintColor="#C57B57" tabBarActiveTintColor="#F7DBA7" tabBarStyle={{ diff --git a/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm b/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm index c41f9316..92cab0e7 100644 --- a/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm +++ b/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]; } diff --git a/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift b/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift index d6993158..f878f8ca 100644 --- a/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift +++ b/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift @@ -11,6 +11,12 @@ struct NewTabView: AnyTabView { @ViewBuilder var body: some View { + var effectiveLayoutDirection: LayoutDirection { + if let layoutDirectionString = props.layoutDirection { + return layoutDirectionString == "rightToLeft" ? .rightToLeft : .leftToRight + } + return .leftToRight + } TabView(selection: $props.selectedPage) { ForEach(props.children) { child in if let index = props.children.firstIndex(of: child), @@ -49,6 +55,7 @@ struct NewTabView: AnyTabView { } } } + .environment(\.layoutDirection, effectiveLayoutDirection) .measureView { size in onLayout(size) } diff --git a/packages/react-native-bottom-tabs/ios/TabViewProps.swift b/packages/react-native-bottom-tabs/ios/TabViewProps.swift index cd098c07..2670ac99 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProps.swift +++ b/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? diff --git a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift index 013032f0..a03378f7 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift +++ b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift @@ -95,6 +95,12 @@ public final class TabInfo: NSObject { } } + @objc public var layoutDirection: NSString? { + didSet { + props.layoutDirection = layoutDirection as? String + } + } + @objc public var scrollEdgeAppearance: NSString? { didSet { props.scrollEdgeAppearance = scrollEdgeAppearance as? String @@ -155,6 +161,8 @@ public final class TabInfo: NSObject { } } + + @objc public var itemsData: [TabInfo] = [] { didSet { props.items = itemsData diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 41b9cb37..3c04172d 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/packages/react-native-bottom-tabs/src/TabView.tsx @@ -201,6 +201,12 @@ interface Props { * @platform ios */ renderBottomAccessoryView?: BottomAccessoryViewProps['renderBottomAccessoryView']; + /** + * The direction of the layout. (iOS only) + * @platform ios + * @default 'leftToRight' + */ + layoutDirection?: 'leftToRight' | 'rightToLeft'; } const ANDROID_MAX_TABS = 100; @@ -239,6 +245,7 @@ const TabView = ({ tabBarStyle, tabLabelStyle, renderBottomAccessoryView, + layoutDirection = 'leftToRight', ...props }: Props) => { // @ts-ignore @@ -398,6 +405,7 @@ const TabView = ({ onTabBarMeasured={handleTabBarMeasured} onNativeLayout={handleNativeLayout} hapticFeedbackEnabled={hapticFeedbackEnabled} + layoutDirection={layoutDirection} activeTintColor={activeTintColor} inactiveTintColor={inactiveTintColor} barTintColor={tabBarStyle?.backgroundColor} diff --git a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts b/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts index 7949e156..50082c55 100644 --- a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts +++ b/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts @@ -56,6 +56,7 @@ export interface TabViewProps extends ViewProps { disablePageAnimations?: boolean; activeIndicatorColor?: ColorValue; hapticFeedbackEnabled?: boolean; + layoutDirection?: string; minimizeBehavior?: string; fontFamily?: string; fontWeight?: string; From b478d2a91fe5b33f77cac5f1479f8cfeea85f327 Mon Sep 17 00:00:00 2001 From: ahmedawaad <56788580+ahmedawaad1804@users.noreply.github.com> Date: Tue, 23 Dec 2025 17:09:17 +0200 Subject: [PATCH 2/8] Update packages/react-native-bottom-tabs/ios/TabViewProvider.swift Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/react-native-bottom-tabs/ios/TabViewProvider.swift | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift index a03378f7..961e5cd2 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift +++ b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift @@ -161,8 +161,6 @@ public final class TabInfo: NSObject { } } - - @objc public var itemsData: [TabInfo] = [] { didSet { props.items = itemsData From 8867d4263611ae677e2c3dfd9cbebedf103c0754 Mon Sep 17 00:00:00 2001 From: Ahmed Awaad Date: Tue, 23 Dec 2025 17:14:22 +0200 Subject: [PATCH 3/8] refactor: update layoutDirection prop to use 'locale' for consistency across components --- apps/example/src/App.tsx | 4 ++-- apps/example/src/Examples/FourTabsRTL.tsx | 15 ++++++++------- .../react-native-bottom-tabs/src/TabView.tsx | 17 +++++++++++------ packages/react-native-bottom-tabs/src/types.ts | 2 ++ .../createNativeBottomTabNavigator.tsx | 2 ++ .../src/views/NativeBottomTabView.tsx | 2 ++ 6 files changed, 27 insertions(+), 15 deletions(-) diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index 22604d9e..66b7a57b 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -74,7 +74,7 @@ const UnlabeledTabs = () => { return ; }; const FourTabsRightToLeft = () => { - return ; + return ; }; 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() { diff --git a/apps/example/src/Examples/FourTabsRTL.tsx b/apps/example/src/Examples/FourTabsRTL.tsx index 46e43fc2..6ff9914d 100644 --- a/apps/example/src/Examples/FourTabsRTL.tsx +++ b/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: 'المقالات', diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 3c04172d..4e93f090 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/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 { */ 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 = ({ tabBarStyle, tabLabelStyle, renderBottomAccessoryView, - layoutDirection = 'leftToRight', + layoutDirection = 'locale', ...props }: Props) => { // @ts-ignore diff --git a/packages/react-native-bottom-tabs/src/types.ts b/packages/react-native-bottom-tabs/src/types.ts index 612dcd4f..83a9b2bb 100644 --- a/packages/react-native-bottom-tabs/src/types.ts +++ b/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; diff --git a/packages/react-navigation/src/navigators/createNativeBottomTabNavigator.tsx b/packages/react-navigation/src/navigators/createNativeBottomTabNavigator.tsx index b76bdeb0..98cdd6e0 100644 --- a/packages/react-navigation/src/navigators/createNativeBottomTabNavigator.tsx +++ b/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({ ); } From 4977ddb3e607a4b08fd603430522bff91a36391e Mon Sep 17 00:00:00 2001 From: Ahmed Awaad Date: Tue, 23 Dec 2025 17:14:38 +0200 Subject: [PATCH 4/8] feat(android): add support for layout direction in ReactBottomNavigationView --- .../android/src/main/java/com/rcttabview/RCTTabView.kt | 4 ++++ .../src/main/java/com/rcttabview/RCTTabViewManager.kt | 9 +++++++++ 2 files changed, 13 insertions(+) diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt index 23cd8759..1d0c4047 100644 --- a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt +++ b/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 diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt index dad16c28..3f130e11 100644 --- a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt +++ b/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) } From 8dc0c24442bb78e7f5370ac8666a2df7fbff2454 Mon Sep 17 00:00:00 2001 From: Ahmed Awaad Date: Tue, 23 Dec 2025 17:14:46 +0200 Subject: [PATCH 5/8] fix(iOS): enhance layout direction handling in NewTabView for better RTL support --- .../ios/TabView/NewTabView.swift | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift b/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift index f878f8ca..52089075 100644 --- a/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift +++ b/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift @@ -12,11 +12,15 @@ struct NewTabView: AnyTabView { @ViewBuilder var body: some View { var effectiveLayoutDirection: LayoutDirection { - if let layoutDirectionString = props.layoutDirection { - return layoutDirectionString == "rightToLeft" ? .rightToLeft : .leftToRight - } - return .leftToRight + 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 +} + TabView(selection: $props.selectedPage) { ForEach(props.children) { child in if let index = props.children.firstIndex(of: child), From 6602066ebdbc51ef9481e6a362c432cc3fd941ef Mon Sep 17 00:00:00 2001 From: ahmedawaad <56788580+ahmedawaad1804@users.noreply.github.com> Date: Tue, 23 Dec 2025 17:15:15 +0200 Subject: [PATCH 6/8] Update packages/react-native-bottom-tabs/ios/TabViewProps.swift Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/react-native-bottom-tabs/ios/TabViewProps.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-bottom-tabs/ios/TabViewProps.swift b/packages/react-native-bottom-tabs/ios/TabViewProps.swift index 2670ac99..9cfb29a9 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProps.swift +++ b/packages/react-native-bottom-tabs/ios/TabViewProps.swift @@ -66,7 +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 layoutDirection: String? @Published var fontSize: Int? @Published var fontFamily: String? @Published var fontWeight: String? From fa618ac50980779ba2b5a4d3414739e6b590bd67 Mon Sep 17 00:00:00 2001 From: ahmedawaad <56788580+ahmedawaad1804@users.noreply.github.com> Date: Tue, 23 Dec 2025 17:15:57 +0200 Subject: [PATCH 7/8] Update packages/react-native-bottom-tabs/ios/TabViewProvider.swift Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/react-native-bottom-tabs/ios/TabViewProvider.swift | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift index 961e5cd2..deac524d 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift +++ b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift @@ -100,7 +100,6 @@ public final class TabInfo: NSObject { props.layoutDirection = layoutDirection as? String } } - @objc public var scrollEdgeAppearance: NSString? { didSet { props.scrollEdgeAppearance = scrollEdgeAppearance as? String From 016b48b506a50344f03366e433d0a291f62ddb60 Mon Sep 17 00:00:00 2001 From: Ahmed Awaad Date: Tue, 23 Dec 2025 17:19:38 +0200 Subject: [PATCH 8/8] fix: update layoutDirection prop in FourTabsRTL to use 'rtl' --- apps/example/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index 66b7a57b..78c8d6f9 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -74,7 +74,7 @@ const UnlabeledTabs = () => { return ; }; const FourTabsRightToLeft = () => { - return ; + return ; }; const examples = [