[Bug]: BottomSheetFlashList with enableDynamicSizing causes "Maximum call stack size exceeded" with 100+ items

[Acetyld]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

When using BottomSheetModal with BottomSheetFlashList and enableDynamicSizing={true}, the app crashes with a "Maximum call stack size exceeded" error when the list contains 100 or more items.

The app crashes immediately when opening the bottom sheet with 100+ items. The error occurs only when enableDynamicSizing={true} is set. Works perfectly with 99 or fewer items. The bottom sheet should open normally regardless of item count when dynamic sizing is enabled.

The issue can be resolved by disabling dynamic sizing and using explicit snap points:

const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
<BottomSheetModal snapPoints={snapPoints} enableDynamicSizing={false} />

Reproduction steps

• Clone reproduction repository: https://github.com/Acetyld/bottomsheet-flashlist-maximum-update
• Install dependencies: yarn
• Prebuild native code: yarn expo prebuild
• Run on device: yarn ios or yarn android
• Tap "Open Modal with 200 Items" button
• App crashes with maximum call stack error

Reproduction sample

https://snack.expo.dev/@vitrionbv/bottom-sheet---issue-reproduction-template

Relevant log output

ERROR  Warning: Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

This error is located at:

  13 | export default function App() {
  14 |   // ref
> 15 |   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
     |                                     ^
  16 |
  17 |   // variables
  18 |   const data = useMemo(

Call Stack
  App (App.tsx:15:37)

[Acetyld]

Only happens on V5, not happening on V4

[JJSLIoT]

+1 I got the same issue. It seems like Flashlist is broken in the latest version of bottom sheet: v5.1.6. Downgrading to v5.1.4 resolved the issue for me. Hoping to see a fix soon.

[delphinebugner]

+1 as well, will try the downgrade

[delphinebugner]

The downgrade did not fix the issue on my side - tried 5.1.4 and 5.1.5 ; maybe because I'm using FlashList RC 2.0.0-rc.4?

But I confirm slicing my items to have max. 99 fix it 😅

[JJSLIoT]

@delphinebugner JFYI: I am using Flashlist "2.0.0-rc.9" and my flashlist has around 150 items

[delphinebugner]

@JJSLIoT I upgraded to 2.0.0-rc.9 and I could not scroll anymore in the list, even with less than 100 items 😢

Should we open an issue on FlashList repository as well ? they seem in active development for their RC, they might want to look to this - and issue could also be on their side

[delphinebugner]

Update again: the scroll issue wasn't introduced in 2.0.0-rc.9, I had it already in rc4 after re-testing it (only when items are not fetched but already in TKQuery cache) I have an other issue with the ListHeaderComponent not staying sticky, so I'm just going to not use the BottomFlashList for now and stick to the FlatList!

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.