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

Question

onViewableItemsChanged does not seem to work when there is a state change in the app. Is this correct?

Seems like it wouldn\'t be very useful if this

Answer 1

Based on @woodpav comment. Using functional components and Hooks. Assign both viewabilityConfig and onViewableItemsChanged to refs and use those. Something like below:

  const onViewRef = React.useRef((viewableItems)=> {
      console.log(viewableItems)
      // Use viewable items in state or as intended
  })
  const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 })


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