## FlashList v2: The List Component That Just Works FlashList was released in 2022 as a simple goal - make lists that don't glitch or show blank cells. It worked decent and grew to over 2 million monthly downloads. But the team at Shopify knew they could do better. The old version required developers to estimate item sizes, had platform-specific native code, and sometimes struggled with precision when scrolling to specific items. So when React Native introduced its New Architecture with synchronous layout measurements, they saw an opportunity to solve these problems once and for all.

![UI](https://github.com/user-attachments/assets/4610e52a-79ed-461a-8fd1-b8e8f8f0ba09) ![UI](https://github.com/user-attachments/assets/98897358-80b2-4add-9740-fa62759f4875)

## Idea React Native's New Architecture lets you measure layouts synchronously instead of waiting for async bridge calls. This means FlashList v2 can measure items, calculate perfect positions, and make corrections before anything renders on screen (useLayoutEffect). FlashList doesn't ask for any estimates anymore. The list figures out exactly what it needs and renders it perfectly, every single time.Even LegendList in it's latest beta version has made estimatedItemSize an optional prop as its using average sizes, whether you have simple text items or complex cards of different heights, FlashList handles it automatically.
![New Architecture](https://github.com/user-attachments/assets/99d04b7b-ac8e-4b45-9b28-f87bbc08eb10) ## Features Now we've pixel-perfect scrolling to any item - scrollToIndex and scrollToItem are much more precise than before. Support for complex layouts like Pinterest-style masonry grids, now with just one inline `masonry` prop, and you can even use overrideItemLayout with masonry for extra control. Horizontal lists are much improved - items can resize within the lists and FlashList no longer renders an extra item just to measure list height. Plus better memory management and faster load times. And it maintains your scroll position. Since there's no native code anymore, it works consistently across iOS, Android, and web. ## Usage To get started, we'll install the library in a brand new project ```bash npx expo install @shopify/flash-list ``` We're using Tanstack Query and will get all the items using `useFeed` hook which is internally using `useInfiniteQueries` ```ts const { items, status, refetch, isFetchingNextPage, isRefetching, hasNextPage, fetchNextPage, } = useFeed({ enabled: true, pageSize: PAGE_SIZE }) ``` We'll define our `renderItem` with different item types 1. giveaway 2. template 3. photo 4. event(default) ```ts const renderItem = useCallback(({ item }: { item: FeedItem }) => { if (item.type === 'giveaway') { return } if (item.type === 'template') { return } if (item.type === 'photo') { return } return }, []) ``` We've `getItemType` and `keyExtractor` (optional) ```ts const getItemType = useCallback((item: FeedItem) => item.type, []) const keyExtractor = useCallback((item: FeedItem) => item.id, []) ``` ```ts } /> ``` To refetch the data when we are halfway through we will introduce onEndReached that will fetchNextPage when we have more data available ```ts const onEndReached = useCallback(() => { if (hasNextPage && !isFetchingNextPage) { fetchNextPage() } }, [hasNextPage, isFetchingNextPage, fetchNextPage]) ``` ## Conclusion FlashList v2 sets a new standard for list rendering in React Native—solving a challenge that developers have faced for years. From buttery-smooth scrolling and masonry grid layouts to optimized memory usage and cross-platform consistency, it delivers performance and flexibility where it matters most. These improvements highlight the strength of the new architecture and the thoughtful work of the team behind it. Since most apps rely heavily on lists, trying out FlashList v2 is a decent choice.

Liquid Glass in React Native

FlashList v2