rn-intersection-observer
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

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

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).

2) Intersection Callback (onIntersectionChange)

Callback parameters contained 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.

License

MIT

Package Sidebar

Install

npm i rn-intersection-observer

Weekly Downloads

88

Version

0.3.0

License

MIT

Unpacked Size

85.5 kB

Total Files

28

Last publish

Collaborators

  • gtbl2012