Check if component is in View - react-native

Question

I have components like below
<Animated.ScrollView
onScroll = {Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollY } } }],
{ useNativeDriver: true, listener: (event) => handleScroll(event) }
)}
scrollEventThrottle = {16}
alwaysBounceHorizontal = {false}
alwaysBounceVertical = {false}
bounces = {false}>
<View style = {{height:100}}><Text>One</Text></View>
<View style = {{height:100}}><Text>Two</Text></View>
<View style = {{height:100}}><Text>Three</Text></View>
<Animated.ScrollView>
I am able to get get Scroll Y position using
const scrollY = new Animated.Value(0);
Now how do I get the positions of view so I can get that values to compute and add animations to it.
For example, when I scroll down and if View - Three becomes completely visible inside the viewport, I need to change some styles to it. And remove the styles if its going away from the viewport... How do I do it?

Answer 1

I think there is a good way.
Because your list is variable, use FlatList to render your elements, and use onViewableItemsChanged to detect wich have changed.
In this example i animate the opacity of views
Init
// fetch api => response
let animatedValues = []
response.forEach(element => {
animatedValues.push(new Animated.Value(0))
})
Handle
const handleViewsChange = (event) => {
let animations = []
event.changed.forEach(view => {
animations.push(
Animated.timing(animatedValues[view.index], {
toValue: view.isViewable ? 1 : 0,
duration: 300,
useNativeDriver: true
})
)
})
Animated.parallel(animations).start()
}
Your list
<Flatlist
data={response}
renderItem={(item, index) => {
return(
<Animated.View key={index} style={{height:100, opacity: animatedValues[index]}}><Text>{item.thing}</Text></Animated.View>
)
}}
keyExtractor={(item, index) => index.toString()}
onViewableItemsChanged={event => handleViewsChange(event)}
/>
You will surely have to adapt for your use