FlashList v2

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.

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.

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

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

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)

const renderItem = useCallback(({ item }: { item: FeedItem }) => {
  if (item.type === 'giveaway') {
    return <GiveawayCard item={item} />
  }
  if (item.type === 'template') {
    return <TemplateCard item={item} />
  }
  if (item.type === 'photo') {
    return <PhotoCard item={item} />
  }
  return <EventCard event={item} />
}, [])

We’ve getItemType and keyExtractor (optional)

const getItemType = useCallback((item: FeedItem) => item.type, [])
const keyExtractor = useCallback((item: FeedItem) => item.id, [])

<FlashList
  data={items}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  getItemType={getItemType}
  showsVerticalScrollIndicator={false}
  onEndReachedThreshold={0.5}
  ListFooterComponent={ListFooterComponent}
  refreshControl={
    <RefreshControl
      onRefresh={refetch}
      refreshing={isRefetching}
      colors={[COLORS.PRIMARY]}
      tintColor={COLORS.PRIMARY}
    />
  }
/>

To refetch the data when we are halfway through we will introduce onEndReached that will fetchNextPage when we have more data available

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.