@futurejj/react-native-visibility-sensor NPM

@futurejj/react-native-visibility-sensor

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

NPM Downloads npm bundle size

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.