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 npm visibility-sensor-react-native

or if you use yarn:

yarn add visibility-sensor-react-native

Usage

import VisibilitySensor from '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 [email protected]