Inverted FlatList inside scroll

Author: yunus-atmacaCreated Jun 29, 2021Updated Sep 1, 2026

Labelsenhancementv4

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?

Source: gorhom/react-native-bottom-sheet

View original on GitHub View discussion on GitHub