Rendering of all data when navigating with @react-navigation/stack
Description
Using @react-navigation/stack, pushing on top of a screen with FlashList makes FlashList render all list items.
Current behavior
FlashList re-renders all of its ListItems, even those that aren't in the viewport.
https://github.com/user-attachments/assets/ce1c658d-a1a7-48e9-ba09-c276cec17d14
Expected behavior
No additional renders should happen.
Reproduction
Expo Snack or minimal reproduction link:
https://snack.expo.dev/@sharabai/flashlist-renderitem-bug-with-react-stack-navigation?platform=web
Platform
- iOS
- Android
- Web (if applicable)
Environment
FlashList version: 2.3.0
Additional context
The issue is tightly linked to #1816. In the thread under that issue you can find a workaround that involves manually setting some prop in Navigator.
The core problem is that React Navigation on web makes FlashList's dimensions 0x0 when the screen is being pushed on, which makes FlashList recalculate the height of its children and because of it all sorts of problems arise.
Proposed fix that was used at https://github.com/Expensify/App as a patch is doing an early return when FlashList's size is 0x0. It makes it a lot easier to use in real-life production app without worrying about passing some props to navigation, which can influence perf negatively and you have to remember to do it each time. Working on such a huge projects, it's a lot easier to solve it at the level of FlashList itself.
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
Source: Shopify/flash-list