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 🤔

[tboba]

Reopening the issue, since something has broke in iOS 17.2 that has broke the back button in RTL mode.

Expected behavior:

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tboba]

I believe that potentially the bug with back button might occur also in iOS native apps. I've found on Apple forums that someone has the same problem - https://developer.apple.com/forums/thread/737855. @STonkoshkur could you check if on the non-system native apps the issue with back button is the same?

[serhiitonkoshkur]

@tboba I've checked several non-system iOS apps and the back button is working fine (iOS 17.2.1)

[alduzy]

I can confirm the back arrow faces correct direction after changing the application's CFBundleDevelopmentRegion. Looks as if the I18nManager.forceRTL(true) does not force the change.

developmentRegion = ar	developmentRegion = en

It's worth noticing that the Text element's alignment is not changing properly - only flexDirection of View element changes: