feat: Add layoutDirection prop to TabView for iOS RTL support

[ahmedawaad1804]

##RTL Support

PR Description

This PR adds full Right-to-Left (RTL) support to the Bottom Tabs implementation.
The tab layout direction now correctly follows the provided layout direction, ensuring proper ordering, selection behavior, and visual consistency for RTL languages (e.g. Arabic).

How to test?

1- Run app and go to last Example (Four Tabs - RTL)
2- it will automatically force RTL

• will return to LTR when unmount

Screenshots

Simulator.Screen.Recording.-.iPhone.17.Pro.Max.-.2025-12-16.at.15.51.17.mov

[Copilot]

Pull request overview

This PR adds Right-to-Left (RTL) layout support to the TabView component for iOS, enabling proper tab ordering and display for RTL languages like Arabic.

Key Changes:

• Introduces a new layoutDirection prop to the TabView component that accepts 'leftToRight' or 'rightToLeft' values
• Implements the layout direction control through the native iOS layer using SwiftUI's environment layout direction
• Adds a new example demonstrating RTL functionality with Arabic text and automated I18nManager RTL forcing

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts	Adds layoutDirection string property to the native component interface
packages/react-native-bottom-tabs/src/TabView.tsx	Adds layoutDirection prop with TypeScript typing, documentation, and default value to the React component
packages/react-native-bottom-tabs/ios/TabViewProvider.swift	Implements property observer to propagate layoutDirection from native bridge to SwiftUI props
packages/react-native-bottom-tabs/ios/TabViewProps.swift	Declares layoutDirection as a published property in the observable props class
packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift	Implements layout direction logic by computing SwiftUI LayoutDirection from string prop and applying it via environment modifier
packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm	Adds prop update handling for layoutDirection in the Objective-C++ component view
apps/example/src/Examples/NativeBottomTabs.tsx	Adds explicit layoutDirection="leftToRight" to existing example for demonstration purposes
apps/example/src/Examples/FourTabsRTL.tsx	New example component demonstrating RTL support with Arabic labels and I18nManager integration
apps/example/src/App.tsx	Registers the new RTL example in the app navigation as an iOS-only demo

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

These blank lines appear to be unintentional whitespace additions. Consider removing them to maintain code cleanliness.

Suggested change

[Copilot]

There is trailing whitespace at the end of this line. Consider removing it to maintain consistent code formatting.

Suggested change

	@Published var layoutDirection: String?
	@Published var layoutDirection: String?

[Copilot]

There is trailing whitespace at the end of this line. Consider removing it to maintain consistent code formatting.

Suggested change

[Copilot]

The import pattern for useState is inconsistent with other example files in the codebase. Other examples (like FourTabs.tsx, ThreeTabs.tsx) import useState directly from 'react', not as a named import from React. Consider changing the import to match the established pattern.

[okwasniewski]

Hey,

Thanks for working on this!

We will need to have support for this prop on both platforms. It should be pretty straight forward.

Another thing is that we need to expose this prop to React Navigation integration in packages/react-navigation

[okwasniewski]

We should allow for three options:

layoutDirection: 'ltr' / 'rtl' / 'locale'

Using ltr and rtl as already established patterns. locale is the default.

We also need to support Android if we want to roll out this feature.