Skip to content

Conversation

@ahmedawaad1804
Copy link

@ahmedawaad1804 ahmedawaad1804 commented Feb 3, 2026

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

Simulator Screenshot - iPhone 17 Pro Max - 2026-02-03 at 18 39 51

After

-->
now
Simulator Screenshot - iPhone 17 Pro Max - 2026-02-03 at 18 39 57

Test plan

Tested on:

Android (RTL system language enabled)

iOS (RTL simulator + device)
use example Test3598.tsx

Checklist

  • Included code example that can be used to test this change.
  • Updated / created local changelog entries in relevant test files.
  • For visual changes, included screenshots / GIFs / recordings documenting the change.
  • For API changes, updated relevant public types.
  • Ensured that CI passes

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.

1 participant