Skip to content

Conversation

@yocontra
Copy link

Summary

iOS 26 introduced a new "liquid glass" material effect for tab bars that dynamically samples colors from the content behind it. While this creates beautiful translucent effects for static content, it can cause readability issues when the content is dynamic (like maps) or has varying colors.

This PR adds a new ignoresContentBackground prop that, when set to true, disables the liquid glass content sampling on iOS 26+ and instead uses a solid background color (from tabBarStyle.backgroundColor / barTintColor).

Usage

With standalone TabView:

<TabView
  tabBarStyle={{ backgroundColor: 'black' }}
  ignoresContentBackground={true}
  // ... other props
/>

With @bottom-tabs/react-navigation:

<Tab.Navigator
  tabBarStyle={{ backgroundColor: 'black' }}
  ignoresContentBackground={true}
>
  {/* screens */}
</Tab.Navigator>

Implementation

  • Added ignoresContentBackground prop to TabViewNativeComponent.ts (codegen)
  • Added ignoresContentBackground to TabViewProps.swift
  • Added prop bridging in RCTTabViewComponentView.mm
  • Added SwiftUI .toolbarBackgroundVisibility(.visible) and .toolbarBackground() modifiers for iOS 26+ in TabViewImpl.swift
  • Added JSDoc documentation in TabView.tsx

Platform Support

This prop only has an effect on iOS 26+. On earlier iOS versions and other platforms, it is ignored.

Motivation

When displaying dynamic content like maps behind the tab bar, the liquid glass effect samples various colors from the map, causing the tab bar to have inconsistent or hard-to-read colors. This prop provides a way to opt-out of the liquid glass sampling while maintaining the glass material appearance with a fixed tint color.

Test Plan

  • Test on iOS 26 simulator/device with ignoresContentBackground={true} - tab bar should show solid background
  • Test on iOS 26 with ignoresContentBackground={false} (default) - liquid glass should work normally
  • Test on iOS < 26 - prop should have no effect
  • Test with various tabBarStyle.backgroundColor values

…control

iOS 26 introduced a new "liquid glass" material effect for tab bars that
dynamically samples colors from the content behind it. While this creates
beautiful translucent effects for static content, it can cause readability
issues when the content is dynamic (like maps) or has varying colors.

This PR adds a new `ignoresContentBackground` prop that, when set to true,
disables the liquid glass content sampling on iOS 26+ and instead uses a
solid background color (from `tabBarStyle.backgroundColor` / `barTintColor`).

Usage:
```tsx
<TabView
  tabBarStyle={{ backgroundColor: 'black' }}
  ignoresContentBackground={true}
  // ... other props
/>
```

Or with @bottom-tabs/react-navigation:
```tsx
<Tab.Navigator
  tabBarStyle={{ backgroundColor: 'black' }}
  ignoresContentBackground={true}
>
  {/* screens */}
</Tab.Navigator>
```

Implementation details:
- Added `ignoresContentBackground` prop to TabViewNativeComponent.ts (codegen)
- Added `ignoresContentBackground` to TabViewProps.swift
- Added prop bridging in RCTTabViewComponentView.mm
- Added SwiftUI `.toolbarBackgroundVisibility(.visible)` and
  `.toolbarBackground()` modifiers for iOS 26+ in TabViewImpl.swift
- Added documentation in TabView.tsx

This prop only has an effect on iOS 26+. On earlier iOS versions and other
platforms, it is ignored.
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.

1 participant