[iOS 26] Custom React component top bar button disappears after navigation cycle and renders off-center in Liquid Glass platter

[IsaacIsrael]

What happened?

On iOS 26 with Liquid Glass enabled, custom React component bar buttons (OptionsTopBarButton.component) have two problems:

1. Button disappears after navigation cycle

After performing a pop → tab switch → tab switch → push back to the screen, the custom React button in the top bar becomes invisible. The view is still in the hierarchy but its wrapper views collapse to zero height.

Root cause: iOS 26's Liquid Glass navigation bar wraps UIBarButtonItem.customView in several internal layout containers (_UITAMICAdaptorView, _TtCC5UIKit19NavigationButtonBar15ItemWrapperView, etc.). Without explicit Auto Layout constraints, these wrappers can collapse to zero height during the navigation lifecycle.

2. Button renders off-center in the circular platter

Even when visible, the React button content is pinned to the leading edge of the internal _UITAMICAdaptorView wrapper (~36pt wide), while the button content is narrower (~24.7pt). This makes the icon appear visually off-center within the circular Liquid Glass platter.

What was the expected behaviour?

• The custom React component button should remain visible through all navigation cycles
• The button content should be visually centered within the circular Liquid Glass platter

Proposed fix

I've opened two PRs that address these issues:

1. fix(ios): add Auto Layout constraints to RNNReactButtonView #8299 — Add explicit widthAnchor/heightAnchor constraints at UILayoutPriorityDefaultHigh to RNNReactButtonView, updated after sizeToFit in didMountComponentsWithRootTag:. This prevents the wrapper views from collapsing.

2. fix(ios): center RNNReactButtonView inside navigation bar platter #8300 — Apply a one-time horizontal CGAffineTransform in layoutSubviews to center the view within its wrapper.

Additionally, #8301 adds a new backgroundColor prop to OptionsTopBarButton to allow setting a solid color on the circular platter — useful for highlighting primary action buttons.

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

How to reproduce

1. Create a screen with a custom React component as a right top bar button:

   rightButtons: [{
     id: 'action',
     component: { name: 'MyCustomButton' },
   }]

2. Navigate to this screen (push)
3. Pop back
4. Switch to a different bottom tab
5. Switch to another bottom tab
6. Push back to the original screen
7. Result: The custom button is invisible

Environment

• React Native Navigation version: 8.8.2 / 8.8.3
• React Native version: 0.84
• Fabric enabled: Yes
• iOS version: 26.0 (Xcode 26)
• Liquid Glass: enabled (no UIDesignRequiresCompatibility)

[markdevocht]

@IsaacIsrael Thank you for your contribution!