rn-intersection-observer v0.3.0

react-native-intersection-observer

react-native-intersection-observer is a React Native implementation of Intersection Observer. An easier way to detect "View" exposure in complex application.

English | 中文

Installation

npm install rn-intersection-observer

Usage

Target view

import { IntersectionObserverView } from 'rn-intersection-observer';

// ...

<IntersectionObserverView
    scope="YourOwnScope"
    thresholds={[0.8]}
    onIntersectionChange={onTagIntersectionChange}
>
 {/* your own view */}
</IntersectionObserverView>

Trigger detection from React Native

import { IntersectionObserver } from 'rn-intersection-observer';

// ...

const onScroll = useCallback(
    (event) => {
        IntersectionObserver.emitEvent('YourOwnScope');
    },
    [],
);

return (
    <ScrollView onScroll={onScroll}>
        {/* Scroll view contains IntersectionObserverView */}
    </ScrollView>
);

Trigger detection from Native (Android example)

getReactApplicationContext()
  .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
  .emit("IntersectionObeserverEvent", { scope: 'YourOwnScope' });

Props & Params

1) IntersectionObserver / IntersectionObserverView

2) Intersection Callback (onIntersectionChange)

Callback parameters contained info of each target which triggered intersection callback：

PS：Different from IntersectionObserver, IntersectionObserverView provides single parameter.

License

MIT