Scroll content inside @gorhom/bottom-sheet - React Native

Question

I am trying to implement a Comments Section inside a Bottom Sheet (@gorhom/bottom-sheet). The problem I am facing is that when I try to scroll the content (comments), it doesn't work, and instead the bottom sheet collapses.

Here is what I tried :

      <BottomSheet
        ref={bottomSheetRef}
        index={0}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}
      >
        <View style={styles.contentContainer}>
          <Text>{comments} Comments</Text>
          <Comments />
        </View>
      </BottomSheet>

Answer 1

Instead of View please use BottomSheetScrollView from @gorhom/bottom-sheet or use ScrollView from react-native-gesture-handler.

<BottomSheet
    ref={bottomSheetRef}
    index={0}
    snapPoints={snapPoints}
    onChange={handleSheetChanges}
  >
    <BottomSheetScrollView style={styles.contentContainer}>
      <Text>{comments} Comments</Text>
      <Comments />
    </BottomSheetScrollView>
  </BottomSheet>

Answer 2

Use BottomSheetScrollView instead of BottomSheet

https://gorhom.github.io/react-native-bottom-sheet/components/bottomsheetscrollview

Answer 3

In order to make your View scrollable, you need to use a ScrollView component. However, it will be needed to import it from 'react-native-gesture-handler' instead of the 'react-native' one.

You can get more information in this GitHub discussion.