[Bug]: BottomSheetFlatList items not scroll with bottomSheetView v5.1.4

[Ankitinara]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

When I try to scroll through a list inside a BottomSheetFlatList (wrapped within a BottomSheetView), the list does not scroll — the content remains static.

However, when I downgrade the library version to 4.6.4, the scrolling works as expected. This issue only occurs in newer versions of the @gorhom/bottom-sheet package.

Reproduction steps

• Wraps everything in a BottomSheetModalProvider

Uses a BottomSheetModal

Contains a BottomSheetView

Inside that view is a BottomSheetFlatList that fails to scroll in versions after 4.6.4, but works fine in 4.6.4.

i Atttached the image in this list not scroll.

Reproduction sample

https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetflatlist

Relevant log output

[Ankitinara]

When I add this item to the bottom sheet list, the list does not scroll; only the visible items are displayed.

[NikhilCodeblaze]

Same issue happened with me , scroll was working perfectly fine with 4.6.4 but not with ^5 @gorhom

[bledar]

I am having the same problem.

[riley-wv]

I am having the same problem here

[Selsinee]

The same problem happened with BottomSheetScrollView too, but it works when i set the height of the style props of the BottomSheetScrollView to 0

[bledar]

I was able to make it work by making following changes:

• Downgrading to version ^5.2.0
• Disabling dynamic sizing enableDynamicSizing={false}
• Removing maxDynamicContentSize prop
• Using Flatlist with scrollComponent from useBottomSheetScrollableCreator hook.

Example:

const BottomSheetListScrollable = useBottomSheetScrollableCreator();


<BottomSheet
  ref={bottomSheetRef}
  enablePanDownToClose
  enableDynamicSizing={false}
  enableOverDrag
  index={-1}
  backdropComponent={BottomSheetBackdrop}
>
  <BottomSheetView>
    <FlatList
      renderItem={renderItem}
      contentContainerStyle={styles.optionsContainer}
      data={renderedOptions}
      renderScrollComponent={BottomSheetListScrollable}
    />
  </BottomSheetView>
</BottomSheet>

[hlspablo]

I tried everything, I can't make anything to scroll inside a BottomSheet

[Ankitinara]

When I remove the bottomSheetView in BottomsheetFlatlist, the scroll works. However, when I add the bottomSheetView, the scroll does not function. (in v5.1.4)

[NikhilCodeblaze]

<BottomSheetFlatList
       data={filteredData}
       ref={flatListRef}
       keyExtractor={(item, index) => index.toString()}
       renderItem={renderItem}
       showsVerticalScrollIndicator={false}
       getItemLayout={(data, index) => ({
         length: 50, // Match item height
         offset: 50 * index,
         index,
       })}
       onScrollToIndexFailed={onScrollToIndexFailed}
       onLayout={() => {
         if (!flatListRef.current || !defaultSelected) return;

         const index = filteredData.findIndex(
           item =>
             (typeof item === 'object' ? item.value : item) ===
             defaultSelected,
         );

         if (index !== -1) {
           flatListRef.current.scrollToIndex({
             index,
             animated: true,
             viewPosition: 0.5,
           });
         }
       }}
     />

i have this code in which scrollToIndex stopped working after upgrading to 5.2.6 from 4.6.4

[dankeykang674]

I'm also having this same problem with the BottomSheetModal. The contents of the BottomSheetFlatList will not scroll when wrapped inside of a BottomSheetView component.

<BottomSheetModal>
  <BottomSheetView>
    <BottomSheetFlatList>
      {...props}
    </BottomSheetFlatList>
  </BottomSheetView>
</BottomSheetModal>

[NikhilCodeblaze]

<BottomSheetFlatList
       data={filteredData}
       ref={flatListRef}
       keyExtractor={(item, index) => index.toString()}
       renderItem={renderItem}
       showsVerticalScrollIndicator={false}
       getItemLayout={(data, index) => ({
         length: 50, // Match item height
         offset: 50 * index,
         index,
       })}
       onScrollToIndexFailed={onScrollToIndexFailed}
       onLayout={() => {
         if (!flatListRef.current || !defaultSelected) return;

         const index = filteredData.findIndex(
           item =>
             (typeof item === 'object' ? item.value : item) ===
             defaultSelected,
         );

         if (index !== -1) {
           flatListRef.current.scrollToIndex({
             index,
             animated: true,
             viewPosition: 0.5,
           });
         }
       }}
     />

i have this code in which scrollToIndex stopped working after upgrading to 5.2.6 from 4.6.4

@gorhom Can you help us out we kind stuck here, scrollToIndex was working very well but after upgrading its not working

[HumayounBaig]

@gorhom any update on this? kinda stuck with scrolling issue on a deployed app.

[JustynaKK]

the same thing for me, do not know how to scroll inside the bottom sheet

[devloop11]

I'm also having this same problem with the BottomSheetModal. The contents of the BottomSheetFlatList will not scroll when wrapped inside of a BottomSheetView component.

{...props}

I think it is not an issue because I have such a hierarchy and scroll works fine.

<BottomSheet>
   <BottomSheetView>
       <TouchableWithoutFeedback>
          <>
              <BottomSheetFlatList />
               ....
          <>

I believe the issue occurs when some container is added for <BottomSheetView>

This Code did not work

<BottomSheet>
   <TouchableWithoutFeedback>
      <BottomSheetView>
          <>
              <BottomSheetFlatList />
               ....
          <>

[kristian-nst]

Same :| Wondering if we have to switch to https://github.com/lodev09/react-native-true-sheet ?