Skip to content

Commit

Permalink
fix: setting headerBackTitleVisible to false not working on iOS (#11937)
Browse files Browse the repository at this point in the history
**Motivation**

According to [the
docs](https://reactnavigation.org/docs/7.x/native-stack-navigator#headerbacktitlevisible),
setting `headerBackTitleVisible` to `false` should hide the back title
on iOS, while this is not the case with `react-native-screens` v3.29+.

**Cause**

With the current code, `backTitle={headerBackTitleVisible ?
headerBackTitle : ' '}`, the back title is set to a blank string if
`headerBackTitleVisible` is false. However, in newer versions of
`react-native-screens`, [the `backTitle` will be considered blank if it
only contains white
spaces](https://github.com/software-mansion/react-native-screens/blob/d54a19a/ios/RNSScreenStackHeaderConfig.mm#L506),
making it fallback to the default title - which makes the back title not
hidden at all.

**Fix**

Assign [the `backTitleVisible` property of `RNSScreenStackHeaderConfig`
native
component](https://github.com/software-mansion/react-native-screens/blob/d54a19a9789b799566da16a89e2cd8d8f1ad0ba7/ios/RNSScreenStackHeaderConfig.h#L42),
which [seems to be a legit way to hide the back
title](https://github.com/software-mansion/react-native-screens/blob/d54a19a/ios/RNSScreenStackHeaderConfig.mm#L514-L539).

**Test plan**

1. Create a native stack navigator with the [`backTitleVisible` screen
option set to
`false`](https://reactnavigation.org/docs/7.x/native-stack-navigator#headerbacktitlevisible).
2. See if the back title is hidden on iOS when navigating to another
screen.

| Expected | Not Expected |
| --- | --- |
|
![](https://github.com/react-navigation/react-navigation/assets/3784687/73a52ec8-df29-43ec-94e1-c515af93e0b7)
|
![](https://github.com/react-navigation/react-navigation/assets/3784687/89cd88bb-2e51-40e1-b4c8-7922ed6cda41)
|

* [x] May need to test if assigning the new property will break older
versions of `react-native-screens`.
* Tested with `react-native-screens` `3.20.0` and `3.21.0`, app does not
crash and the back title remains hidden-able.
  • Loading branch information
zetavg committed May 13, 2024
1 parent 11e83b3 commit 52a3234
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion packages/native-stack/src/views/HeaderConfig.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,12 @@ export function HeaderConfig({
<ScreenStackHeaderConfig
backButtonInCustomView={backButtonInCustomView}
backgroundColor={headerBackgroundColor}
backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
backTitle={
headerBackTitleVisible
? headerBackTitle
: ' ' /* For backward compatibility with react-native-screens versions <3.21.0, where `backTitleVisible` is not available */
}
backTitleVisible={headerBackTitleVisible}
backTitleFontFamily={backTitleFontFamily}
backTitleFontSize={backTitleFontSize}
blurEffect={headerBlurEffect}
Expand Down

0 comments on commit 52a3234

Please sign in to comment.