https://github.com/svanboxel/visibility-sensor-react-native
React Native component that helps with determining whether a component is in the viewport.
https://github.com/svanboxel/visibility-sensor-react-native
Last synced: about 1 year ago
JSON representation
React Native component that helps with determining whether a component is in the viewport.
- Host: GitHub
- URL: https://github.com/svanboxel/visibility-sensor-react-native
- Owner: SvanBoxel
- Created: 2020-06-30T20:36:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-26T22:18:28.000Z (over 1 year ago)
- Last Synced: 2025-03-27T11:14:47.147Z (about 1 year ago)
- Language: TypeScript
- Size: 107 KB
- Stars: 111
- Watchers: 6
- Forks: 19
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native visibility sensor component
React Native component that helps with determining whether a component is visible to the user.
Inspired by [react-native-inviewport](https://github.com/yamill/react-native-inviewport) and [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor).
All usable with Expo with no extra native dependencies!
| 
:---------------:|:----------------:|
| 🐶 visible Horizontal? | 🐶 visible Vertical ? |
## Installation
Open a Terminal in the project root and run:
```sh
npm install @svanboxel/visibility-sensor-react-native
```
or if you use `yarn`:
```sh
yarn add @svanboxel/visibility-sensor-react-native
```
## Usage
```javascript
import VisibilitySensor from '@svanboxel/visibility-sensor-react-native'
const Example = props => {
const handleImageVisibility = visible => {
// handle visibility change
}
render() {
return (
)
}
}
```
## Todo
It's not finished and some work has to be done yet.
- Handle offsets. Callback if triggered is 1px is in viewport now.
- Add correct Typescript types
- Add tests
## Contributing
If you have suggestions for how this component could be improved, or want to report a bug, open an issue! We'd love all and any contributions.
For more, check out the [Contributing Guide](CONTRIBUTING.md).
## License
[ISC](LICENSE) © 2020 Sebass van Boxel