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

tboba · 2023-09-20T08:35:08Z

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

After

Test code and steps to reproduce

Launch example application from Example directory.
Switch Right to left option to true
Check Header Options and Search bar tabs to see the difference.
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

ios/RNSScreenStackHeaderConfig.mm

kkafar

Answered your comment

Because dispatch_after is safer, as it dispatches the content inside its block after the execution of the block where dispatch_after is located, I've decided to replace the dispatch_async to dispatch_after.

kkafar

Asked a question in order to clarify

kkafar · 2023-09-30T11:47:47Z

ios/RNSScreenStackHeaderConfig.mm

+  // Workaround for the wrong rotation of back button arrow in RTL mode.
+  navitem.hidesBackButton = true;
  navitem.hidesBackButton = config.hideBackButton;


Hey, would you mind describing why do we first set navitem.hidesBackButton = true and then immediately we set it to the config.hideBackButton? Whats the mechanism here?

That's because when you're setting your application to RTL mode the arrow in the back button is still pointing to the left - which is wrong, because in RTL mode you should have an arrow pointing to the right. It seems that hiding back button for a while fixes this issue, because any update related to the back button modification updates the it. To be fair I don't know why this is working, unfortunately changing the semanticContentAttribute in dispatch_after doesn't fix that either.

WoLewicki

As long as it does not introduce any regressions, I am fine with it 🚀

STonkoshkur · 2024-02-16T10:43:46Z

@tboba sorry, I've moved my comment to the parent issue

I'm pretty sure back button should look like the one provided in the after-fix demo above:

tboba · 2024-02-16T10:46:01Z

@STonkoshkur Yeah, I moved my comment also there 😄
Oh, yeaaaah you're right. I believe this behavior might have changed after the iOS 17.2 release. I need to take an eye onto this 🤔

…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

Fix positioning of large header and search bar on iOS

178c72f

tboba requested review from WoLewicki and kkafar September 20, 2023 08:35

tboba self-assigned this Sep 20, 2023

tboba changed the title ~~Fix positioning of large header and search bar on iOS~~ fix(iOS): Fix positioning of large header and search bar Sep 20, 2023

tboba commented Sep 20, 2023

View reviewed changes

ios/RNSScreenStackHeaderConfig.mm Outdated Show resolved Hide resolved

kkafar reviewed Sep 20, 2023

View reviewed changes

Change dispatch_async to dispatch_after with 0 seconds

9537fce

Because dispatch_after is safer, as it dispatches the content inside its block after the execution of the block where dispatch_after is located, I've decided to replace the dispatch_async to dispatch_after.

kkafar reviewed Sep 30, 2023

View reviewed changes

WoLewicki approved these changes Oct 2, 2023

View reviewed changes

tboba merged commit bfe5534 into main Oct 3, 2023
5 checks passed

tboba deleted the @tboba/fix-header-and-searchbar-rtl branch October 3, 2023 10:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tboba commented Sep 20, 2023 •

edited

Loading

kkafar left a comment

kkafar left a comment

kkafar Sep 30, 2023

tboba Sep 30, 2023

WoLewicki left a comment

STonkoshkur commented Feb 16, 2024

tboba commented Feb 16, 2024

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

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

Conversation

tboba commented Sep 20, 2023 • edited Loading

Description

Changes

Screenshots / GIFs

Before

After

Test code and steps to reproduce

Checklist

kkafar left a comment

Choose a reason for hiding this comment

kkafar left a comment

Choose a reason for hiding this comment

kkafar Sep 30, 2023

Choose a reason for hiding this comment

tboba Sep 30, 2023

Choose a reason for hiding this comment

WoLewicki left a comment

Choose a reason for hiding this comment

STonkoshkur commented Feb 16, 2024

tboba commented Feb 16, 2024

tboba commented Sep 20, 2023 •

edited

Loading