Skip to content
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.

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

fix: setting headerBackTitleVisible to false not working on iOS #11937

Conversation

zetavg
Copy link
Contributor

@zetavg zetavg commented Apr 14, 2024

Motivation

According to the docs, 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, 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, which seems to be a legit way to hide the back title.

Test plan

  1. Create a native stack navigator with the backTitleVisible screen option set to false.
  2. See if the back title is hidden on iOS when navigating to another screen.
Expected Not Expected
  • 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.

Copy link

Hey @zetavg! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

Copy link

netlify bot commented Apr 14, 2024

Deploy Preview for react-navigation-example ready!

Name Link
🔨 Latest commit 2573816
🔍 Latest deploy log https://app.netlify.com/sites/react-navigation-example/deploys/6641d37941fbc800087616dc
😎 Deploy Preview https://deploy-preview-11937--react-navigation-example.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@codecov-commenter
Copy link

Codecov Report

Attention: Patch coverage is 33.33333% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 77.00%. Comparing base (d90ed76) to head (84cca6c).
Report is 2 commits behind head on main.

Files Patch % Lines
packages/native-stack/src/views/HeaderConfig.tsx 33.33% 1 Missing and 1 partial ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #11937      +/-   ##
==========================================
- Coverage   77.03%   77.00%   -0.03%     
==========================================
  Files         210      210              
  Lines        6339     6341       +2     
  Branches     2506     2508       +2     
==========================================
  Hits         4883     4883              
- Misses       1402     1403       +1     
- Partials       54       55       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@tboba tboba merged commit 52a3234 into react-navigation:main May 13, 2024
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants