React Native: How to determine if component is in the view port

Question

That's said there's a long ScrollView with lots of contents, and there's another component at the bottom of the page. I'm trying to lazy-rendering the bottom component when user scroll down enough. Is there any library has implemented this?

(I'm aware of ListView's onEndReached, but not quite sure if that helpful for this case.)

Appreciate if anyone could guide me a direction.

Answer 1

I create a simple lib for this:

https://github.com/chunghe/react-native-defer-renderer

basically you could get scroll position from the onScroll event of the ScrollView (e.nativeEvent.contentOffset), pass the scroll position to the child component. Then in the child component, you could get the distance from top from onLayout event (e.nativeEvent.layout.y). That's pretty much all the tricks.