Skip to content

Commit

Permalink
fix(iOS): Fix positioning of large header and search bar (software-ma…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
tboba authored and ja1ns committed Oct 9, 2024
1 parent b7523d5 commit 64ccdca
Showing 1 changed file with 9 additions and 0 deletions.
9 changes: 9 additions & 0 deletions ios/RNSScreenStackHeaderConfig.mm
Original file line number Diff line number Diff line change
Expand Up @@ -567,6 +567,8 @@ + (void)updateViewController:(UIViewController *)vc
#endif
}
#if !TARGET_OS_TV
// Workaround for the wrong rotation of back button arrow in RTL mode.
navitem.hidesBackButton = true;
navitem.hidesBackButton = config.hideBackButton;
#endif
navitem.leftBarButtonItem = nil;
Expand Down Expand Up @@ -624,6 +626,13 @@ + (void)updateViewController:(UIViewController *)vc
}
}

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0), dispatch_get_main_queue(), ^{
// Position the contents in the navigation bar, regarding to the direction.
for (UIView *view in navctr.navigationBar.subviews) {
view.semanticContentAttribute = config.direction;
}
});

// This assignment should be done after `navitem.titleView = ...` assignment (iOS 16.0 bug).
// See: https://github.com/software-mansion/react-native-screens/issues/1570 (comments)
navitem.title = config.title;
Expand Down

0 comments on commit 64ccdca

Please sign in to comment.