FlatList ScrollView Error on any State Change – Invariant Violation: Changing onViewableItemsChanged on the fly is not supported

by

Based on @woodpav comment. Using functional components and Hooks.
Assign both viewabilityConfig to a ref and onViewableItemsChanged to a useCallback to ensure the identities are stable and use those. Something like below:

  const onViewCallBack = React.useCallback((viewableItems)=> {
      console.log(viewableItems)
      // Use viewable items in state or as intended
  }, []) // any dependencies that require the function to be "redeclared"

  const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 })


<FlatList
      horizontal={true}
      onViewableItemsChanged={onViewCallBack}
      data={Object.keys(cards)}
      keyExtractor={(_, index) => index.toString()}
      viewabilityConfig={viewConfigRef.current}
      renderItem={({ item, index }) => { ... }}
/>

Leave a Comment

tech