Skip to content

android: stabilize custom top bar button layout#8326

Merged
yedidyak merged 4 commits into
masterfrom
yedidyak/android-topbar-button-alignment
Jun 8, 2026
Merged

android: stabilize custom top bar button layout#8326
yedidyak merged 4 commits into
masterfrom
yedidyak/android-topbar-button-alignment

Conversation

@yedidyak

@yedidyak yedidyak commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Stabilizes Android custom top-bar React button layout by keeping the bounded content-width discovery pass from android: fix custom top bar button measurement #8320, then remeasuring the button with an exact final content width.
  • Preserves title-width behavior from android: fix custom top bar button measurement #8320 so custom buttons reserve their measured content width instead of a forced actionBarSize width.
  • Updates regression coverage for missing dimensions, explicit dimensions, RTL, and zero-width parent fallback behavior.

Validation

  • git diff --check
  • ./gradlew :react-native-navigation:testDebugUnitTest --tests com.reactnativenavigation.views.TitleBarReactButtonViewTest --tests com.reactnativenavigation.views.TitleAndButtonsContainerTest — SUCCESS (37 successes, 0 failures, 0 skipped)

Not Run

  • Full Android unit/instrumentation suite; this change is scoped to the top-bar button measurement path and the focused affected tests passed.

Risks

  • Low to medium: scoped to Android custom React top-bar buttons without explicit width.
  • The main behavior to watch is custom button width measurement for components whose content changes after initial layout.

Review Context

  • This is a follow-up to android: fix custom top bar button measurement #8320. The first pass still uses bounded AT_MOST width to prevent title truncation.
  • The second pass restores an exact final RN/Yoga layout box to address vertical alignment regressions in custom buttons.
  • Pre-PR review found no cleanup items, blockers, or creator-intent questions.

Suggested Reviewers

@yedidyak yedidyak force-pushed the yedidyak/android-topbar-button-alignment branch from 8e7e2fd to 15e8032 Compare June 7, 2026 12:00
@yedidyak yedidyak force-pushed the yedidyak/android-topbar-button-alignment branch 2 times, most recently from baeb5a9 to cdab8da Compare June 7, 2026 13:24
@yedidyak yedidyak force-pushed the yedidyak/android-topbar-button-alignment branch from cdab8da to 26e2471 Compare June 7, 2026 13:43
@yedidyak yedidyak merged commit 49def36 into master Jun 8, 2026
2 checks passed
israelko added a commit that referenced this pull request Jun 11, 2026
…e bounded measure

Custom React-component top bar buttons without explicit width/height collapsed to
~1px (invisible) under the New Architecture (Fabric). The two-pass measurement from
#8320/#8326 re-measured the hosted ReactSurfaceView with an EXACTLY box derived from
the first (often still-empty) discovery pass; that forced box is pushed to Fabric via
updateLayoutSpecs, so Fabric keeps laying the content out into the collapsed box and
the button never recovers. The same forcing also stretched flex-content buttons to
the full bar height.

Replace the two-pass with a single bounded (AT_MOST) measure and let ReactSurfaceView
size itself to its content (its documented AT_MOST max-of-children behavior). When
Fabric mounts/sizes the content it re-requests layout and this measure runs again
against the real content size. Explicit width/height still measure EXACTLY; vertical
centering is preserved by the existing CENTER_VERTICAL gravity.

Verified on-device (Pixel 7, newArch+Hermes) on RN 0.78.3 and 0.85.2: content-hugging
and flex component buttons render correctly; flex buttons are pixel-identical to
before. Unit tests updated for the single-pass contract.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant