iOS 26: header bar items re-created on native-bottom-tab refocus — liquid glass paints one default-light frame (flash in dark mode)

[yigithanyucedag]

Description

When a native stack lives inside a native bottom tab host (react-native-bottom-tabs, real UITabBarController), the stack header's bar item subviews appear to be re-created every time the tab regains focus. On iOS 26 this is very visible in dark appearance: a freshly created bar item renders its first composited frame with the default (light) liquid-glass material before adapting, so every tab switch back to the screen produces a light "flash" on the header action buttons.

Notably, a custom headerTitle React view persists across tab refocus and never flashes — only left/right items do. Push/pop within the same stack does not flash either; it is specific to tab refocus.

What we ruled out

The flash reproduces with every variant of the right item we tried:

• system item via unstable_headerRightItems → {type: 'button', icon: {type: 'sfSymbol', ...}}
• headerRight with a bare icon (system shared-background capsule)
• headerRight / {type: 'custom'} with a custom glass view (UIGlassEffect wrapper), even with effect animations disabled and a fixed colorScheme — the first composited frame after (re)creation is still the default material
• hidesSharedBackground: true (removes the capsule, so nothing flashes — but also removes the capsule)
• freezeOnBlur is false (default), so this is not react-freeze remounting
• Appearance.setColorScheme('dark') is set (native trait matches), and the screens/scenes have dark contentStyle/sceneStyle backgrounds

Since the title subview survives tab refocus while items do not, the asymmetry looks like it is in the header-config item application path rather than in the app.

Steps to reproduce

1. RN new-arch app, dark appearance (Appearance.setColorScheme('dark')).
2. react-native-bottom-tabs navigator; each tab hosts a @react-navigation/native-stack.
3. Stack screen options:

   {
     headerShown: true,
     headerTransparent: true,
     headerTitle: () => <MyCapsuleTitle />, // custom view — never flashes
     unstable_headerRightItems: () => [
       {type: 'button', label: 'Settings', icon: {type: 'sfSymbol', name: 'gearshape'}, onPress},
     ],
   }

4. Switch to another tab and back, repeatedly.
5. Observe the right item's glass capsule flash light for ~1 frame on each refocus; the title capsule stays stable.

Expected behavior

Bar item subviews persist across tab refocus the same way the title view does (or the item appearance can be applied before first composite), so iOS 26 glass does not paint a default-material frame.

Snack or a link to a repository

Minimal reproduction repository (bare RN, no Expo — the involved native APIs aren't available in Snack): in preparation, will be linked in a follow-up comment shortly.

Screens version

4.24.0

React Native version

0.84.1 (new architecture)

Platforms

iOS

Additional environment

package	version
@react-navigation/native-stack	7.14.5
react-native-bottom-tabs	1.3.0
iOS	26.3 simulator (also on device)

If the re-creation actually originates on the tab-host side, a pointer would help and I'll take it to react-native-bottom-tabs instead.

[yigithanyucedag]

Minimal reproduction repo (bare RN, builds & runs on an iOS 26 simulator): https://github.com/yigithanyucedag/rns-4163-repro

All relevant code is in App.tsx (~100 lines): two native bottom tabs, the Home tab hosts a native stack with a transparent header, a custom headerTitle view, and a unstable_headerRightItems SF-symbol button. Force-dark via Appearance.setColorScheme('dark') at launch.

Switch Home ↔ Other repeatedly: the gear capsule (right item) flashes light for ~1 frame on every refocus, while the custom title capsule stays stable. I've also updated the issue body with the missing template sections.