List scrollEnabled prop update via state at onChange callback

Bug

When I just console.log() the index at onChange callback, the index comes immediately after moving out my finger from the bottom sheet, which is good. But despite of logging the index I want to setState scrollEnabled prop to toggle when I can scroll my VirtualizedList (https://reactnative.dev/docs/virtualizedlist). onChange callback works with a small pause which is not UX I think.

Environment info

Library	Version
@gorhom/bottom-sheet	^3.6.5
react-native	~0.63.4
react-native-reanimated	~2.1.0
react-native-gesture-handler	~1.10.2

Steps To Reproduce

Open bottom sheet to the last snap point index, wait a little bit after list scroll will be enabled, after that scroll the list to top and wait a little bit to close the bottom sheet.

Describe what you expected to happen:

1. onChange callback work speed same as without updating the state.

Reproducible sample code

I have 3 snap points and when the bottom sheet is at the third snap point I want to enable to scroll the VirtualizedList

const bottomSheetRef = useRef(null);
const [scrollEnabled, setScrollEnabled] = useState(false);

const handleSheetChanges = useCallback(
  (index) => {
    console.log("handleSheetChanges", index);
    if (index === 2) {
      setScrollEnabled(true);
    } else {
      setScrollEnabled(false);
    }
  },
  [scrollEnabled]
)

const renderContent = useCallback(
  () => (
    <View style={styles.overlayContainer}>
      <VirtualizedList
        data={listData}
        scrollEnabled={scrollEnabled}
        onScroll={onScroll}
        renderItem={renderItem}
        {...someOtherPropsForListConfig}
      />
    </View>
  ),
  [isLoading, scrollEnabled]
)

// Also here when list is scrolled to top I want to change bottom sheet's active snap point to it's initial index and again disable to scroll
const onScroll = (event) => {
  const currentOffset = event.nativeEvent.contentOffset.y;
  if (currentOffset === 0) {
    setScrollEnabled(false);
    bottomSheetRef.current.snapTo(0);
  }
}

return (
  <BottomSheet
    key="my_unique_key_for_bottom_sheet"
    ref={bottomSheetRef}
    index={0}
    snapPoints={snapPoints}
    onChange={handleSheetChanges}
    handleComponent={null}
    overDragResistanceFactor={0}
    enableOverDrag={false}
  >
    {renderContent()}
  </BottomSheet>
)

Maybe there is some ref on how I can detect when the bottom sheet is opened or not and I will avoid using useState() inside onChange callback?

[vonovak]

@alexandermirzoyan the stackoverflow answer is misleading at best. The given recommendation to use flatlist for small amounts of data and virtualizedList for large amounts of data is incorrect. Please check the sources: you will see FlatList is just a simple component built on top of VirtualizedList: https://github.com/facebook/react-native/blob/eaed48fc7d1a8b267e16cebfa14c8953356d2a7c/Libraries/Lists/FlatList.js#L616

And also if you compare the number of properties of FlatList and VirtualizedList. The second one wins

Comparing component performace based on the number of props it receives is, well, also very misleading. If you really want to compare performance, I suggest you do some measurements 😃

[alexandermirzoyan]

it’s suggested to use VirtualizedList for large datas. And also if you compare the number of properties of FlatList and VirtualizedList. The second one wins )))

https://stackoverflow.com/questions/50920628/difference-between-flatlist-and-virtualizedlist