react native - 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 were the case....

Otherwise, users will be forced to us onScroll in order to determine position or something similar...

Steps to Reproduce

1. Please refer to snack
2. Repo has also been uploaded at github
3. Any state change produces an error when using onViewableItemsChanged
4. What does this error even mean?

Note: Placing the onViewableItemsChanged function in a const outside the render method also does not assist...

<FlatList
    data={this.state.cardData}
    horizontal={true}
    pagingEnabled={true}
    showsHorizontalScrollIndicator={false}
    onViewableItemsChanged={(info) =>console.log(info)}
    viewabilityConfig={{viewAreaCoveragePercentThreshold: 50}}
    renderItem={({item}) =>
        <View style={{width: width, borderColor: 'white', borderWidth: 20,}}>
            <Text>Dogs and Cats</Text>
        </View>
    }
/>

Actual Behavior

Error

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 }) => { ... }}
/>