Rn-scroll-viewport-tracker NPM

Scroll Viewport Tracker

A react-native util to track elements inside a scrollable view. Uses custom state handlers to minimize re-renders, and optimizes for performance.

Works with

ScrollView
FlatList
SectionList

Installation

npm install rn-scroll-viewport-tracker

Usage

import {
  ScrollViewPortTracker,
  ScrollViewPortAwareView,
} from 'rn-scroll-viewport-tracker';

<ScrollViewPortTracker>
  <ScrollView>
    <Component1 />

    <ScrollViewPortAwareView
      name="component2"
      onEnterViewport={() => console.log('component 2 entered viewport')}
      onLeaveViewport={() => console.log('component 2 left viewport')}
    >
      <Component2 />
    </ScrollViewPortAwareView>

    <Component3 />
  </ScrollView>
</ScrollViewPortTracker>;

ScrollViewPortTracker Props

Prop Name	Type	Default	Description
minOverlapRatio	number	0.2	The minimum ratio of overlap between the viewport and the element to trigger the enter/leave events
disableTracking	boolean	false	Disables tracking of the viewport
scrollEventThrottle	number	200	Throttles the scroll events

ScrollViewPortAwareView Props

Prop Name	Type	Description
name	string	The name of the element
onEnterViewport	function	Callback when the element enters the viewport
onLeaveViewport	function	Callback when the element leaves the viewport