https://github.com/fredrikolovsson/react-native-viewability-tracking-view
A React Native View that provides similar viewability tracking as the FlatList, but better™
https://github.com/fredrikolovsson/react-native-viewability-tracking-view
react-native sensor tracking view viewability viewable visibility
Last synced: 3 months ago
JSON representation
A React Native View that provides similar viewability tracking as the FlatList, but better™
- Host: GitHub
- URL: https://github.com/fredrikolovsson/react-native-viewability-tracking-view
- Owner: fredrikolovsson
- License: mit
- Created: 2021-01-24T21:30:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-29T23:43:54.000Z (over 4 years ago)
- Last Synced: 2025-07-06T22:39:49.335Z (11 months ago)
- Topics: react-native, sensor, tracking, view, viewability, viewable, visibility
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-viewability-tracking-view
- Size: 858 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-viewability-tracking-view
> Note: This tracking uses `setInterval` and the native [`measure`](https://reactnative.dev/docs/direct-manipulation#measurecallback) method, which can affect your application's performance if used excessively
If you need to track how many times a View is visible on the screen, you can use this. It provides options for setting offsets (`offset*`), in case part of your screen is covered by fixed elements, e.g. a tab bar.
Also, you can configure what is considered enough to be "seen". By default, `onViewabilityChange` will be called when at least 50% (`itemVisiblePercentThreshold`) of the `ViewabilityTrackingView` has been rendered within the device's screen dimensions for at least 1000 ms (`minimumViewTime`).
Lastly, you can define how often the measurement is taken, which affects the accuracy of the tracking and the performance impact it has (`viewabilityMeasurementInterval`).
## Example
```tsx
import ViewabilityTrackingView, {
OnViewabilityParameters,
} from 'react-native-viewability-tracking-view'
export const MyComponent = ({
isCurrentRoute,
title,
}: {
isCurrentRoute: boolean
title: string
}) => {
const onViewabilityChange = (data: OnViewabilityParameters) => {
/* do something */
}
return (
{title}
)
}
```
## Props
```ts
export interface OnViewabilityCallbackParameters<
Item extends Record = Record
> {
isInView: boolean
item?: Item
itemVisiblePercent: number
testID?: string
timeInView?: number
timeOutOfView?: number
}
export interface ViewabilityTrackingViewProps<
Item extends Record = Record
> extends ViewProps {
/**
* DEV ONLY: Set to true to get console.logs of the viewability, each time it's measured.
*
* @type {boolean}
* @memberof ViewabilityTrackingViewProps
*/
__DEV__debug?: boolean
children?: React.ReactNode
/**
* Requiring explicit opt-in to the tracking. This is to remind consumers that viewability tracking
* might affect performance, so ideally it should only be enabled when there is a chance that the
* content will come into view.
*
* @type {boolean}
* @memberof ViewabilityTrackingViewProps
*/
enabled: boolean
/**
* Minimum percent of pixels that need to be viewable for item to be considered in view. Defaults to 50.
*
* @type {number}
* @memberof ViewabilityTrackingViewProps
*/
itemVisiblePercentThreshold?: number
/**
* Item is optional, but passed into the onViewability* callbacks.
*
* @type {OnMeasureParameters['item']}
* @memberof ViewabilityTrackingViewProps
*/
item?: Item
/**
* Minimum view time, in milliseconds, required to trigger onViewabilityChange. Defaults to 1000.
*
* @type {number}
* @memberof ViewabilityTrackingViewProps
*/
minimumViewTime?: number
/**
* Use offsetBottom to set that amount of pixels as not viewable, e.g. if there is a fixed bottom
* bar that content can be scrolled behind, while still within the window of the device.
*
* @type {number}
* @memberof ViewabilityTrackingViewProps
*/
offsetBottom?: number
/**
* Use offsetLeft to set that amount of pixels as not viewable, e.g. if there is a fixed sidebar
* that content can be scrolled behind, while still within the window of the device.
*
* @type {number}
* @memberof ViewabilityTrackingViewProps
*/
offsetLeft?: number
/**
* Use offsetRight to set that amount of pixels as not viewable, e.g. if there is a fixed sidebar
* that content can be scrolled behind, while still within the window of the device.
*
* @type {number}
* @memberof ViewabilityTrackingViewProps
*/
offsetRight?: number
/**
* Use offsetTop to set that amount of pixels as not viewable, e.g. if there is a fixed header
* that content can be scrolled behind, while still within the window of the device.
*
* @type {number}
* @memberof ViewabilityTrackingViewProps
*/
offsetTop?: number
/**
* Called when the itemVisiblePercentThreshold and the minimumViewTime is met for the first time
* since coming into view and when going out of view after having been in view. In the latter case
* it does not matter for how long it had been in view before going out of view.
*
* @memberof ViewabilityTrackingViewProps
*/
onViewabilityChange?: (params: OnViewabilityCallbackParameters) => void
/**
* Called on every viewability measurement, which is done at the viewabilityMeasurementInterval.
*
* @memberof ViewabilityTrackingViewProps
*/
onViewabilityCheck?: (params: OnViewabilityCallbackParameters) => void
testID?: string
/**
* Time between viewability measurements, in milliseconds. Defaults to 200.
*
* @type {number}
* @memberof ViewabilityTrackingViewProps
*/
viewabilityMeasurementInterval?: number
}
```