Skip to content

fix(ios): center RNNReactButtonView inside navigation bar platter#8300

Open
IsaacIsrael wants to merge 2 commits into
wix:masterfrom
IsaacIsrael:fix/button-view-centering
Open

fix(ios): center RNNReactButtonView inside navigation bar platter#8300
IsaacIsrael wants to merge 2 commits into
wix:masterfrom
IsaacIsrael:fix/button-view-centering

Conversation

@IsaacIsrael
Copy link
Copy Markdown
Contributor

Problem

On iOS 26, the internal _UITAMICAdaptorView wrapper view (~36pt) is wider than the React button content (~24.7pt), and UIKit pins the custom view to the leading edge. This makes the button icon/text appear visually off-center within the circular Liquid Glass platter.

Solution

Apply a one-time horizontal CGAffineTransform in layoutSubviews to shift the RNNReactButtonView to the center of its wrapper view.

The centering is computed once (guarded by _didCenter) to avoid repeated recalculations.

Depends on: #8299

Test plan

  • Verify the custom React top bar button icon/text is visually centered within the circular Liquid Glass platter on iOS 26
  • Test on multiple screens with different button sizes (icon-only, text, etc.)
  • Verify centering is correct in both LTR and RTL layouts

Made with Cursor

IsaacIsrael and others added 2 commits May 13, 2026 19:04
On iOS 26 the Liquid Glass navigation bar wraps custom-view bar button
items in several internal layout containers.  Without explicit size
constraints the wrapper views can collapse to zero height after a
pop → tab-switch → tab-switch → push cycle, making the React button
invisible.

- Guard all new logic behind @available(iOS 26.0, *) AND a runtime
  check for UIDesignRequiresCompatibility (compatibility mode disables
  Liquid Glass and uses the legacy view hierarchy)
- Set translatesAutoresizingMaskIntoConstraints = NO
- Add width/height constraints at UILayoutPriorityDefaultHigh
- Update constraints in didMountComponentsWithRootTag: after sizeToFit

Co-authored-by: Cursor <cursoragent@cursor.com>
On iOS 26 the internal _UITAMICAdaptorView wrapper is wider than the
React button content and UIKit pins the custom view to the leading edge.

Apply a one-time horizontal CGAffineTransform in layoutSubviews to
center the view. Guarded by @available(iOS 26.0, *) and
UIDesignRequiresCompatibility check.

Co-authored-by: Cursor <cursoragent@cursor.com>
@IsaacIsrael IsaacIsrael force-pushed the fix/button-view-centering branch from 340487d to db70f4c Compare May 13, 2026 16:09
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