Align Android preview panel layout with React Native gold standard#294
Merged
Conversation
Alex Freas (akfreas)
requested review from
Lotfi Anwar L Arif (Lotfi-Arif) and
Charles Hudson (phobetron)
as code owners
Collaborator
Charles Hudson (phobetron)
left a comment
Charles Hudson (phobetron)
left a comment
There was a problem hiding this comment.
Not sure of the utility of that markdown file in drafts... should probably be deleted?
Alex Freas (akfreas)
force-pushed
the
android-preview-panel-rn-parity
branch
from
96d9f1f to
68b5595
Compare
Charles Hudson (phobetron)
previously approved these changes
May 29, 2026
…previewStateHelpers
… and in-activity preview panel for XML apps
…ng its collector only on entry
… cached AVD snapshots, and the aosp_atd image
…t and Maestro E2E
Alex Freas (akfreas)
force-pushed
the
android-preview-panel-rn-parity
branch
from
68b5595 to
22ef668
Compare
Alex Freas (akfreas)
requested a review
from François (Lp-Francois)
as a code owner
Wiz Scan Summary
To detect these findings earlier in the dev lifecycle, try using Wiz Code VS Code Extension. |
Wiz Scan Summary
To detect these findings earlier in the dev lifecycle, try using Wiz Code VS Code Extension. |
Charles Hudson (phobetron)
approved these changes
May 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings the Android preview panel's layout into parity with the React Native preview panel (the gold standard), addressing three visual discrepancies. RN is authoritative; Android follows it (and stays aligned with iOS where a shared test contract applies).
Changes
textAlign = TextAlign.Center. RN'sActionButtoncenters its label in a full-width button; Android's full-widthTextdefaulted to left.weight(1f)siblings left the experience count floating mid-right) into RN's stacked rows: name + qualification on row 1, expand arrow + "N experiences" left-aligned on its own row 2, then description, then toggle. Also matched RN's arrow color and 2-line name clamp..toString()value formatting; objects/arrays now serialize to compact JSON (values pinned right, 2-line clamp), and added RN-style curated subsections (Profile ID, Traits (N), Audiences (N) with API badge, Full JSON).Deviation worth flagging
A pure RN-curated profile layout is not viable on native: the checked-in cross-platform UI test contract (
PreviewPanelTests.kt→testShowsAllExpectedProfileKeys,testShowsLocationData) requires every top-level profile key to be individually addressable asprofile-item-<key>, andAGENTS.mdrequires Android to stay aligned with iOS. iOS keeps the flat per-key rows and adds curated sections below, so this PR mirrors iOS: flat rows retained (now cleanly formatted) plus the organized sections. All UI-test semantics (audience-expand-<id>,profile-item-<key>,no-profile-data,reset-all-overrides) are preserved.Validation
:ContentfulOptimization:compileDebugKotlin→ BUILD SUCCESSFUL, no new warnings in the edited files.Follow-up
The DebugSection "Refresh" button has the same left-justified pattern as fix 1 but was left untouched (not in scope; structurally placed differently than RN's footer Refresh).
🤖 Generated with Claude Code