Pin screenshot dimensions to fixed dp size#48
Draft
EmilioBejasa wants to merge 6 commits intomainfrom
Draft
Conversation
1569344 to
2d1b985
Compare
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Previously screenshots captured the full screen height (minus system bars), leaving components as small cards surrounded by whitespace. StoryRenderer now wraps story content in an inner View with an onLayout callback that reports the rendered height (in dp) to StorybookRegistry. The Android test polls for this value and crops the bitmap to that height, producing tight screenshots around each component. Changes: - StoryRenderer: add storyContent wrapper with onLayout; change container to top-align (flex-start) instead of centering - StorybookRegistry: add setContentHeight() ReactMethod plus getContentHeightDp() and resetContentHeight() static helpers - BaseStoryScreenshotTest: poll for content height before taking the screenshot; crop bitmap to reported height with fallback to full content area if height is not reported in time - ScreenshotTest: apply the same system bar cropping approach to the manual testActualApp test Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Two issues prevented component-height cropping from working in CI: 1. Timeout too short: On the API 33 eaase cloud emulator, React Native takes more than 5s to render each story after activity startup. Increased DEFAULT_LOAD_TIMEOUT_MS from 5s to 10s to give more room. 2. Error stories blocked for full timeout: Stories that fail to render (story not found) never called setContentHeight, so the poll always ran for the full 5s. Added a useEffect that calls setContentHeight(0) on error so the poll unblocks immediately and uses the full-window fallback (correct behavior for error states). Also added height > 0 guard in onLayout to prevent a premature poll exit if the storyContent view is ever laid out at zero height. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- storyContent width changed from 100% to 360dp so Yoga lays out at a consistent width regardless of emulator screen size - Kotlin crop now uses getScreenshotWidthDp() (default 360) instead of fullBitmap.width, ensuring screenshots are never wider than expected - Height fallback when JS does not report content height now uses getScreenshotHeightDp() (default 640) instead of fullContentHeight (full screen), preventing over-tall screenshots on timeout or flex:1 - Both dimensions are overridable via the new open functions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
6538906 to
0370981
Compare
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
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
ViewHelpers.setupView()to layout the content view at a fixed 360x640dp before snapping screenshotsandroid.R.id.contentinstead ofdecorView.rootViewto exclude status/navigation barsgetScreenshotWidthDp()andgetScreenshotHeightDp()Test plan
🤖 Generated with Claude Code