@futurejj/react-native-visibility-sensor
Version:
A React Native wrapper to check whether a component is in the view port to track impressions and clicks
124 lines (89 loc) • 6.15 kB
Markdown
# @futurejj/react-native-visibility-sensor
🔍 Component visibility sensor wrapper to sense whether or not a component is in viewport with configurable inset thresholds.
[](https://badge.fury.io/js/%40futurejj%2Freact-native-visibility-sensor) [](https://github.com/JairajJangle/react-native-visibility-sensor/blob/main/LICENSE) [](https://github.com/JairajJangle/react-native-visibility-sensor/actions/workflows/ci.yml)    [](https://github.com/JairajJangle/react-native-visibility-sensor/issues?q=is%3Aopen+is%3Aissue)  [](https://snack.expo.dev/@futurejj/react-native-visibility-sensor-example)  
<div align="center">
<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTlsaGEyaXd4ZDdicWdtYnM4d3FibWltZjJwd3RrOG80b2pzemQ4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hNCfKTz7YMuDPIM7eV/giphy.gif" alt="Visibility Sensor demo" style="border: 1px solid gray;" />
</div>
## Installation
Using yarn
```sh
yarn add @futurejj/react-native-visibility-sensor
```
using npm:
```sh
npm install @futurejj/react-native-visibility-sensor
```
## Usage
```typescript
import 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>
);
}
```
### Properties
`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](#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.
---
### VisibilitySensorThreshold
| 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. |
---
## Notes
1. ⚠️ Facing problem on Android? Refer this discussion: https://github.com/JairajJangle/react-native-visibility-sensor/pull/1#issuecomment-2251569005
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
## Support the project
<p align="center" valign="center">
<a href="https://liberapay.com/FutureJJ/donate">
<img src="https://liberapay.com/assets/widgets/donate.svg" alt="LiberPay_Donation_Button" height="50" >
</a>
<a href=".github/assets/Jairaj_Jangle_Google_Pay_UPI_QR_Code.jpg">
<img src=".github/assets/upi.png" alt="Paypal_Donation_Button" height="50" >
</a>
<a href="https://www.paypal.com/paypalme/jairajjangle001/usd">
<img src=".github/assets/paypal_donate.png" alt="Paypal_Donation_Button" height="50" >
</a>
</p>
## ❤️ Thanks to
- Module built using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
- Forked & detached from: [react-native-component-inview](https://github.com/changey/react-native-component-inview) & [@se09deluca/react-native-component-inview](https://github.com/se09deluca/react-native-component-inview)
- Pokemon image source: [PokémonDB](https://pokemondb.net/)
- Readme is edited using [Typora](https://typora.io/)
---