@futurejj/react-native-visibility-sensor

🔍 Component visibility sensor wrapper to sense whether or not a component is in viewport with configurable inset thresholds.

Installation

Using yarn

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

using npm:

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

Usage

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 | 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 to learn how to contribute to the repository and the development workflow.

License

MIT

Support the project

❤️ Thanks to

• 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