Skip to content

Inverted FlatList inside scroll #512

Open
@yunus-atmaca

Description

@yunus-atmaca

Bug

I'm using BottomSheetFlatList with inverted prop to show user comments but BottomSheet inside scroll is not working. I mean I cannot scroll to the top. But when I remove the prop( "inverted" ), it works really well.

Environment info

Library Version
@gorhom/bottom-sheet 3
react-native 0.64.0
react-native-reanimated ^2.0.0
react-native-gesture-handler ^1.10.3

Reproducible sample code

<BottomSheet
        ref={bottomSheetRef}
        index={1}
        backgroundComponent={backComponent}
        backdropComponent={null}
        handleComponent={null}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}>
        <View style={[styles.contentContainer,]}>
          <View style={styles.headerContainer}>
            <Text
              text={t('comment')}
              size={17}
              font={'heavy'}
            />
          </View>
          <BottomSheetFlatList
            ref={ref}
            horizontal={false}
            showsVerticalScrollIndicator={false}
            data={comments}
            inverted
            renderItem={renderMessage}
            keyExtractor={(_, i) => 'key ' + i}
          />
          <Footer
            eventId={eventId}
          />
        </View>
      </BottomSheet>

gif

any recommendation to fix the scrolling issue?

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestv4Written in Reanimated v2

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions