Gathering detailed insights and metrics for @futurejj/react-native-visibility-sensor
Gathering detailed insights and metrics for @futurejj/react-native-visibility-sensor
Gathering detailed insights and metrics for @futurejj/react-native-visibility-sensor
Gathering detailed insights and metrics for @futurejj/react-native-visibility-sensor
Component visibility sensor wrapper to detect whether or not a component is in viewport with configurable inset thresholds.
npm install @futurejj/react-native-visibility-sensor
Typescript
Module System
Min. Node Version
Node Version
NPM Version
55.2
Supply Chain
53.7
Quality
81.2
Maintenance
50
Vulnerability
94.1
License
TypeScript (75.43%)
JavaScript (24.57%)
Total Downloads
109,127
Last Day
393
Last Week
5,923
Last Month
27,110
Last Year
108,524
MIT License
34 Stars
170 Commits
3 Forks
13 Branches
7 Contributors
Updated on Jun 14, 2025
Minified
Minified + Gzipped
Latest Version
1.3.19
Package Id
@futurejj/react-native-visibility-sensor@1.3.19
Unpacked Size
39.57 kB
Size
11.25 kB
File Count
26
NPM Version
10.9.2
Node Version
22.16.0
Published on
Jun 10, 2025
Cumulative downloads
Total Downloads
Last Day
-8.4%
393
Compared to previous day
Last Week
-14.2%
5,923
Compared to previous week
Last Month
29.2%
27,110
Compared to previous month
Last Year
17,897.3%
108,524
Compared to previous year
2
24
🔍 Component visibility sensor wrapper to sense whether or not a component is in viewport with configurable inset thresholds.
Using yarn
1yarn add @futurejj/react-native-visibility-sensor
using npm:
1npm install @futurejj/react-native-visibility-sensor
1import React from 'react'; 2import { ScrollView, Text } from 'react-native'; 3import { VisibilitySensor } from '@futurejj/react-native-visibility-sensor'; 4 5export default function VisibilitySensorExample() { 6 const [isInView, setIsInView] = React.useState(false); 7 8 function checkVisible(isVisible: boolean) { 9 if (isVisible) { 10 setIsInView(isVisible); 11 } else { 12 setIsInView(isVisible); 13 } 14 } 15 16 return ( 17 <ScrollView> 18 <VisibilitySensor 19 onChange={(isVisible) => checkVisible(isVisible)} 20 threshold={{ 21 left: 100, 22 right: 100, 23 }} 24 style={[styles.item, { backgroundColor: isInView ? 'green' : 'red' }]}> 25 <Text>This View is currently visible? {isInView ? 'yes' : 'no'}</Text> 26 </VisibilitySensor> 27 </ScrollView> 28 ); 29}
VisibilitySensorProps
extends ViewProps
from React Native, which includes common properties for all views, such as style
, onLayout
, etc.
Property | Type | Required | Description |
---|---|---|---|
onChange | (visible: boolean) => void | Yes | Callback function that fires when visibility changes. |
disabled | boolean | No | If true , disables the sensor. |
triggerOnce | boolean | No | If true , the sensor will only trigger once. |
delay | number | undefined | No | The delay in milliseconds before the sensor triggers. |
threshold | VisibilitySensorThreshold | No | Defines the part of the view that must be visible for the sensor to trigger. |
Additionally, all properties from ViewProps
are also applicable.
Property | Type | Required | Description |
---|---|---|---|
top | number | No | The top threshold value for visibility. |
bottom | number | No | The bottom threshold value for visibility. |
left | number | No | The left threshold value for visibility. |
right | number | No | The right threshold value for visibility. |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
No vulnerabilities found.
No security vulnerabilities found.