Skip to content

Commit

Permalink
fix(iOS): restore native behavior of auto shortening back button title (
Browse files Browse the repository at this point in the history
software-mansion#2105)

## Description

Restore the iOS native behavior of automatically shorting the title of
the header back button to "Back" if there is not enough space, which is
documented
[here](https://reactnavigation.org/docs/header-buttons#customizing-the-back-button)[^1]
but does not behave as expected since v3.21.

Fixes software-mansion#1589.


## Changes

* Assign to `backBarButtonItem` only if actual customizations of the
back button are being made.


## Screenshots / GIFs

| Before | After |
|--------|------|
| ![Broken
1](https://github.com/software-mansion/react-native-screens/assets/3784687/880eaecb-54d9-48d3-95bd-5f8e6cd7b066)
| ![Working
1](https://github.com/software-mansion/react-native-screens/assets/3784687/201e8006-544d-43ee-95e3-308e2f926566)
|


## Test code and steps to reproduce

<!--
Please include code that can be used to test this change and short
description how this example should work.
This snippet should be as minimal as possible and ready to be pasted
into editor (don't exclude exports or remove "not important" parts of
reproduction example)
-->

## Checklist

- [ ] Included code example that can be used to test this change
- [ ] Updated TS types
- [ ] Updated documentation: <!-- For adding new props to native-stack
-->
- [ ]
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

[^1]: According to the document, 'On iOS this includes a label next to
the button, which shows the title of the previous screen when the title
fits in the available space, otherwise it says "Back".'

---------

Co-authored-by: Kacper Kafara <kacperkafara@gmail.com>
  • Loading branch information
2 people authored and ja1ns committed Oct 9, 2024
1 parent e3cef0b commit 0669aa6
Showing 1 changed file with 19 additions and 2 deletions.
21 changes: 19 additions & 2 deletions ios/RNSScreenStackHeaderConfig.mm
Original file line number Diff line number Diff line change
Expand Up @@ -511,8 +511,17 @@ + (void)updateViewController:(UIViewController *)vc
action:nil];
[backBarButtonItem setMenuHidden:config.disableBackButtonMenu];

auto isBackButtonCustomized = !isBackTitleBlank || config.disableBackButtonMenu;

if (config.isBackTitleVisible) {
if (config.backTitleFontFamily || config.backTitleFontSize) {
if ((config.backTitleFontFamily &&
// While being used by react-navigation, the `backTitleFontFamily` will
// be set to "System" by default - which is the system default font.
// To avoid always considering the font as customized, we need to have an additional check.
// See: https://github.com/software-mansion/react-native-screens/pull/2105#discussion_r1565222738
![config.backTitleFontFamily isEqual:@"System"]) ||
config.backTitleFontSize) {
isBackButtonCustomized = YES;
NSMutableDictionary *attrs = [NSMutableDictionary new];
NSNumber *size = config.backTitleFontSize ?: @17;
if (config.backTitleFontFamily) {
Expand All @@ -535,9 +544,17 @@ + (void)updateViewController:(UIViewController *)vc
// When backBarButtonItem's title is null, back menu will use value
// of backButtonTitle
[backBarButtonItem setTitle:nil];
isBackButtonCustomized = YES;
prevItem.backButtonTitle = resolvedBackTitle;
}
prevItem.backBarButtonItem = backBarButtonItem;

// Prevent unnecessary assignment of backBarButtonItem if it is not customized,
// as assigning one will override the native behavior of automatically shortening
// the title to "Back" or hide the back title if there's not enough space.
// See: https://github.com/software-mansion/react-native-screens/issues/1589
if (isBackButtonCustomized) {
prevItem.backBarButtonItem = backBarButtonItem;
}

if (@available(iOS 11.0, *)) {
if (config.largeTitle) {
Expand Down

0 comments on commit 0669aa6

Please sign in to comment.