headerLargeTitle & headerSearchBarOptions Doesn't Support RTL

[Wahsner]

Description

When RTL is enabled, the headerLargeTitle & headerSearchBarOptions don't honour the text direction. Instead they remain LTR as shown in the below screen cuttings.

• Restarting the app between changing text direction makes no difference.
• The fact the text itself isn't a RTL language makes no difference.
• Having the device in a RTL language makes no difference.
• Doesn't matter if you're using Paper or Fabric or the new/old arch.
• Doesn't matter if you're running in debug or release.
• Doesn't matter if you're running on a real or sim device.

headerLargeTitle

headerSearchBarOptions(focused)

I would expect them to be positioned right as shown below (taken from the contacts app)

Large Title

Search bar(focused)

Steps to reproduce

1. Set the options direction: 'rtl'
2. Not sure if required, but Set I18nManager.forceRTL(true); in the App.js too
3. Restart the app by closing it completely from background and re-launching

Expected

• For text direction to be RTL for headerLargeTitle & headerSearchBarOptions

Actual

• headerLargeTitle & headerSearchBarOptions are still LTR

Snack or a link to a repository

https://github.com/0xRenshaw/react-native-screens/tree/main/FabricExample

Screens version

3.25.0

React Native version

0.72.4

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[tboba]

Hi @0xRenshaw, thank you for reporting this issue!
I've managed to reproduce this problem - I'll open a PR that solves it shortly.

[moedeveloper]

what is the fix, i am still having the same issue ?

[Wahsner]

what is the fix, i am still having the same issue ?

It has been merged to master. There hasn't yet been a release.

[tboba]

Hi @0xRenshaw @moedeveloper, there's a new version of react-native-screens: 3.26.0 which has this change included. Check it out! If you find something wrong related to the newest version (this change is still buggy or doesn't work for you) let us know 🎉

[STonkoshkur]

@tboba the back button direction is still incorrect in RTL for iOS. I'm running the example application from Example directory using Xcode 15.2

[tboba]

@STonkoshkur interesting, do you have some native apps that have RTL mode enabled? I just wanted to see how the back button should look like. In my case, I have the same back button as you, but if I unhide the default navigation bar of the navigation controller, it looks completely the same 🤔