react-native-intersection-observer is a React Native implementation of Intersection Observer. An easier way to detect "View" exposure in complex application.
English | 中文
npm install rn-intersection-observerThis module was developed and tested with dependencies below. May also works fine with older versions that support "measureInWindow".
React >= 16.13.1
React-native >= 0.63.4
import { IntersectionObserverView } from 'rn-intersection-observer';
// ...
<IntersectionObserverView
scope="YourOwnScope"
thresholds={[0.8]}
onIntersectionChange={onTagIntersectionChange}
>
{/* your own view */}
</IntersectionObserverView>import { IntersectionObserver } from 'rn-intersection-observer';
// ...
const onScroll = useCallback(
(event) => {
IntersectionObserver.emitEvent('YourOwnScope');
},
[],
);
return (
<ScrollView onScroll={onScroll}>
{/* Scroll view contains IntersectionObserverView */}
</ScrollView>
);getReactApplicationContext()
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("IntersectionObeserverEvent", { scope: 'YourOwnScope' });| Props | Params Type | Description |
|---|---|---|
| scope | string | Scope of the target View, required in event trigger. |
| rootMargin | {top: number, left: number, bottom: number, right: number} | Distance from screen edge of detect area. |
| thresholds | number[] | Intersection ratios which should trigger intersection callbacks. |
| throttle | number | Throttle time between each detection(ms). |
Callback parameter is an array containes info of each target which triggered intersection callback：
| Params | Params Type | Description |
|---|---|---|
| boundingClientRect | {top: number, left: number, bottom: number, right: number} | Position of target View's edge. |
| intersectionRatio | number | Intersection ratio of target View in detect area |
| intersectionRect | {top: number, left: number, bottom: number, right: number} | Position of intersection area's edge. |
| target | Ref | Ref of target View |
| isInsecting | boolean | Determine current intersection ratio is larger than any threshold. |
PS：Different from IntersectionObserver, IntersectionObserverView provides single parameter.
MIT