Keep getting "Changing onViewableItemsChanged on the fly is not supported" - reactjs

Question

In my project I have a (horizontal) FlatList that I want to trigger a function when a new page is visible. I've understood that I need to specify viewabilityConfig and onViewableItemsChanged. However, when I do I keep getting this error msg: "Changing onViewableItemsChanged on the fly is not supported".
I'm a newbie, so looking at the other posts about the same error didnt make me any smarter.
Any ideas?
const DATA = [
20201202 = {
id: "20201202",
data: day1,
},
2020120 = {
id: "2020120",
data: day2,
},
20201204 = {
id: "20201204",
data: day3,
},
]; */
const LiveScreen = (props, { navigation }) => {
const FlatListItem = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title.day}</Text>
</View>
);
// FLATLIST
const renderFlatList = ({ item }) => <FlatListItem title={item} />;
// VIEWABILITY
const viewabilityConfig = {
waitForInteraction: true,
// At least one of the viewAreaCoveragePercentThreshold or itemVisiblePercentThreshold is required.
viewAreaCoveragePercentThreshold: 95,
itemVisiblePercentThreshold: 75,
};
return (
<View style={{ flex: 1, width: "100%", backgroundColor: "#F4F5F5" }}>
<View style={{ flex: 1 }}>
<SafeAreaView>
<FlatList
horizontal
pagingEnabled
data={DATA}
renderItem={renderFlatList}
keyExtractor={(item) => item.id}
initialScrollIndex={5}
viewabilityConfig={viewabilityConfig}
onViewableItemsChanged={(viewableItems, changed) => {
console.log("Visible items are", viewableItems);
console.log("Changed in this iteration", changed);
}}
/>
</SafeAreaView>
</View>
</View>
);
};
const styles = StyleSheet.create({});
export default LiveScreen;
I have removed the excess code..
Thanks in advance

Answer 1

viewabilityConfig needs to be done in the constructor to avoid this error.
constructor (props) {
super(props)
this.viewabilityConfig = {
waitForInteraction: true,
// At least one of the viewAreaCoveragePercentThreshold or itemVisiblePercentThreshold is required.
viewAreaCoveragePercentThreshold: 95,
itemVisiblePercentThreshold: 75,
}
}
<FlatList
viewabilityConfig={this.viewabilityConfig}
...
/>
For functional components, it needs to be done with Ref hook.
const viewabilityConfig = useRef({
waitForInteraction: true,
// At least one of the viewAreaCoveragePercentThreshold or itemVisiblePercentThreshold is required.
viewAreaCoveragePercentThreshold: 95,
itemVisiblePercentThreshold: 75,
})

Answer 2

Late to the party, but the issue isn't the viewabilityConfig, it's the onViewableItemsChanged.
In a function component, you need to separate out the handler for onViewableItemsChanged and place it in a ref like so:
const handleViewableItemsChanged = useRef(({viewableItems, changed})=>{
console.log("Visible items are", viewableItems);
console.log("Changed in this iteration", changed)
});
<FlatList
...
viewabilityConfig={viewabilityConfig}
onViewableItemsChanged={handleViewableItemsChanged.current}
/>
The same effect can be done with a useCallback hook with an empty dependency array, but this way is a bit more clean.