FlashList v2: The List Component That Just Works

Candies Ocean — Wed, 27 Aug 2025 05:22:21 +0000

This post was originally posted on Candies Ocean

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

giveaway
template
photo
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.

iOS 26 Liquid Glass in React Native

Candies Ocean — Sun, 10 Aug 2025 04:28:39 +0000

https://youtu.be/hL2iLFu1gcI?si=obfgors9eDt2dkwB iOS 26 Liquid Glass in React Native

Candies Ocean — Sun, 10 Aug 2025 04:24:38 +0000

iOS 26 Liquid Glass in React Native

Candies Ocean — Thu, 07 Aug 2025 16:58:15 +0000

DEV Community: Candies Ocean

FlashList v2: The List Component That Just Works

Idea

Features

Usage

Conclusion

iOS 26 Liquid Glass in React Native

https://youtu.be/hL2iLFu1gcI?si=obfgors9eDt2dkwB iOS 26 Liquid Glass in React Native

iOS 26 Liquid Glass in React Native