Add native RTL support for bottom tabs on iOS & Android with optional direction override #3613
+126
−0
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
##Description
This PR adds proper RTL (Right-to-Left) layout support for native bottom tabs on both iOS and Android in react-native-screens.
Previously, bottom tabs did not automatically follow the system RTL direction, which caused incorrect tab ordering and layout in RTL locales (e.g. Arabic, Hebrew).
With this change:
Bottom tabs now follow the system layout direction by default
A new optional direction prop allows forcing LTR or RTL explicitly from JS when needed
This brings native behavior in line with expected platform RTL handling and React Native layout conventions.
##Changes
Added automatic RTL detection in native bottom tabs (iOS & Android)
Synced tab layout direction with system layout direction by default
Introduced optional direction prop:
"ltr" – force left-to-right
"rtl" – force right-to-left
default: system value
Updated native layout logic to correctly reverse tab ordering in RTL mode
add example in Test3598.tsx
Before
in RTL it was
After
-->

now
Test plan
Tested on:
Android (RTL system language enabled)
iOS (RTL simulator + device)
use example Test3598.tsx
Checklist