Skip to content

Conversation

@ahmedawaad1804
Copy link

##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

@ahmedawaad1804 ahmedawaad1804 changed the title Add layoutDirection prop to TabView for iOS RTL support feat: Add layoutDirection prop to TabView for iOS RTL support Dec 16, 2025
@okwasniewski okwasniewski requested a review from Copilot December 23, 2025 09:43
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@okwasniewski okwasniewski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@ahmedawaad1804
Copy link
Author

ahmedawaad1804 commented Dec 23, 2025

@okwasniewski
Added to android with default value locale to follow system layout

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants