Skip to content

fix(iOS): fix header back button display mode when back title text is custom #2860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 11, 2025
Merged

fix(iOS): fix header back button display mode when back title text is custom #2860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
07256da
chore: add tests for header interactions (#2809)
maciekstosio Apr 8, 2025
f505d72
chore: add tests for 2809
maciekstosio Apr 9, 2025
0a70092
Fix the issue
maciekstosio Apr 9, 2025
1c70022
chore: update docs
maciekstosio Apr 10, 2025
76c1d9f
Merge branch 'main' into @maciekstosio/Add-tests-for-header-interacti…
maciekstosio Apr 10, 2025
d1c0127
chore: refactor tests and improve test names
maciekstosio Apr 11, 2025
ca814f8
Merge branch '@maciekstosio/Add-tests-for-header-interactions-' into …
maciekstosio Apr 11, 2025
89b3df9
Merge branch 'main' into @maciekstosio/Fix-headerBackButtonDisplayMod…
maciekstosio Apr 11, 2025
383f254
apply changes from comments
maciekstosio Apr 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions FabricExample/e2e/issuesTests/Test2809.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,9 @@ describeIfiOS('Test2809', () => {
await expectBackButtonMenuWithDifferentLabels('Back', 'First'); // Check if backButtonMenu works
});

// TODO: We should be able to fix that
// Custom text overrides backButtonDisplayMode
it('custom text is NOT truncated by backButtonDisplayMode and is used in back button menu', async () => {
await expectInitialPageToExist('EnabledGenericCustomText', by.text('Custom'));
await expectBackButtonMenuWithTheSameLabel('Custom'); // Check if backButtonMenu works
it('custom text is truncated by backButtonDisplayMode and is used in back button menu', async () => {
await expectInitialPageToExist('EnabledGenericCustomText', by.text('Back'));
await expectBackButtonMenuWithDifferentLabels('Back', 'Custom'); // Check if backButtonMenu works
});

// Custom styles override backButtonDisplayMode
Expand Down Expand Up @@ -195,17 +193,13 @@ describeIfiOS('Test2809', () => {
await element(by.text('Pop to top')).tap(); // Go back
});

// TODO: We should be able to fix that
// Custom text overrides backButtonDisplayMode because of using backButtonItem
it.failing('Custom long back label should be truncated to generic by backButtonDisplayMode', async () => {
it('Custom long back label should be truncated to generic by backButtonDisplayMode', async () => {
await expectInitialPageToExist('CustomLongCustomText', by.text('Back'));
await expectBackButtonMenuWithDifferentLabels('Back', 'LongLongLongLongLong'); // Check if backButtonMenu works
await element(by.text('Pop to top')).tap(); // Go back
});

// TODO: We should be able to fix that
// Custom text overrides backButtonDisplayMode because of using backButtonItem
it.failing('Custom back label should be truncated to minimal by backButtonDisplayMode when title is long', async () => {
it('Custom back label should be truncated to minimal by backButtonDisplayMode when title is long', async () => {
await expectInitialPageToExist('CustomCustomTextWithLongTitle', by.id('chevron.backward'), by.text('CustomBack'));
await expectBackButtonMenuIconAndLabel('chevron.backward', 'CustomBack'); // Check if backButtonMenu works
await element(by.text('Pop to top')).tap(); // Go back
Expand Down
5 changes: 0 additions & 5 deletions apps/src/tests/Test2809/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,11 +153,6 @@ function Home({
title="CustomCustomTextWithLongTitle"
onPress={() => navigation.navigate('CustomCustomTextWithLongTitle')}
/>

<Button
title="Go back"
onPress={() => navigation.goBack()}
/>
</View>
);
}
Expand Down
2 changes: 1 addition & 1 deletion guides/GUIDE_FOR_LIBRARY_AUTHORS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,7 +532,7 @@ Boolean indicating whether to show the menu on longPress of iOS >= 14 back butto

### `backButtonDisplayMode` (iOS only)

Enum value indicating display mode of back button. It is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu`, `backTitle` and `backTitleVisible=false` is set. The `backTitleVisible` forces `backButtonDisplayMode: minimal` and omits other values. Read more [#2800](https://github.com/software-mansion/react-native-screens/pull/2800). The other props, under the hood, customize `backButtonItem` which overrides `backButtonDisplayMode`. Read more [#2123](https://github.com/software-mansion/react-native-screens/pull/2123).
Enum value indicating display mode of back button. It is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` and `backTitleVisible=false` is set. The `backTitleVisible` forces `backButtonDisplayMode: minimal` and omits other values. Read more [#2800](https://github.com/software-mansion/react-native-screens/pull/2800). The other props, under the hood, customize `backButtonItem` which overrides `backButtonDisplayMode`. Read more [#2123](https://github.com/software-mansion/react-native-screens/pull/2123).

Possible options:

Expand Down
7 changes: 3 additions & 4 deletions ios/RNSScreenStackHeaderConfig.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -629,11 +629,12 @@ + (void)updateViewController:(UIViewController *)vc
action:nil];
[backBarButtonItem setMenuHidden:config.disableBackButtonMenu];

auto shouldUseCustomBackBarButtonItem = !isBackTitleBlank || config.disableBackButtonMenu;
auto shouldUseCustomBackBarButtonItem = config.disableBackButtonMenu;

// This has any effect only in case the `backBarButtonItem` is not set.
// We apply it before we configure the back item, because it might get overriden.
prevItem.backButtonDisplayMode = config.backButtonDisplayMode;
prevItem.backButtonTitle = resolvedBackTitle;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks ok, but the line 667 should be removed then, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed in: 383f254


if (config.isBackTitleVisible) {
if ((config.backTitleFontFamily &&
Expand Down Expand Up @@ -661,9 +662,7 @@ + (void)updateViewController:(UIViewController *)vc
}
} else {
// back button title should be not visible next to back button,
// but it should still appear in back menu (if one is enabled)

prevItem.backButtonTitle = resolvedBackTitle;
// but it should still appear in back menu
prevItem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeMinimal;
shouldUseCustomBackBarButtonItem = NO;
}
Expand Down
2 changes: 1 addition & 1 deletion native-stack/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ Boolean indicating whether to show the menu on longPress of iOS >= 14 back butto

#### `backButtonDisplayMode` (iOS only)

Enum value indicating display mode of back button. It is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu`, `backTitle` and `backTitleVisible=false` is set. The `backTitleVisible` forces `backButtonDisplayMode: minimal` and omits other values. Read more [#2800](https://github.com/software-mansion/react-native-screens/pull/2800). The other props, under the hood, customize `backButtonItem` which overrides `backButtonDisplayMode`. Read more [#2123](https://github.com/software-mansion/react-native-screens/pull/2123).
Enum value indicating display mode of back button. It is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` and `backTitleVisible=false` is set. The `backTitleVisible` forces `backButtonDisplayMode: minimal` and omits other values. Read more [#2800](https://github.com/software-mansion/react-native-screens/pull/2800). The other props, under the hood, customize `backButtonItem` which overrides `backButtonDisplayMode`. Read more [#2123](https://github.com/software-mansion/react-native-screens/pull/2123).

Possible options:

Expand Down
2 changes: 1 addition & 1 deletion src/native-stack/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export type NativeStackNavigationOptions = {
*/
disableBackButtonMenu?: boolean;
/**
* How the back button behaves. It is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu`, `backTitle` and `backTitleVisible=false` is set.
* How the back button behaves. It is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` and `backTitleVisible=false` is set.
* The following values are currently supported (they correspond to [UINavigationItemBackButtonDisplayMode](https://developer.apple.com/documentation/uikit/uinavigationitembackbuttondisplaymode?language=objc)):
*
* - `default` – show given back button previous controller title, system generic or just icon based on available space
Expand Down
2 changes: 1 addition & 1 deletion src/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,7 +576,7 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
*/
disableBackButtonMenu?: boolean;
/**
* How the back button behaves. It is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu`, `backTitle` and `backTitleVisible=false` is set.
* How the back button behaves. It is used only when none of: `backTitleFontFamily`, `backTitleFontSize`, `disableBackButtonMenu` and `backTitleVisible=false` is set.
* The following values are currently supported (they correspond to [UINavigationItemBackButtonDisplayMode](https://developer.apple.com/documentation/uikit/uinavigationitembackbuttondisplaymode?language=objc)):
*
* - `default` – show given back button previous controller title, system generic or just icon based on available space
Expand Down
Loading