Cannot scroll when using flashlist with BottomSheetModal

See original GitHub issue

Bug

Hello,

I can not scroll when using flashlist with BottomSheetModal

Environment info

Library Version
@gorhom/bottom-sheet 4.4.0
expo 46.0.0
react-native-reanimated 2.9.1
react-native-gesture-handler 2.5.0

Steps To Reproduce

Reproducible sample code

const ModalAll = forwardRef<BottomSheetModal, IModalAll>(({ shop_id }, ref) => {
  const snapPoints = useMemo(() => ['25%', 395], []);

  const renderItem: ListRenderItem<IAllData & { user: CurrentUser }> = ({ item }) => {
    return (
      <Pressable style={s.btn}>
        <Image 
          source={{uri: 'https://picsum.photos/55/55'}}
          resizeMode='contain'
          style={s.firstImage}
        />
      </Pressable>
    )
  }
  return (
    <BottomSheetModal
      ref={ref}         
      index={1}
      snapPoints={snapPoints}
      handleIndicatorStyle={s.handleStyle}
      backdropComponent={BottomSheetBackdrop}
    >
      <FlashList
        data={mockAll}
        keyExtractor={(item, i) => i.toString()}
        estimatedItemSize={175}
        // @ts-ignore
        renderItem={renderItem}
        ListHeaderComponent={<Header />}
      />
    </BottomSheetModal>
  )
});

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:3
  • Comments:7

github_iconTop GitHub Comments

1reaction
crockaletcommented, Oct 15, 2022

Works with enableContentPanningGesture disabled, not ideal but seems to be the best solution for now

1reaction
ser-emejiacommented, Oct 5, 2022

@r3nya Hi, Could you share an example? please.

Works good on iOS but not on Android

Read more comments on GitHub >

github_iconTop Results From Across the Web

react native - FlatList not working inside BottomSheet on Android
The issue I am facing: I have a FlatList inside a BottomSheet , I am able to scroll in FlaLlist on ios but...
Read more >
Troubleshooting | React Native Bottom Sheet - GitHub Pages
This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Native Bottom Sheet.
Read more >
react-native-scroll-bottom-sheet - npm
Cross platform scrollable bottom sheet with virtualization support, ... Start using react-native-scroll-bottom-sheet in your project by ...
Read more >
react-native-bottom-sheet - bytemeta
Bottom sheet integrated management through SheetManager. only1chi ... Cannot scroll when using flashlist with BottomSheetModal. dNadiia.
Read more >
How to create bottom sheet / modal like this one? (read first ...
Just one thing with this one, you can only dismiss it from the header and above, meaning that you can't use the scroll...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found