vsr

@svanboxel/visibility-sensor-react-native

React Native component that helps with determining whether a component is in the viewport.

Showing:

Popularity

Downloads/wk

450

GitHub Stars

20

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

1.3KB

License

ISC

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

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 and react-visibility-sensor.

All usable with Expo with no extra native dependencies!

🐶 visible vertical?🐶 visible horizontal?

Installation

Open a Terminal in the project root and run:

npm install @svanboxel/visibility-sensor-react-native

or if you use yarn:

yarn add @svanboxel/visibility-sensor-react-native

Usage

import VisibilitySensor from '@svanboxel/visibility-sensor-react-native'

const Example = props => {
  const handleImageVisibility = visible = {
    // handle visibility change
  }

  render() {
    return (
      <View style={styles.container}>
        <VisibilitySensor onChange={handleImageVisibility}>
          <Image
            style={styles.image}
            source={require("../assets/placeholder.png")}
           />
         </VisibilitySensor>
    </View>
   )
  }
}

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.

License

ISC © 2020 Sebass van Boxel hello@svboxel.com

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial