@futurejj/react-native-visibility-sensor 1.3.22 → 1.4.0-beta.2

package/README.md

@@ -26,32 +26,28 @@ npm install @futurejj/react-native-visibility-sensor
 
 ## Usage
 
-```typescript
+```tsx
 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);
-    }
-  }
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [percentVisible, setPercentVisible] = useState<number>(0);
 
   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>
+        onChange={setIsVisible}
+				onPercentChange={setPercentVisible} // optional callback for % change
+        threshold={{ top: 100, bottom: 100 }}
+        style={[styles.item, { backgroundColor: isVisible ? 'green' : 'red' }]}>
+          
+        {/* Visibility state */}
+        <Text>This View is currently visible? {isVisible ? 'yes' : 'no'}</Text>
+
+				{/* Percent visibility state */}
+				<Text>{`Percent visible: ${percentVisible}%`}</Text>
       </VisibilitySensor>
     </ScrollView>
   );
@@ -61,13 +57,14 @@ export default function VisibilitySensorExample() {
 
 `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](#visibilitysensorthreshold) | No       | Defines the part of the view that must be visible for the sensor to trigger. |
+| Property        | Type                                                    | Required | Description                                                  |
+| --------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------ |
+| onChange        | (visible: boolean) => void                              | Yes      | Callback function that fires when visibility changes.        |
+| onPercentChange | (percentVisible: number) => void                        | No       | 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](#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. 
 

package/lib/commonjs/VisibilitySensor.js

@@ -8,6 +8,14 @@ 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); }
+var MeasurementState = /*#__PURE__*/function (MeasurementState) {
+  MeasurementState["IDLE"] = "IDLE";
+  // Not yet measured
+  MeasurementState["MEASURING"] = "MEASURING";
+  // Measurement in progress
+  MeasurementState["MEASURED"] = "MEASURED"; // Has valid measurements
+  return MeasurementState;
+}(MeasurementState || {});
 function useInterval(callback, delay) {
   const savedCallback = (0, _react.useRef)(callback);
   (0, _react.useEffect)(() => {
@@ -24,6 +32,7 @@ function useInterval(callback, delay) {
 const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     onChange,
+    onPercentChange,
     disabled = false,
     triggerOnce = false,
     delay,
@@ -31,10 +40,14 @@ const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     children,
     ...rest
   } = props;
-  const localRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => ({
     getInnerRef: () => localRef.current
   }));
+  const window = (0, _reactNative.useWindowDimensions)();
+  const localRef = (0, _react.useRef)(null);
+  const isMountedRef = (0, _react.useRef)(true);
+  const measurementStateRef = (0, _react.useRef)(MeasurementState.IDLE);
+  const lastPercentRef = (0, _react.useRef)(undefined);
   const [rectDimensions, setRectDimensions] = (0, _react.useState)({
     rectTop: 0,
     rectBottom: 0,
@@ -45,12 +58,18 @@ const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   });
   const [lastValue, setLastValue] = (0, _react.useState)(undefined);
   const [active, setActive] = (0, _react.useState)(false);
-  const hasMeasuredRef = (0, _react.useRef)(false);
-  const measureInnerView = () => {
+  const measureInnerView = (0, _react.useCallback)(() => {
     /* Check if the sensor is active to prevent unnecessary measurements
     This avoids running measurements when the sensor is disabled or stopped */
-    if (!active) return;
+    if (!active || !isMountedRef.current || measurementStateRef.current === MeasurementState.MEASURING) {
+      return;
+    }
+    measurementStateRef.current = MeasurementState.MEASURING;
     localRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      // Check if component is still mounted before setting state because measurement can be asynchronous
+      if (!isMountedRef.current) {
+        return;
+      }
       const dimensions = {
         rectTop: pageY,
         rectBottom: pageY + height,
@@ -61,12 +80,13 @@ const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       };
       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;
       }
+
+      /* Set measurementStateRef to MEASURED to indicate that a valid measurement has 
+      been taken. This ensures visibility checks only proceed after initial measurement */
+      measurementStateRef.current = MeasurementState.MEASURED;
     });
-  };
+  }, [active, rectDimensions]);
   useInterval(measureInnerView, delay || 100);
   const startWatching = (0, _react.useCallback)(() => {
     if (!active) setActive(true);
@@ -76,9 +96,37 @@ const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       setActive(false);
       /* Reset measurement state when stopping to ensure fresh measurements
       when the sensor is reactivated */
-      hasMeasuredRef.current = false;
+      measurementStateRef.current = MeasurementState.IDLE; // Reset state
     }
   }, [active]);
+
+  // Effect to trigger initial measurement when component becomes active:
+  (0, _react.useEffect)(() => {
+    let timer;
+    if (active && measurementStateRef.current === MeasurementState.IDLE) {
+      // Use setTimeout with 0 delay to ensure layout is complete
+      timer = setTimeout(() => {
+        measureInnerView();
+      }, 0);
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [active, measureInnerView]);
+
+  // Reset measurement state when dimensions change:
+  (0, _react.useEffect)(() => {
+    if (isMountedRef.current && measurementStateRef.current === MeasurementState.MEASURED) {
+      // Reset measurement state to force remeasurement with new dimensions
+      measurementStateRef.current = MeasurementState.IDLE;
+    }
+  }, [window]);
+  (0, _react.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
   (0, _react.useEffect)(() => {
     if (!disabled) {
       startWatching();
@@ -91,8 +139,9 @@ const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     /* 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');
+    if (!active || measurementStateRef.current !== MeasurementState.MEASURED || !isMountedRef.current) {
+      return;
+    }
     const isVisible = rectDimensions.rectTop + (threshold.top || 0) <= window.height &&
     // Top edge is within the bottom of the window
     rectDimensions.rectBottom - (threshold.bottom || 0) >= 0 &&
@@ -101,6 +150,39 @@ const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     // Left edge is within the right of the window
     rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window
 
+    // Calculate percent visible if callback is requested / provided
+    if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0 && isVisible // Don't perform % calculation if not visible for efficiency
+    ) {
+      // Thresholds reduce the effective viewport
+      const viewportTop = 0 + (threshold.top || 0);
+      const viewportBottom = window.height - (threshold.bottom || 0);
+      const viewportLeft = 0 + (threshold.left || 0);
+      const viewportRight = window.width - (threshold.right || 0);
+
+      // Calculate the visible portion of the element within the reduced viewport
+      const visibleTop = Math.max(viewportTop, rectDimensions.rectTop);
+      const visibleBottom = Math.min(viewportBottom, rectDimensions.rectBottom);
+      const visibleLeft = Math.max(viewportLeft, rectDimensions.rectLeft);
+      const visibleRight = Math.min(viewportRight, rectDimensions.rectRight);
+
+      // Calculate visible dimensions
+      const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+      const visibleWidth = Math.max(0, visibleRight - visibleLeft);
+
+      // Calculate percent visible based on actual element area
+      const visibleArea = visibleHeight * visibleWidth;
+      const totalArea = rectDimensions.rectHeight * rectDimensions.rectWidth;
+      const percentVisible = totalArea > 0 ? Math.round(visibleArea / totalArea * 100) : 0;
+
+      // Only fire callback if percent has changed
+      if (lastPercentRef.current !== percentVisible) {
+        lastPercentRef.current = percentVisible;
+        onPercentChange(percentVisible);
+      }
+    } else if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0 && !isVisible // If not visible, always report 0%
+    ) {
+      onPercentChange(0);
+    }
     if (lastValue !== isVisible) {
       setLastValue(isVisible);
       onChange(isVisible);
@@ -108,8 +190,7 @@ const VisibilitySensor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
         stopWatching();
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rectDimensions, lastValue, active]);
+  }, [rectDimensions, window, lastValue, active, onPercentChange, threshold, onChange, triggerOnce, stopWatching]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     ref: localRef,
     ...rest,

package/lib/commonjs/VisibilitySensor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useInterval","callback","delay","savedCallback","useRef","useEffect","current","undefined","id","setInterval","clearInterval","VisibilitySensor","forwardRef","props","ref","onChange","disabled","triggerOnce","threshold","children","rest","localRef","useImperativeHandle","getInnerRef","rectDimensions","setRectDimensions","useState","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","lastValue","setLastValue","active","setActive","hasMeasuredRef","measureInnerView","measure","_x","_y","width","height","pageX","pageY","dimensions","startWatching","useCallback","stopWatching","window","Dimensions","isVisible","top","bottom","left","right","jsx","View","_default","exports"],"sourceRoot":"../../src","sources":["VisibilitySensor.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MeasurementState","useInterval","callback","delay","savedCallback","useRef","useEffect","current","undefined","id","setInterval","clearInterval","VisibilitySensor","forwardRef","props","ref","onChange","onPercentChange","disabled","triggerOnce","threshold","children","rest","useImperativeHandle","getInnerRef","localRef","window","useWindowDimensions","isMountedRef","measurementStateRef","IDLE","lastPercentRef","rectDimensions","setRectDimensions","useState","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","lastValue","setLastValue","active","setActive","measureInnerView","useCallback","MEASURING","measure","_x","_y","width","height","pageX","pageY","dimensions","MEASURED","startWatching","stopWatching","timer","setTimeout","clearTimeout","isVisible","top","bottom","left","right","viewportTop","viewportBottom","viewportLeft","viewportRight","visibleTop","Math","max","visibleBottom","min","visibleLeft","visibleRight","visibleHeight","visibleWidth","visibleArea","totalArea","percentVisible","round","jsx","View","_default","exports"],"sourceRoot":"../../src","sources":["VisibilitySensor.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/VisibilitySensor.js

@@ -1,8 +1,16 @@
 "use strict";
 
 import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import { Dimensions, View } from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
+var MeasurementState = /*#__PURE__*/function (MeasurementState) {
+  MeasurementState["IDLE"] = "IDLE";
+  // Not yet measured
+  MeasurementState["MEASURING"] = "MEASURING";
+  // Measurement in progress
+  MeasurementState["MEASURED"] = "MEASURED"; // Has valid measurements
+  return MeasurementState;
+}(MeasurementState || {});
 function useInterval(callback, delay) {
   const savedCallback = useRef(callback);
   useEffect(() => {
@@ -19,6 +27,7 @@ function useInterval(callback, delay) {
 const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     onChange,
+    onPercentChange,
     disabled = false,
     triggerOnce = false,
     delay,
@@ -26,10 +35,14 @@ const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const localRef = useRef(null);
   useImperativeHandle(ref, () => ({
     getInnerRef: () => localRef.current
   }));
+  const window = useWindowDimensions();
+  const localRef = useRef(null);
+  const isMountedRef = useRef(true);
+  const measurementStateRef = useRef(MeasurementState.IDLE);
+  const lastPercentRef = useRef(undefined);
   const [rectDimensions, setRectDimensions] = useState({
     rectTop: 0,
     rectBottom: 0,
@@ -40,12 +53,18 @@ const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [lastValue, setLastValue] = useState(undefined);
   const [active, setActive] = useState(false);
-  const hasMeasuredRef = useRef(false);
-  const measureInnerView = () => {
+  const measureInnerView = useCallback(() => {
     /* Check if the sensor is active to prevent unnecessary measurements
     This avoids running measurements when the sensor is disabled or stopped */
-    if (!active) return;
+    if (!active || !isMountedRef.current || measurementStateRef.current === MeasurementState.MEASURING) {
+      return;
+    }
+    measurementStateRef.current = MeasurementState.MEASURING;
     localRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      // Check if component is still mounted before setting state because measurement can be asynchronous
+      if (!isMountedRef.current) {
+        return;
+      }
       const dimensions = {
         rectTop: pageY,
         rectBottom: pageY + height,
@@ -56,12 +75,13 @@ const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
       };
       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;
       }
+
+      /* Set measurementStateRef to MEASURED to indicate that a valid measurement has 
+      been taken. This ensures visibility checks only proceed after initial measurement */
+      measurementStateRef.current = MeasurementState.MEASURED;
     });
-  };
+  }, [active, rectDimensions]);
   useInterval(measureInnerView, delay || 100);
   const startWatching = useCallback(() => {
     if (!active) setActive(true);
@@ -71,9 +91,37 @@ const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
       setActive(false);
       /* Reset measurement state when stopping to ensure fresh measurements
       when the sensor is reactivated */
-      hasMeasuredRef.current = false;
+      measurementStateRef.current = MeasurementState.IDLE; // Reset state
     }
   }, [active]);
+
+  // Effect to trigger initial measurement when component becomes active:
+  useEffect(() => {
+    let timer;
+    if (active && measurementStateRef.current === MeasurementState.IDLE) {
+      // Use setTimeout with 0 delay to ensure layout is complete
+      timer = setTimeout(() => {
+        measureInnerView();
+      }, 0);
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [active, measureInnerView]);
+
+  // Reset measurement state when dimensions change:
+  useEffect(() => {
+    if (isMountedRef.current && measurementStateRef.current === MeasurementState.MEASURED) {
+      // Reset measurement state to force remeasurement with new dimensions
+      measurementStateRef.current = MeasurementState.IDLE;
+    }
+  }, [window]);
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
   useEffect(() => {
     if (!disabled) {
       startWatching();
@@ -86,8 +134,9 @@ const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
     /* 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 = Dimensions.get('window');
+    if (!active || measurementStateRef.current !== MeasurementState.MEASURED || !isMountedRef.current) {
+      return;
+    }
     const isVisible = rectDimensions.rectTop + (threshold.top || 0) <= window.height &&
     // Top edge is within the bottom of the window
     rectDimensions.rectBottom - (threshold.bottom || 0) >= 0 &&
@@ -96,6 +145,39 @@ const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
     // Left edge is within the right of the window
     rectDimensions.rectRight - (threshold.right || 0) >= 0; // Right edge is within the left of the window
 
+    // Calculate percent visible if callback is requested / provided
+    if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0 && isVisible // Don't perform % calculation if not visible for efficiency
+    ) {
+      // Thresholds reduce the effective viewport
+      const viewportTop = 0 + (threshold.top || 0);
+      const viewportBottom = window.height - (threshold.bottom || 0);
+      const viewportLeft = 0 + (threshold.left || 0);
+      const viewportRight = window.width - (threshold.right || 0);
+
+      // Calculate the visible portion of the element within the reduced viewport
+      const visibleTop = Math.max(viewportTop, rectDimensions.rectTop);
+      const visibleBottom = Math.min(viewportBottom, rectDimensions.rectBottom);
+      const visibleLeft = Math.max(viewportLeft, rectDimensions.rectLeft);
+      const visibleRight = Math.min(viewportRight, rectDimensions.rectRight);
+
+      // Calculate visible dimensions
+      const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+      const visibleWidth = Math.max(0, visibleRight - visibleLeft);
+
+      // Calculate percent visible based on actual element area
+      const visibleArea = visibleHeight * visibleWidth;
+      const totalArea = rectDimensions.rectHeight * rectDimensions.rectWidth;
+      const percentVisible = totalArea > 0 ? Math.round(visibleArea / totalArea * 100) : 0;
+
+      // Only fire callback if percent has changed
+      if (lastPercentRef.current !== percentVisible) {
+        lastPercentRef.current = percentVisible;
+        onPercentChange(percentVisible);
+      }
+    } else if (onPercentChange && rectDimensions.rectWidth > 0 && rectDimensions.rectHeight > 0 && !isVisible // If not visible, always report 0%
+    ) {
+      onPercentChange(0);
+    }
     if (lastValue !== isVisible) {
       setLastValue(isVisible);
       onChange(isVisible);
@@ -103,8 +185,7 @@ const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
         stopWatching();
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rectDimensions, lastValue, active]);
+  }, [rectDimensions, window, lastValue, active, onPercentChange, threshold, onChange, triggerOnce, stopWatching]);
   return /*#__PURE__*/_jsx(View, {
     ref: localRef,
     ...rest,

package/lib/module/VisibilitySensor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","useState","forwardRef","useImperativeHandle","Dimensions","View","jsx","_jsx","useInterval","callback","delay","savedCallback","current","undefined","id","setInterval","clearInterval","VisibilitySensor","props","ref","onChange","disabled","triggerOnce","threshold","children","rest","localRef","getInnerRef","rectDimensions","setRectDimensions","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","lastValue","setLastValue","active","setActive","hasMeasuredRef","measureInnerView","measure","_x","_y","width","height","pageX","pageY","dimensions","startWatching","stopWatching","window","get","isVisible","top","bottom","left","right"],"sourceRoot":"../../src","sources":["VisibilitySensor.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","forwardRef","useImperativeHandle","useWindowDimensions","View","jsx","_jsx","MeasurementState","useInterval","callback","delay","savedCallback","current","undefined","id","setInterval","clearInterval","VisibilitySensor","props","ref","onChange","onPercentChange","disabled","triggerOnce","threshold","children","rest","getInnerRef","localRef","window","isMountedRef","measurementStateRef","IDLE","lastPercentRef","rectDimensions","setRectDimensions","rectTop","rectBottom","rectLeft","rectRight","rectWidth","rectHeight","lastValue","setLastValue","active","setActive","measureInnerView","MEASURING","measure","_x","_y","width","height","pageX","pageY","dimensions","MEASURED","startWatching","stopWatching","timer","setTimeout","clearTimeout","isVisible","top","bottom","left","right","viewportTop","viewportBottom","viewportLeft","viewportRight","visibleTop","Math","max","visibleBottom","min","visibleLeft","visibleRight","visibleHeight","visibleWidth","visibleArea","totalArea","percentVisible","round"],"sourceRoot":"../../src","sources":["VisibilitySensor.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/VisibilitySensor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilitySensor.d.ts","sourceRoot":"","sources":["../../src/VisibilitySensor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,mBAAmB,EACnB,qBAAqB,EAEtB,MAAM,0BAA0B,CAAC;AAmBlC,QAAA,MAAM,gBAAgB,mGA2HrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VisibilitySensor.d.ts","sourceRoot":"","sources":["../../src/VisibilitySensor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,mBAAmB,EACnB,qBAAqB,EAEtB,MAAM,0BAA0B,CAAC;AAyBlC,QAAA,MAAM,gBAAgB,mGA4OrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/visibilitySensor.types.d.ts

@@ -1,6 +1,7 @@
 import type { View, ViewProps } from 'react-native';
 export interface VisibilitySensorProps extends ViewProps {
     onChange: (visible: boolean) => void;
+    onPercentChange?: (percentVisible: number) => void;
     disabled?: boolean;
     triggerOnce?: boolean;
     delay?: number | undefined;

package/lib/typescript/visibilitySensor.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visibilitySensor.types.d.ts","sourceRoot":"","sources":["../../src/visibilitySensor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAED,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,yBAAyB;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"visibilitySensor.types.d.ts","sourceRoot":"","sources":["../../src/visibilitySensor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAED,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,yBAAyB;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@futurejj/react-native-visibility-sensor",
-  "version": "1.3.22",
+  "version": "1.4.0-beta.2",
   "description": "A React Native wrapper to check whether a component is in the view port to track impressions and clicks",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/VisibilitySensor.tsx

@@ -6,13 +6,19 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import { Dimensions, type ScaledSize, View } from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 import type {
   VisibilitySensorRef,
   VisibilitySensorProps,
   RectDimensionsState,
 } from './visibilitySensor.types';
 
+enum MeasurementState {
+  IDLE = 'IDLE', // Not yet measured
+  MEASURING = 'MEASURING', // Measurement in progress
+  MEASURED = 'MEASURED', // Has valid measurements
+}
+
 function useInterval(callback: () => void, delay: number | null) {
   const savedCallback = useRef(callback);
 
@@ -34,6 +40,7 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
   (props, ref) => {
     const {
       onChange,
+      onPercentChange,
       disabled = false,
       triggerOnce = false,
       delay,
@@ -42,12 +49,17 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
       ...rest
     } = props;
 
-    const localRef = useRef<View>(null);
-
     useImperativeHandle(ref, () => ({
       getInnerRef: () => localRef.current,
     }));
 
+    const window = useWindowDimensions();
+
+    const localRef = useRef<View>(null);
+    const isMountedRef = useRef(true);
+    const measurementStateRef = useRef<MeasurementState>(MeasurementState.IDLE);
+    const lastPercentRef = useRef<number | undefined>(undefined);
+
     const [rectDimensions, setRectDimensions] = useState<RectDimensionsState>({
       rectTop: 0,
       rectBottom: 0,
@@ -58,12 +70,19 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
     });
     const [lastValue, setLastValue] = useState<boolean | undefined>(undefined);
     const [active, setActive] = useState<boolean>(false);
-    const hasMeasuredRef = useRef(false);
 
-    const measureInnerView = () => {
+    const measureInnerView = useCallback(() => {
       /* Check if the sensor is active to prevent unnecessary measurements
       This avoids running measurements when the sensor is disabled or stopped */
-      if (!active) return;
+      if (
+        !active ||
+        !isMountedRef.current ||
+        measurementStateRef.current === MeasurementState.MEASURING
+      ) {
+        return;
+      }
+
+      measurementStateRef.current = MeasurementState.MEASURING;
 
       localRef.current?.measure(
         (
@@ -74,6 +93,11 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
           pageX: number,
           pageY: number
         ) => {
+          // Check if component is still mounted before setting state because measurement can be asynchronous
+          if (!isMountedRef.current) {
+            return;
+          }
+
           const dimensions = {
             rectTop: pageY,
             rectBottom: pageY + height,
@@ -91,13 +115,14 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
             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;
           }
+
+          /* Set measurementStateRef to MEASURED to indicate that a valid measurement has 
+          been taken. This ensures visibility checks only proceed after initial measurement */
+          measurementStateRef.current = MeasurementState.MEASURED;
         }
       );
-    };
+    }, [active, rectDimensions]);
 
     useInterval(measureInnerView, delay || 100);
 
@@ -110,10 +135,44 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
         setActive(false);
         /* Reset measurement state when stopping to ensure fresh measurements
         when the sensor is reactivated */
-        hasMeasuredRef.current = false;
+        measurementStateRef.current = MeasurementState.IDLE; // Reset state
       }
     }, [active]);
 
+    // Effect to trigger initial measurement when component becomes active:
+    useEffect(() => {
+      let timer: ReturnType<typeof setTimeout>;
+
+      if (active && measurementStateRef.current === MeasurementState.IDLE) {
+        // Use setTimeout with 0 delay to ensure layout is complete
+        timer = setTimeout(() => {
+          measureInnerView();
+        }, 0);
+      }
+
+      return () => {
+        if (timer) clearTimeout(timer);
+      };
+    }, [active, measureInnerView]);
+
+    // Reset measurement state when dimensions change:
+    useEffect(() => {
+      if (
+        isMountedRef.current &&
+        measurementStateRef.current === MeasurementState.MEASURED
+      ) {
+        // Reset measurement state to force remeasurement with new dimensions
+        measurementStateRef.current = MeasurementState.IDLE;
+      }
+    }, [window]);
+
+    useEffect(() => {
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+      };
+    }, []);
+
     useEffect(() => {
       if (!disabled) {
         startWatching();
@@ -128,15 +187,66 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
       /* 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;
+      if (
+        !active ||
+        measurementStateRef.current !== MeasurementState.MEASURED ||
+        !isMountedRef.current
+      ) {
+        return;
+      }
 
-      const window: ScaledSize = Dimensions.get('window');
       const isVisible: boolean =
         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
 
+      // Calculate percent visible if callback is requested / provided
+      if (
+        onPercentChange &&
+        rectDimensions.rectWidth > 0 &&
+        rectDimensions.rectHeight > 0 &&
+        isVisible // Don't perform % calculation if not visible for efficiency
+      ) {
+        // Thresholds reduce the effective viewport
+        const viewportTop = 0 + (threshold.top || 0);
+        const viewportBottom = window.height - (threshold.bottom || 0);
+        const viewportLeft = 0 + (threshold.left || 0);
+        const viewportRight = window.width - (threshold.right || 0);
+
+        // Calculate the visible portion of the element within the reduced viewport
+        const visibleTop = Math.max(viewportTop, rectDimensions.rectTop);
+        const visibleBottom = Math.min(
+          viewportBottom,
+          rectDimensions.rectBottom
+        );
+        const visibleLeft = Math.max(viewportLeft, rectDimensions.rectLeft);
+        const visibleRight = Math.min(viewportRight, rectDimensions.rectRight);
+
+        // Calculate visible dimensions
+        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        const visibleWidth = Math.max(0, visibleRight - visibleLeft);
+
+        // Calculate percent visible based on actual element area
+        const visibleArea = visibleHeight * visibleWidth;
+        const totalArea = rectDimensions.rectHeight * rectDimensions.rectWidth;
+        const percentVisible =
+          totalArea > 0 ? Math.round((visibleArea / totalArea) * 100) : 0;
+
+        // Only fire callback if percent has changed
+        if (lastPercentRef.current !== percentVisible) {
+          lastPercentRef.current = percentVisible;
+          onPercentChange(percentVisible);
+        }
+      } else if (
+        onPercentChange &&
+        rectDimensions.rectWidth > 0 &&
+        rectDimensions.rectHeight > 0 &&
+        !isVisible // If not visible, always report 0%
+      ) {
+        onPercentChange(0);
+      }
+
       if (lastValue !== isVisible) {
         setLastValue(isVisible);
         onChange(isVisible);
@@ -144,8 +254,17 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
           stopWatching();
         }
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rectDimensions, lastValue, active]);
+    }, [
+      rectDimensions,
+      window,
+      lastValue,
+      active,
+      onPercentChange,
+      threshold,
+      onChange,
+      triggerOnce,
+      stopWatching,
+    ]);
 
     return (
       <View ref={localRef} {...rest}>

package/src/visibilitySensor.types.ts

@@ -2,6 +2,7 @@ import type { View, ViewProps } from 'react-native';
 
 export interface VisibilitySensorProps extends ViewProps {
   onChange: (visible: boolean) => void;
+  onPercentChange?: (percentVisible: number) => void;
   disabled?: boolean;
   triggerOnce?: boolean;
   delay?: number | undefined;