headerLargeTitle & headerSearchBarOptions Doesn't Support RTL #1884

Wahsner · 2023-09-07T12:39:57Z

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

Set the options direction: 'rtl'
Not sure if required, but Set I18nManager.forceRTL(true); in the App.js too
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 · 2023-09-20T08:14:05Z

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

## Description In the current state, the RTL mode didn't work correctly for large headers and search bar - even if user sets RTL mode in their app, the content of the large header and search was still on the left side. Also, what I've found, the icon of the back button was still pointing to the left, even if the back button was on the right side of the screen. Fixes #1884. ## Changes - Added a workaround for pointing arrow to the left - unfortunately I couldn't find a better solution for changing the direction of the arrow. - Changed the direction of the contents in the navigation bar when user is in RTL mode. ## Screenshots / GIFs ### Before <img width="365" alt="image" src="https://github.com/software-mansion/react-native-screens/assets/23281839/c2f6fd37-3b00-4ec4-aec6-ba8e55566631"> <br/> <img width="383" alt="image" src="https://github.com/software-mansion/react-native-screens/assets/23281839/8504ed8c-1c85-4c2c-bcd9-f1419a2d60d7"> ### After <img width="364" alt="image" src="https://github.com/software-mansion/react-native-screens/assets/23281839/66410e3e-0dd7-4ab2-a9b6-5860d56e32bf"><br/> <img width="383" alt="Screenshot 2023-09-20 at 10 27 51" src="https://github.com/software-mansion/react-native-screens/assets/23281839/4239cad9-e2d9-4bb3-b46f-434487bdf104"> ## Test code and steps to reproduce 1. Launch example application from `Example` directory. 2. Switch `Right to left` option to `true` 3. Check `Header Options` and `Search bar` tabs to see the difference. 4. You can also change `headerHideBackButton` and `headerLargeTitle` options inside the stack's navigator and go to `Other Searchbar example` to check how large header behaves with the search bar. ## Checklist - [ ] Ensured that CI passes

moedeveloper · 2023-10-12T20:59:07Z

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

Wahsner · 2023-10-12T21:05:15Z

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 · 2023-10-17T16:47:48Z

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 · 2024-02-16T10:39:09Z

@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 · 2024-02-16T10:42:38Z

@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 · 2024-02-16T10:46:51Z

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

Expected behavior:

github-actions · 2024-02-16T10:51:31Z

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 · 2024-02-16T11:50:40Z

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 · 2024-02-16T13:37:48Z

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

alduzy · 2024-06-12T10:51:34Z

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:

@kkafar

…ling in header (#2185) ## Description This PR intents to fix back button direction in RTL mode forced by I18nManager for testing purposes on iOS. When the application's language is changed using the `CFBundleDevelopmentRegion` the system is well aware of that, passes the information to React Native and Yoga. The result is a fully LTR / RTL compliant application. However, when the `RTL` mode is set using the React Native's `I18nManager.forceRTL()` method (for testing purposes I believe) The change is applied to react views only and the system itself does not change it's direction. In such case the only way for the native elements, such as `navigationBar` to adapt to the direction set by `I18nManager` is by manually applying the `semanticContentAttribute` based on `direction` prop passed by `react-navigation`. > [!note] In case there is another native `navigationBar` element apart from the one coming from `react-native-screens`, this change may override it's direction. Tested successfully on iOS 17.5 and 16.4 Fixes #1884 . ## Changes - removed faulty workaround - set correct semanticContentAttribute for navigationBar and it's contents - refactored how the searchbar direction is set ## Screenshots / GIFs ### Before ![image](https://github.com/software-mansion/react-native-screens/assets/91994767/1c67071d-92e4-4966-9ad8-362c54c4435b) ### After ![image](https://github.com/software-mansion/react-native-screens/assets/91994767/5cf40cf1-b762-4720-af33-0f939adac7c5) ## Test code and steps to reproduce - play around with LTR and RTL mode in the example app ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Updated documentation:  - [ ] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [ ] Ensured that CI passes ## Short story on how RTL management works in RN apps on iOS by @kkafar > [!note] > Basically we have two RTL management systems: native one & ReactNative's I18nManager. > > Native one works most likely by applying semantic content attribute to all the views / classes and impacting layout constraints, thus whole native application is laid out properly. > We can impact RTL on natively managed views by: > * setting semantic content attributes for particular view > * [setting semantic content attributes for particular class through appearance proxy](https://developer.apple.com/documentation/uikit/uiappearance?language=objc) > * [setting semantic content attributes for particular class contained in instances of another class](https://developer.apple.com/documentation/uikit/uiappearance/1615006-appearancewhencontainedin?language=objc) > > Topic's to research: > * how parent's semantic content attribute (set directly on given view) does affect subviews > * exact semantics of using appearance proxy object, their priority and resolve order. > > > React Native has notion of internationalisation manager (I18n) which works as follows: > > * The RTL is allowed by default. > * If RTL is not forced from JS, and allowed, then system language writing direction is resolved based on system calls and such obtained interface direction is passed down to Yoga *impacting all views that are laid out by Yoga*, but not purely native ones such as our header. Thus leading to conformity between system options and RN app options. > * If RTL is forced from JS and allowed, them Yoga managed views are laid out in RTL mode, while system managed ones respect the system settings. > * ForceRTL / AllowRTL flags are stored in `NSUserDefaults` application persistent storage, thus living through application restarts. These flags are RN specific, and system has no knowledge of them. > > React Navigation takes the value from RN I18n system and passes it down to our screen / stack / header components. --------- Co-authored-by: Kacper Kafara <[email protected]> Co-authored-by: Kacper Kafara <[email protected]>

…nsion#1895) ## Description In the current state, the RTL mode didn't work correctly for large headers and search bar - even if user sets RTL mode in their app, the content of the large header and search was still on the left side. Also, what I've found, the icon of the back button was still pointing to the left, even if the back button was on the right side of the screen. Fixes software-mansion#1884. ## Changes - Added a workaround for pointing arrow to the left - unfortunately I couldn't find a better solution for changing the direction of the arrow. - Changed the direction of the contents in the navigation bar when user is in RTL mode. ## Screenshots / GIFs ### Before <img width="365" alt="image" src="https://github.com/software-mansion/react-native-screens/assets/23281839/c2f6fd37-3b00-4ec4-aec6-ba8e55566631"> <br/> <img width="383" alt="image" src="https://github.com/software-mansion/react-native-screens/assets/23281839/8504ed8c-1c85-4c2c-bcd9-f1419a2d60d7"> ### After <img width="364" alt="image" src="https://github.com/software-mansion/react-native-screens/assets/23281839/66410e3e-0dd7-4ab2-a9b6-5860d56e32bf"><br/> <img width="383" alt="Screenshot 2023-09-20 at 10 27 51" src="https://github.com/software-mansion/react-native-screens/assets/23281839/4239cad9-e2d9-4bb3-b46f-434487bdf104"> ## Test code and steps to reproduce 1. Launch example application from `Example` directory. 2. Switch `Right to left` option to `true` 3. Check `Header Options` and `Search bar` tabs to see the difference. 4. You can also change `headerHideBackButton` and `headerLargeTitle` options inside the stack's navigator and go to `Other Searchbar example` to check how large header behaves with the search bar. ## Checklist - [ ] Ensured that CI passes

@kkafar

…ling in header (software-mansion#2185) ## Description This PR intents to fix back button direction in RTL mode forced by I18nManager for testing purposes on iOS. When the application's language is changed using the `CFBundleDevelopmentRegion` the system is well aware of that, passes the information to React Native and Yoga. The result is a fully LTR / RTL compliant application. However, when the `RTL` mode is set using the React Native's `I18nManager.forceRTL()` method (for testing purposes I believe) The change is applied to react views only and the system itself does not change it's direction. In such case the only way for the native elements, such as `navigationBar` to adapt to the direction set by `I18nManager` is by manually applying the `semanticContentAttribute` based on `direction` prop passed by `react-navigation`. > [!note] In case there is another native `navigationBar` element apart from the one coming from `react-native-screens`, this change may override it's direction. Tested successfully on iOS 17.5 and 16.4 Fixes software-mansion#1884 . ## Changes - removed faulty workaround - set correct semanticContentAttribute for navigationBar and it's contents - refactored how the searchbar direction is set ## Screenshots / GIFs ### Before ![image](https://github.com/software-mansion/react-native-screens/assets/91994767/1c67071d-92e4-4966-9ad8-362c54c4435b) ### After ![image](https://github.com/software-mansion/react-native-screens/assets/91994767/5cf40cf1-b762-4720-af33-0f939adac7c5) ## Test code and steps to reproduce - play around with LTR and RTL mode in the example app ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Updated documentation:  - [ ] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [ ] Ensured that CI passes ## Short story on how RTL management works in RN apps on iOS by @kkafar > [!note] > Basically we have two RTL management systems: native one & ReactNative's I18nManager. > > Native one works most likely by applying semantic content attribute to all the views / classes and impacting layout constraints, thus whole native application is laid out properly. > We can impact RTL on natively managed views by: > * setting semantic content attributes for particular view > * [setting semantic content attributes for particular class through appearance proxy](https://developer.apple.com/documentation/uikit/uiappearance?language=objc) > * [setting semantic content attributes for particular class contained in instances of another class](https://developer.apple.com/documentation/uikit/uiappearance/1615006-appearancewhencontainedin?language=objc) > > Topic's to research: > * how parent's semantic content attribute (set directly on given view) does affect subviews > * exact semantics of using appearance proxy object, their priority and resolve order. > > > React Native has notion of internationalisation manager (I18n) which works as follows: > > * The RTL is allowed by default. > * If RTL is not forced from JS, and allowed, then system language writing direction is resolved based on system calls and such obtained interface direction is passed down to Yoga *impacting all views that are laid out by Yoga*, but not purely native ones such as our header. Thus leading to conformity between system options and RN app options. > * If RTL is forced from JS and allowed, them Yoga managed views are laid out in RTL mode, while system managed ones respect the system settings. > * ForceRTL / AllowRTL flags are stored in `NSUserDefaults` application persistent storage, thus living through application restarts. These flags are RN specific, and system has no knowledge of them. > > React Navigation takes the value from RN I18n system and passes it down to our screen / stack / header components. --------- Co-authored-by: Kacper Kafara <[email protected]> Co-authored-by: Kacper Kafara <[email protected]>

github-actions bot added Platform: iOS This issue is specific to iOS Missing repro This issue need minimum repro scenario Repro provided A reproduction with a snack or repo is provided and removed Missing repro This issue need minimum repro scenario labels Sep 7, 2023

tboba self-assigned this Sep 19, 2023

tboba mentioned this issue Sep 20, 2023

fix(iOS): Fix positioning of large header and search bar #1895

Merged

1 task

RaphBlanchet mentioned this issue Sep 26, 2023

fix (iOS): Swipe down to dismiss screen with ScrollView on iOS #1902

Open

8 tasks

tboba closed this as completed in #1895 Oct 3, 2023

tboba reopened this Feb 16, 2024

github-actions bot added the Missing repro This issue need minimum repro scenario label Feb 16, 2024

github-actions bot removed the Repro provided A reproduction with a snack or repo is provided label Feb 16, 2024

tboba mentioned this issue Feb 16, 2024

Incorrect message about no minimal repro on issue re-opening software-mansion-labs/swmansion-bot#4

Open

tboba removed their assignment May 14, 2024

tboba mentioned this issue May 27, 2024

Incorrect/Reversed back arrow direction in rtl with native stack #2156

Closed

alduzy self-assigned this Jun 11, 2024

alduzy mentioned this issue Jun 14, 2024

fix(iOS): back button does not respect I18nManager & improve RTL handling in header #2185

Merged

8 tasks

alduzy closed this as completed in #2185 Jun 27, 2024

alduzy closed this as completed in 114fbaa Jun 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

headerLargeTitle & headerSearchBarOptions Doesn't Support RTL #1884

headerLargeTitle & headerSearchBarOptions Doesn't Support RTL #1884

Wahsner commented Sep 7, 2023 •

edited

Loading

tboba commented Sep 20, 2023

moedeveloper commented Oct 12, 2023

Wahsner commented Oct 12, 2023

tboba commented Oct 17, 2023

STonkoshkur commented Feb 16, 2024

tboba commented Feb 16, 2024

tboba commented Feb 16, 2024

github-actions bot commented Feb 16, 2024

tboba commented Feb 16, 2024

serhiitonkoshkur commented Feb 16, 2024

alduzy commented Jun 12, 2024 •

edited

Loading

headerLargeTitle & headerSearchBarOptions Doesn't Support RTL #1884

headerLargeTitle & headerSearchBarOptions Doesn't Support RTL #1884

Comments

Wahsner commented Sep 7, 2023 • edited Loading

Description

Steps to reproduce

Snack or a link to a repository

Screens version

React Native version

Platforms

JavaScript runtime

Workflow

Architecture

Build type

Device

Device model

Acknowledgements

tboba commented Sep 20, 2023

moedeveloper commented Oct 12, 2023

Wahsner commented Oct 12, 2023

tboba commented Oct 17, 2023

STonkoshkur commented Feb 16, 2024

tboba commented Feb 16, 2024

tboba commented Feb 16, 2024

github-actions bot commented Feb 16, 2024

tboba commented Feb 16, 2024

serhiitonkoshkur commented Feb 16, 2024

alduzy commented Jun 12, 2024 • edited Loading

Wahsner commented Sep 7, 2023 •

edited

Loading

alduzy commented Jun 12, 2024 •

edited

Loading