Skip to content

Pin screenshot dimensions to fixed dp size#48

Draft
EmilioBejasa wants to merge 6 commits intomainfrom
fix/pin-screenshot-dimensions
Draft

Pin screenshot dimensions to fixed dp size#48
EmilioBejasa wants to merge 6 commits intomainfrom
fix/pin-screenshot-dimensions

Conversation

@EmilioBejasa
Copy link
Copy Markdown
Collaborator

Summary

  • Uses ViewHelpers.setupView() to layout the content view at a fixed 360x640dp before snapping screenshots
  • Snaps android.R.id.content instead of decorView.rootView to exclude status/navigation bars
  • Both dimensions are overridable via getScreenshotWidthDp() and getScreenshotHeightDp()
  • Fixes Screenshotbot showing dimension mismatches between CI runs due to varying emulator screen sizes

Test plan

  • CI screenshot tests pass (draft PR to verify)
  • Screenshotbot shows consistent dimensions across runs

🤖 Generated with Claude Code

@EmilioBejasa EmilioBejasa force-pushed the fix/pin-screenshot-dimensions branch from 1569344 to 2d1b985 Compare February 24, 2026 19:34
EmilioBejasa and others added 6 commits February 25, 2026 12:43
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>
@EmilioBejasa EmilioBejasa force-pushed the fix/pin-screenshot-dimensions branch from 6538906 to 0370981 Compare February 26, 2026 17:03
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