Skip to content

fix: apply headerTintColor to native stack bar button items on iOS 26 - #13228

Open
Priyanshu0007 wants to merge 2 commits into
react-navigation:mainfrom
Priyanshu0007:fix/native-stack-header-tint-ios-26
Open

fix: apply headerTintColor to native stack bar button items on iOS 26#13228
Priyanshu0007 wants to merge 2 commits into
react-navigation:mainfrom
Priyanshu0007:fix/native-stack-header-tint-ios-26

Conversation

@Priyanshu0007

Copy link
Copy Markdown

Closes #12932

Motivation

On iOS 26 (Liquid Glass), UIKit isolates UIBarButtonItems inside shared capsule toolbars so they do not inherit navigationBar.tintColor. Instead, iOS 26 requires tintColor to be set explicitly on each individual UIBarButtonItem.

In @react-navigation/native-stack, processBarButtonItems was not forwarding tintColor to headerLeftBarButtonItems and headerRightBarButtonItems unless explicitly set per-item in screen options. Because of this, custom header items and buttons remained in the default system label color (black) on iOS 26 when headerTintColor was provided.

This PR updates processBarButtonItems in useHeaderConfigProps.tsx to automatically default tintColor to the screen's resolved tintColor (from headerTintColor), ensuring consistent header item tinting across iOS 26, older iOS versions, and Android.

Test plan

  1. Set headerTintColor on a native stack screen (e.g. headerTintColor: "#198a00ff").
  2. Defined unstable_headerLeftItems and unstable_headerRightItems with buttons and menus.
  3. Verified on iOS 26.5 (iPhone 17 Pro), iOS 16.4 (iPhone 14 Pro), and Android (Pixel 10):
    • Header title, left items, right items, and SF symbols are tinted consistently without requiring manual per-item overrides.
  4. Ran all verification commands:
    • pnpm typecheck (Passed)
    • pnpm lint (Passed)
    • pnpm test (All 81 test suites passed)
Screenshot

@netlify

netlify Bot commented Aug 29, 2026

Copy link
Copy Markdown

Deploy Preview for react-navigation-example ready!

Name Link
🔨 Latest commit 0d79761
🔍 Latest deploy log https://app.netlify.com/projects/react-navigation-example/deploys/6a92edf0f96ff400084c4489
😎 Deploy Preview https://deploy-preview-13228--react-navigation-example.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@codecov

codecov Bot commented Aug 29, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 77.92%. Comparing base (bce29d6) to head (0d79761).
⚠️ Report is 310 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #13228      +/-   ##
==========================================
+ Coverage   72.24%   77.92%   +5.67%     
==========================================
  Files         238      264      +26     
  Lines        8391    10722    +2331     
  Branches     3480     4442     +962     
==========================================
+ Hits         6062     8355    +2293     
- Misses       2274     2304      +30     
- Partials       55       63       +8     

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

headerTintColor does not work on iOS 26.

1 participant