FlashList Android crash with Fabric + Edge-to-Edge during rapid data reordering

[Jianlong-Nie]

We are experiencing a reproducible Android crash when using FlashList with the New Architecture (Fabric enabled) under rapid data reordering while scrolling.

This issue occurs when the user pins or unpins a post and then quickly scrolls the list.

The crash happens on the UI thread during view traversal, with the following exception:

IllegalStateException: EdgeToEdgeReactViewGroup contains null child at index X
when traversal in dispatchGetDisplayList, the view may have been removed.

This issue only occurs on Android, only with Fabric enabled

Environment
• Library: "@shopify/flash-list": "2.2.0",
• Platform: Android
• Architecture: New Architecture (Fabric enabled)
• Edge-to-Edge: Enabled
• React Native: 0.81.4 /~54.0.31 (Fabric ON)
• Reanimated: 4.1.3
• Gesture Handler: ~2.28.0

import { FlashList, FlashListProps, FlashListRef } from "@shopify/flash-list"
import React, { memo, ReactElement, RefObject, useMemo } from "react"
import { type ViewToken } from "react-native"
import Animated, { AnimatedProps } from "react-native-reanimated"

import { RefreshComponent } from "src/components/atoms/feed/RefreshComponent"
import { usePagerContext } from "src/components/profile/tab-view/PagerContext"
import { useRefresh } from "src/hooks/app/useRefresh"
import { useFindScrollViewTag } from "src/hooks/scroll/useFindScrollViewTag"

type PagerFlashListProps<T> = Omit<
  FlashListProps<T>,
  | "onMomentumScrollBegin" // Use ScrollContext instead.
  | "onMomentumScrollEnd" // Use ScrollContext instead.
  | "onScroll" // Use ScrollContext instead.
  | "onScrollBeginDrag" // Use ScrollContext instead.
  | "onScrollEndDrag" // Use ScrollContext instead.
  | "refreshControl" // Pass refreshing and/or onRefresh instead.
  | "contentOffset" // Pass headerOffset instead.
  | "progressViewOffset" // Can't be an animated value
  | "onRefresh"
  | "refreshing"
> & {
  readonly onRefresh?: () => Promise<unknown>
  readonly onItemSeen?: (item: T) => void
  readonly progressViewOffset?: number
}

const AnimatedFlashList = Animated.createAnimatedComponent(FlashList) as <T>(
  props: AnimatedProps<
    FlashListProps<T> & {
      ref?: React.Ref<FlashListRef<T>> | undefined
    }
  >
) => ReactElement

const PagerFlashList_Unmemo = <T,>({
  onRefresh: _onRefresh,
  onItemSeen,
  style,
  progressViewOffset,
  automaticallyAdjustsScrollIndicatorInsets = false,
  ...props
}: PagerFlashListProps<T>) => {
  const {
    scrollHandler,
    isFocused,
    setScrollViewTag,
    scrollElRef: ref,
    headerHeight: headerOffset
  } = usePagerContext()

  useFindScrollViewTag({
    isFocused,
    scrollRef: ref,
    setScrollViewTag
  })

  const [onViewableItemsChanged, viewabilityConfig] = useMemo(() => {
    if (!onItemSeen) {
      return [undefined, undefined]
    }
    return [
      (info: { viewableItems: ViewToken<T>[]; changed: ViewToken<T>[] }) => {
        for (const item of info.changed) {
          if (item.isViewable) {
            onItemSeen(item.item)
          }
        }
      },
      {
        itemVisiblePercentThreshold: 40,
        minimumViewTime: 0.5e3
      }
    ]
  }, [onItemSeen])

  const { onRefresh, isRefreshing } = useRefresh({ refetch: _onRefresh })

  return (
    <AnimatedFlashList
      onViewableItemsChanged={onViewableItemsChanged}
      showsVerticalScrollIndicator={false}
      viewabilityConfig={viewabilityConfig}
      {...props}
      automaticallyAdjustsScrollIndicatorInsets={
        automaticallyAdjustsScrollIndicatorInsets
      }
      contentContainerStyle={{
        paddingTop: headerOffset,
        paddingBottom: headerOffset * 1.5
      }}
      maintainVisibleContentPosition={{ disabled: true }}
      onScroll={scrollHandler}
      ref={ref as RefObject<FlashListRef<T> | null> | undefined}
      refreshControl={
        _onRefresh ? (
          <RefreshComponent
            onRefresh={onRefresh}
            progressViewOffset={progressViewOffset ?? headerOffset}
            refreshing={isRefreshing}
          />
        ) : undefined
      }
      scrollEventThrottle={isFocused ? 16 : undefined}
      scrollsToTop
      style={style}
    />
  )
}

export const PagerFlashList = memo(
  PagerFlashList_Unmemo
) as typeof PagerFlashList_Unmemo

[FabioRocha462]

I'm also facing this problem, I'd like to know how to solve it.

[aviR98]

Please Give a WorkAround for this if you have found It would be helpful @Jianlong-Nie

[aaronabf]

Same here.

[naqvitalha]

@android-agent Can you look into this issue?

[github-actions]

Claude finished @naqvitalha's task in 7m 24s —— View job

---

Investigation: Android crash with Fabric + Edge-to-Edge during rapid data reordering

• Analyze the crash and understand the root cause
• Explore relevant Android native code in FlashList and React Native
• Identify the root cause and potential mitigations
• Write up findings

---

Root Cause Analysis

This is a React Native Fabric bug, not a FlashList bug. The crash originates in EdgeToEdgeReactViewGroup (a React Native internal class introduced with edge-to-edge display support in RN 0.77+), which encounters null children during native view traversal (dispatchGetDisplayList).

What happens:

1. Data reorders (pin/unpin) → FlashList's RenderStackManager.sync() recycles and reassigns React keys for the affected indices
2. React reconciles the new render tree → native view mutations (add/remove children) are queued for the UI thread
3. User scrolls rapidly → more render cycles fire in quick succession, each potentially modifying the container's children
4. Android draws → EdgeToEdgeReactViewGroup.dispatchGetDisplayList() iterates children for hardware-accelerated rendering
5. Race condition → A child is removed between the getChildCount() check and getChildAt(i) call, returning null

The standard ReactViewGroup (used without edge-to-edge) handles this more gracefully through its dispatchDraw override (which catches NullPointerException). The EdgeToEdgeReactViewGroup added in newer RN versions for edge-to-edge insets does not have equivalent null safety in its draw path.

Why FlashList triggers this more than FlatList:

FlashList aggressively recycles and reuses component keys (src/recyclerview/RenderStackManager.ts). During data reordering combined with scrolling, this causes more frequent native view add/remove operations on the container ViewGroup compared to FlatList, which widens the timing window for the race condition.

Key code path in FlashList:

• RenderStackManager.sync() (lines 56-125) — recycles keys when stableIds at indices change during reordering
• RenderStackManager.cleanup() (lines 139-198) — deletes keys from the keyMap entirely, causing React to unmount components and remove native views from the parent EdgeToEdgeReactViewGroup
• ViewHolderCollection.tsx (lines 174-212) — renders children keyed by reactKey, so key changes trigger native view mutations

Workarounds

1. Disable edge-to-edge display (most reliable):

# android/gradle.properties
edgeToEdgeEnabled=false

2. Provide a keyExtractor (reduces view churn during reordering):

<FlashList
  keyExtractor={(item) => item.id}
  // ...
/>

Without keyExtractor, FlashList falls back to using the array index as the stable ID (src/recyclerview/RecyclerViewManager.ts:354-358). During data reordering, this means every visible item's stableId changes at its index, causing maximum key recycling and native view mutations. With a proper keyExtractor, FlashList's stableIdMap correctly tracks items across position changes, reusing the same React key for moved items and minimizing native view add/remove operations.

3. Debounce or batch data changes before allowing scroll:
If the app can delay scrolling until the data reorder settles, the race window is reduced.

Upstream Fix Needed

The fix should be in React Native's EdgeToEdgeReactViewGroup. The class needs null safety during child traversal in dispatchGetDisplayList, similar to how the parent ReactViewGroup already catches NullPointerException in dispatchDraw (ReactViewGroup.java:987). I'd recommend filing this upstream at facebook/react-native.

FlashList-Side Mitigation (Possible Future Work)

FlashList could potentially reduce the frequency of this crash by:

• Keeping recycled items rendered off-screen instead of fully removing them from the tree (avoiding native removeView calls)
• Adding a short stabilization delay before processing render stack changes after a data reorder

However, these would add complexity and memory overhead. Given this is fundamentally an RN bug, the primary fix should come upstream.

---

[naqvitalha]

@Jianlong-Nie This looks like an issue upstream. I don't see how we can handle this in FlashList. Do you think you can file this upstream?

[Jianlong-Nie]

Filed upstream at facebook/react-native: facebook/react-native#56303

Related Jira: https://getpasses.atlassian.net/browse/ENG-11461