software-mansion / software-mansion/react-native-screens

[iOS 26] variant="prominent" header button loses its background after Appearance.setColorScheme on an unselected tab

Open
#4,479 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

platform:ios repro-provided
Dominant language
TypeScript
Stars
3.7k
Forks
713
Avg merge
2d 23h
Merged PRs (30d)
71

Description

Description

A Stack.Toolbar.Button with variant="prominent" loses its background when Appearance.setColorScheme() is called while its tab isn't the selected one. Only the glyph is left. It stays broken for that whole visit, and a second tab switch restores it.

Appearance.setColorScheme() is the trigger. Flipping the react-navigation ThemeProvider value instead does nothing, and changing the button's own tintColor does nothing either. headerLargeTitle changes the symptom: with it the glyph stays and only the background goes, without it the whole button disappears.

Calling willShowViewController: from -[RNSScreen viewDidAppear:] works around it, but not well: the repair only lands once the screen is visible, so the button is on screen broken for about a second before it pops in. viewWillAppear: is too early, nav bar isn't laid out yet.

#if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
  if (@available(iOS 26.0, *)) {
    if (self.navigationController != nil) {
      RNSScreenStackHeaderConfig *config = [self.screenView findHeaderConfig];
      if (config != nil) {
        [RNSScreenStackHeaderConfig willShowViewController:self animated:NO withConfig:config];
      }
    }
  }
#endif

https://github.com/user-attachments/assets/2301bbc2-e0cf-4895-a8c5-153c2b8f9e7b

Image Image
Steps to reproduce
  1. Run on an iOS 26 simulator or device. Opens on tab One with a prominent + in the header.
  2. Switch to tab Two.
  3. Tap "Toggle appearance, then go back to One".
  4. Switch back to tab One. The + has lost its background. It stays that way as long as you're on the tab.
  5. Switch to Two and back to One again and it comes back.
Snack or a link to a repository

https://github.com/robert-wettstaedt/rns-prominent-toolbar-repro

Screens version

4.26.2

React Native version

0.86.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Build type

Release mode

Device

iOS simulator

Device model

iPhone 17 Pro (iOS 26.5)

Acknowledgements

Yes

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue in the linked rns-prominent-toolbar-repro on an iOS 26 simulator, then inspect RNSScreen viewDidAppear:, viewWillAppear:, and RNSScreenStackHeaderConfig willShowViewController: withConfig:. Compare the behavior when switching tabs after Appearance.setColorScheme(). Done means the prominent header button retains its background when returning to the unselected tab without a delayed visible repair.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, objective-c, react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.