[iOS] Native header button backdrops only appear on initial tab, not on lazily rendered tabs

[antekordic]

Description

When using a bottom tab navigator with nested native stack navigators that have headerTransparent: true and headerLargeTitle: true, the native iOS header button backdrops (translucent pill-shaped backgrounds) only appear on the initially rendered tab.

Tabs that are lazily rendered when the user navigates to them do not receive the native backdrops, even with identical configuration.

This affects all header bar button items - headerRight, headerLeft, and back buttons.

Screenshots

Initial render (correct):

After switching tabs (broken):

Steps to reproduce

Steps to reproduce

1. Create a bottom tab navigator with 2+ tabs
2. Each tab has a nested native stack navigator
3. Configure screens with headerTransparent: true, headerLargeTitle: true, and headerRight with icons
4. Launch app - initial tab shows native backdrops correctly
5. Navigate to second tab - no backdrops appear

Expected behavior

All tabs should render native header button backdrops regardless of render order.

Actual behavior

Only the initially rendered tab gets native backdrops. Lazily rendered tabs never receive them.

Snack reproduction

[Your Snack URL]

Environment

• react-native-screens: 4.18.0
• react-native: 0.81.5
• expo-router: 6.0.14
• iOS version: 18.x
• Expo SDK: 54

Snack or a link to a repository

https://snack.expo.dev/@antekordic/native-header-button-backdrops-

Screens version

4.18.0

React Native version

0.81.5

Platforms

iOS

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Steps to reproduce section.

[kkafar]

@kligarski could you take a look here?

[kligarski]

Hi, @antekordic. Thank you for the report.

We will need some help with reproducing the issue. I tried to create an example following your instructions but I don't reproduce the issue. Here is the code I used in brand new expo app with react-native-screens@4.18.0 using iOS 26.1 iPhone 17 Pro simulator:

Reproduction

    "@react-navigation/native": "^7.1.8",
    "expo": "~54.0.27",
    "expo-router": "~6.0.17",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-native": "0.81.5",
    "react-native-screens": "4.18",

// --- ./(tabs)/testtab2/index.tsx ---
import { ScrollView, Text } from "react-native";

export default function Stack2() {
  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate
        lectus et ante malesuada mattis...
      </Text>
    </ScrollView>
  );
}
// --- ./(tabs)/testtab2/_layout.tsx ---
import { Stack } from "expo-router";
import { View } from "react-native";

export default function Tab2Layout() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          title: "Stack2",
          headerTransparent: true,
          headerLargeTitle: true,
          headerRight: () => (
            <View style={{ flexDirection: "row", gap: 20, padding: 10 }}>
              <View
                style={{
                  width: 20,
                  height: 20,
                  backgroundColor: "pink",
                }}
              />
              <View
                style={{
                  width: 20,
                  height: 20,
                  backgroundColor: "blue",
                }}
              />
            </View>
          ),
        }}
      />
    </Stack>
  );
}
// --- ./(tabs)/_layout.tsx ---
import { Tabs } from "expo-router";
import React from "react";

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ lazy: true, headerShown: false }}>
      <Tabs.Screen
        name="index"
        options={{
          title: "Tab1",
        }}
      />
      <Tabs.Screen
        name="testtab2"
        options={{
          title: "Tab2",
        }}
      />
    </Tabs>
  );
}
// --- ./(tabs)/index/index.tsx ---
import { ScrollView, Text } from "react-native";

export default function Stack1() {
  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate
        lectus et ante malesuada mattis...
      </Text>
    </ScrollView>
  );
}
// --- ./(tabs)/index/_layout.tsx ---
import { Stack } from "expo-router";
import { View } from "react-native";

export default function Tab1Layout() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          title: "Stack1",
          headerTransparent: true,
          headerLargeTitle: true,
          headerRight: () => (
            <View style={{ flexDirection: "row", gap: 20, padding: 10 }}>
              <View
                style={{
                  width: 20,
                  height: 20,
                  backgroundColor: "pink",
                }}
              />
              <View
                style={{
                  width: 20,
                  height: 20,
                  backgroundColor: "blue",
                }}
              />
            </View>
          ),
        }}
      />
    </Stack>
  );
}
// --- ./_layout.tsx ---
import { Stack } from "expo-router";

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

3453.mov

Please provide minimal reproduction example so that we can investigate the issue in more detail (or modify my example so that the issue is reproducible). Video recording of the bug is also welcome.

Please also confirm which version of bottom tabs navigator you're using (JS or native, from your description I deduced it's most likely JS tabs as you mentioned "lazy loading" but I'm not sure) and iOS version (you mentioned 18.x but this version does not support Liquid Glass effect).

[antekordic]

Hi @kligarski, thanks for the support!

I found the trigger for the bug.
In your app it works because you aren't using animations between screens.
Pass animaton fade, or shift it will trigger the bug.

return ( 
 <Tabs screenOptions={{
    animation: "fade", // ❌ BUG: causes backdrop to disappear
 // animation: "none", // ✅ WORKS: backdrop persists
 lazy: true, 
headerShown: false }}>
      <Tabs.Screen
        name="index"
        options={{
          title: "Tab1",
        }}
      />
      <Tabs.Screen
        name="testtab2"
        options={{
          title: "Tab2",
        }}
      />
    </Tabs>
  );
},

I am on version:
"@react-navigation/bottom-tabs": "7.8.1",

[kligarski]

Thank you for the info - I managed to reproduce the issue.

After some investigation, it seems like this is a regression in Apple's UIKit framework starting from iOS 26.1 and the problem is reproducible without react-native-screens. When parent view changes opacity from 0 to 1 (which happens when tab animation is used), the liquid glass effect is not applied.

The example works correctly on iOS 26.0 and the bug persists on iOS 26.1 & iOS 26.2 RC.

iOS 26.0	iOS 26.1
3453_26_0.mov	3453_26_1.mov

The bug has been reported to Apple (https://developer.apple.com/forums/thread/808410), here are some related links:

• https://github.com/intergalacticspacehighway/GlassEffectUIKitOpacityBug,
• [glass-effect] - Fix zero opacity makes view invisible forever expo/expo#41225,
• [ios][ui] expo-glass-effect doesn't work with animated parent opacity changes expo/expo#41024.

The workaround seems to be to set view's opacity to e.g. 0.001 instead of 0 but if Apple's team is aware of the issue, it should hopefully be fixed in one of upcoming iOS releases. We'll let react-navigation team know about this bug as well.