@futurejj/react-native-visibility-sensor/lib/commonjs/VisibilitySensor.js

A React Native wrapper to check whether a component is in the view port to track impressions and clicks

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function useInterval(callback, delay) {
  const savedCallback = (0, _react.useRef)(callback);
  (0, _react.useEffect)(() => {
    savedCallback.current = callback;
  }, [callback]);
  (0, _react.useEffect)(() => {
    if (delay === null || delay === undefined) {
      return;
    }
    const id = setInterval(() => savedCallback.current(), delay);
    return () => clearInterval(id);
  }, [delay]);
}
const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    onChange,
    disabled = false,
    triggerOnce = false,
    delay,
    threshold = {},
    children,
    ...rest
  } = props;
  const localRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, () => ({
    getInnerRef: () => localRef.current
  }));
  const [rectDimensions, setRectDimensions] = (0, _react.useState)({
    rectTop: 0,
    rectBottom: 0,
    rectLeft: 0,
    rectRight: 0,
    rectWidth: 0,
    rectHeight: 0
  });
  const [lastValue, setLastValue] = (0, _react.useState)(undefined);
  const [active, setActive] = (0, _react.useState)(false);
  const hasMeasuredRef = (0, _react.useRef)(false);
  const measureInnerView = () => {
    /* Check if the sensor is active to prevent unnecessary measurements
    This avoids running measurements when the sensor is disabled or stopped */
    if (!active) return;
    localRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
      const dimensions = {
        rectTop: pageY,
        rectBottom: pageY + height,
        rectLeft: pageX,
        rectRight: pageX + width,
        rectWidth: width,
        rectHeight: height
      };
      if (rectDimensions.rectTop !== dimensions.rectTop || rectDimensions.rectBottom !== dimensions.rectBottom || rectDimensions.rectLeft !== dimensions.rectLeft || rectDimensions.rectRight !== dimensions.rectRight || rectDimensions.rectWidth !== dimensions.rectWidth || rectDimensions.rectHeight !== dimensions.rectHeight) {
        setRectDimensions(dimensions);
        /* Set hasMeasuredRef to true to indicate that a valid measurement has been taken
        This ensures visibility checks only proceed after initial measurement */
        hasMeasuredRef.current = true;
      }
    });
  };
  useInterval(measureInnerView, delay || 100);
  const startWatching = (0, _react.useCallback)(() => {
    if (!active) setActive(true);
  }, [active]);
  const stopWatching = (0, _react.useCallback)(() => {
    if (active) {
      setActive(false);
      /* Reset measurement state when stopping to ensure fresh measurements
      when the sensor is reactivated */
      hasMeasuredRef.current = false;
    }
  }, [active]);
  (0, _react.useEffect)(() => {
    if (!disabled) {
      startWatching();
    }
    return () => {
      stopWatching();
    };
  }, [disabled, startWatching, stopWatching]);
  (0, _react.useEffect)(() => {
    /* Ensure visibility checks only run when the sensor is active and
    at least one measurement has been completed. This prevents
    premature visibility calculations with invalid or stale dimensions */
    if (!active || !hasMeasuredRef.current) return;
    const window = _reactNative.Dimensions.get('window');
    const isVisible = rectDimensions.rectTop + (threshold.top || 0) <= window.height &&
    // Top edge is within the bottom of the window
    rectDimensions.rectBottom - (threshold.bottom || 0) >= 0 &&
    // Bottom edge is within the top of the window
    rectDimensions.rectLeft + (threshold.left || 0) <= window.width &&
    // Left edge is within the right of the window
    rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window

    if (lastValue !== isVisible) {
      setLastValue(isVisible);
      onChange(isVisible);
      if (isVisible && triggerOnce) {
        stopWatching();
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [rectDimensions, lastValue, active]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    ref: localRef,
    ...rest,
    children: children
  });
});
var _default = exports.default = VisibilitySensor;
//# sourceMappingURL=VisibilitySensor.js.map