Skip to content

fix(example): make web layouts resize safely and preserve list modes - #2482

Open
OskarEichler wants to merge 1 commit into
Shopify:mainfrom
OskarEichler:codex/flashlist-responsive-example-layout
Open

fix(example): make web layouts resize safely and preserve list modes#2482
OskarEichler wants to merge 1 commit into
Shopify:mainfrom
OskarEichler:codex/flashlist-responsive-example-layout

Conversation

@OskarEichler

@OskarEichler OskarEichler commented Aug 28, 2026

Copy link
Copy Markdown

Fixes

Replace module-scope window access with reactive window dimensions, remount the layout-options list when orientation changes and make mode buttons select rather than toggle. Bound ComplexMasonry pagination timers and use the exported FlashList in the web grid.

Compatibility / observable changes

Example-only changes. Importing these examples without window no longer throws; viewport changes update height. Orientation controls remount as required by FlashList. No library API change.

Verification

  • Consumer verification: the combined fixes were packaged on the unchanged npm 2.3.2 runtime baseline and checked with React Native 0.87.1 / React 19.2.3. Immutable install, lint, both Android Debug variants, both unsigned iOS Simulator variants, four Metro bundles, 13 web targets and four browser-extension builds pass. All 298 installed non-metadata package files match the reviewed artifact byte-for-byte.
  • Independent patch applied to 435b5141df4960ebbbc0b93264db3f5a4b23fffd: all 187 existing tests (14 suites), library TypeScript build and changed-file ESLint pass.
  • One-off actual-source regression diagnostics pass:
    • fixture/react-native/src/Grid renders without window and follows viewport height
    • fixture/web/Grid renders without window and follows viewport height
    • fixture/react-native/src/Masonry renders without window and follows viewport height
    • fixture/react-native/src/ComplexMasonry renders without window and follows viewport height
    • fixture/react-native/src/LayoutOptions renders without window and follows viewport height
    • fixture/react-native/src/DynamicColumnSpan renders without window and follows viewport height
    • layout options remounts when changing orientation
    • dynamic column controls select rather than toggle their mode
    • masonry pagination duplicate
    • masonry pagination unmount
  • The combined review workspace passes Android Debug, unsigned iOS Simulator Debug/Release, both production Metro bundles, web production export, Docusaurus/Jekyll builds and all 24 existing iOS Detox tests (10 suites). The contacts comparison was rerun after its final change. These combined-workspace results are not a claim that every device/platform was tested independently for this PR.
  • No checked-in tests, reference screenshots, dependency versions or native SDK versions were changed.

Reviewers’ hat-rack 🎩

  • Check the stated compatibility behavior and reproduce the relevant cases above.
  • Run the existing test/type/lint commands and exercise the affected example or list behavior on your supported device matrix.

Physical-device behavior, Android Detox, assistive-technology conformance and release signing were not verified. No app deployment is part of this PR.

Replace module-scope window access with reactive window dimensions, remount the layout-options list when orientation changes and make mode buttons select rather than toggle. Bound ComplexMasonry pagination timers and use the exported FlashList in the web grid.
@OskarEichler

Copy link
Copy Markdown
Author

I have signed the CLA!

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