3

I need to set the state to detect which item in the current viewport is visible. for this purpose, I write below code:

const [inViewPort, setInViewPort] = useState(0);

const viewabilityConfig = {
  viewAreaCoveragePercentThreshold: 30,
};

const onViewableItemsChanged = ({viewableItems, changed}) => {
  if (changed && changed.length > 0) {
    setInViewPort(changed[0].index);
  }
};

return (
  <SafeAreaView style={styles.container}>
    <FlatList
      data={myData}
      renderItem={renderItem}
      showsHorizontalScrollIndicator={false}
      keyExtractor={(_, index) => index.toString()}
      horizontal={true}
      onViewableItemsChanged={onViewableItemsChanged}
      viewabilityConfig={viewabilityConfig}
    />
  </SafeAreaView>
);

The onViewableItemsChanged event callback triggers correctly but after I call setInViewPort so the component updated and it rerendered the below error encounter:

Invariant Violation: Changing onViewableItemsChanged on the fly is not supported

enter image description here

Majid Lotfinia
  • 646
  • 11
  • 28
  • Does this answer your question? [FlatList ScrollView Error on any State Change - Invariant Violation: Changing onViewableItemsChanged on the fly is not supported](https://stackoverflow.com/questions/48045696/flatlist-scrollview-error-on-any-state-change-invariant-violation-changing-on) – Rafael Tavares Oct 28 '20 at 12:17

1 Answers1

6

I was looking for the same answer and there is no clear example anywhere. This is how I solved it.

const [inViewPort, setInViewPort] = useState(0)

const viewabilityConfig = useRef({
  itemVisiblePercentThreshold: 50,
  waitForInteraction: true,
  minimumViewTime: 5,
})

const onViewableItemsChanged = React.useRef(({ viewableItems, changed }) => {
  if (changed && changed.length > 0) {
    setInViewPort(changed[0].index);
  }
})

return (
  <SafeAreaView style={styles.container}>
    <FlatList
      data={myData}
      renderItem={renderItem}
      showsHorizontalScrollIndicator={false}
      keyExtractor={(_, index) => index.toString()}
      horizontal={true}
      onViewableItemsChanged={onViewableItemsChanged.current}
      viewabilityConfig={viewabilityConfig.current}
    />
  </SafeAreaView>
)
jQN
  • 459
  • 6
  • 5
  • When trying to set state using this `onViewableItemsChanged` function, it doesn't seem to work right. When I try `setArray([...array, // object ]);` it only adds one entry then doesn't add any more entries. – KylianMbappe Oct 23 '22 at 20:26