🔍 Component visibility sensor wrapper to sense whether or not a component is in viewport with configurable inset thresholds.
Using yarn
yarn add @futurejj/react-native-visibility-sensorusing npm:
npm install @futurejj/react-native-visibility-sensorimport React from 'react';
import { ScrollView, Text } from 'react-native';
import { VisibilitySensor } from '@futurejj/react-native-visibility-sensor';
export default function VisibilitySensorExample() {
const [isInView, setIsInView] = React.useState(false);
function checkVisible(isVisible: boolean) {
if (isVisible) {
setIsInView(isVisible);
} else {
setIsInView(isVisible);
}
}
return (
<ScrollView>
<VisibilitySensor
onChange={(isVisible) => checkVisible(isVisible)}
threshold={{
left: 100,
right: 100,
}}
style={[styles.item, { backgroundColor: isInView ? 'green' : 'red' }]}>
<Text>This View is currently visible? {isInView ? 'yes' : 'no'}</Text>
</VisibilitySensor>
</ScrollView>
);
}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
- Module built using create-react-native-library
- Forked & detached from: react-native-component-inview & @se09deluca/react-native-component-inview
- Pokemon image source: PokémonDB
- Readme is edited using Typora