[RN 0.81][Testing] Only first 10 items are rendered in snapshots

[vicprz]

Description

Since updating to Expo SDK 54 / React Native 0.81, only the first 10 items of the list are rendered in tests.
I tried upgrading to the latest FlashList 2.1.0, but it didn’t make any difference.

Before the update, I was using FlashList 2.0.3 with Expo SDK 53 / React Native 0.79, and all items were correctly rendered in tests.

Current behavior

Only the first 10 items of the list are rendered in tests.

Expected behavior

All items of the list should be rendered in tests, as was the case before the update.

Reproduction

Expo Snack or minimal reproduction link:

https://github.com/vicprz/expo-54-test-issue/tree/flashlist-issue
You can check __snapshots__/App.test.tsx.snap: only items 0 to 9 are rendered, while items 10 to 99 are missing.

Platform

• iOS
• Android
• Web (if applicable)
• Tests

Environment

React Native info output:

System:
  OS: macOS 26.0.1
  CPU: (11) arm64 Apple M3 Pro
  Memory: 596.30 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.8.0
    path: /Users/victor/.local/state/fnm_multishells/3689_1761034574746/bin/node
  Yarn:
    version: 4.10.3
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.6.0
    path: /Users/victor/.local/state/fnm_multishells/3689_1761034574746/bin/npm
  Watchman:
    version: 2025.09.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/victor/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.27812.49.2514.14217341
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /Users/victor/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: ^20.0.2
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

FlashList version: 2.1.0

Other relevant versions:

• react: v19.1.0
• react-native: v0.81.4
• @testing-library/react-native: 13.3.3
• jest: 29.7.0
• jest-expo: 54.0.12

Additional context

Checklist

• I've searched existing issues and couldn't find a duplicate
• I've provided a minimal reproduction (Expo Snack preferred)
• I'm using the latest version of @shopify/flash-list
• I've included all required information above

[naqvitalha]

@agent This is likely due to jest mocks. Can you provide suggestions?

[github-actions]

Claude finished @naqvitalha's task in 2m 22s —— View job

---

Suggestions for Jest Snapshot Rendering

• Analyze FlashList's jest setup and mocks
• Investigate the 10-item rendering limit
• Provide suggestions

---

This is expected behavior — FlashList renders items based on viewport size, not the full data array. In tests, measurement functions are mocked with fixed dimensions, which limits how many items fit on screen.

Why Only 10 Items?

FlashList uses viewport-based rendering. In a jest environment, the layout measurement functions need to be mocked since there's no native layout engine. FlashList's own test setup (jestSetup.js) mocks a container of 400×900px with items of 100×100px:

• 900px height ÷ 100px per item ≈ 9 visible items
• Plus the default drawDistance of 250px adds ~2-3 more buffer items
• Progressive rendering batches control how many get rendered initially

This is fundamentally different from FlatList, which renders based on initialNumToRender (default 10) and windowSize — and whose jest mock may render everything.

Suggested Fix for Users

Users need to mock FlashList's measurement utilities in their jest setup. Add this to your jest setup file:

// jest.setup.js
jest.mock("@shopify/flash-list/dist/recyclerview/utils/measureLayout", () => {
  const originalModule = jest.requireActual(
    "@shopify/flash-list/dist/recyclerview/utils/measureLayout"
  );
  return {
    ...originalModule,
    measureParentSize: jest.fn().mockImplementation(() => ({
      x: 0,
      y: 0,
      width: 400,
      height: 900,  // increase this for more items
    })),
    measureFirstChildLayout: jest.fn().mockImplementation(() => ({
      x: 0,
      y: 0,
      width: 400,
      height: 900,
    })),
    measureItemLayout: jest.fn().mockImplementation(() => ({
      x: 0,
      y: 0,
      width: 100,
      height: 100,
    })),
  };
});

To render all items, either:

1. Increase the mocked container height to fit all items (e.g., for 100 items at 100px each, set height to 10000)
2. Set a large drawDistance on your FlashList in tests: <FlashList drawDistance={99999} ... />

Why This Changed with RN 0.81

This is likely related to how measurement/layout callbacks are triggered in RN 0.81. The timing or behavior of native layout events may have changed, affecting when FlashList receives dimensions in the test environment. With the explicit mock above, layout dimensions are deterministic regardless of RN version.

Documentation Gap

This mock setup isn't currently documented for end users. @naqvitalha — would it be worth adding a Testing section to the README or docs with the mock setup above? Happy to open a PR for that if desired.

---

[vicprz]

Hello! Just tested the suggested Claude fix from the last comment, and it works for me 🚀

Thanks!