@futurejj/react-native-visibility-sensor 0.2.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Andrea De Luca
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# @futurejj/react-native-visibility-sensor
+
+🔍 Component visibility sensor wrapper to sense whether or not a component is in viewport. 
+
+It works on **Android, iOS & Web** .
+
+<table border="0">
+ <tr>
+    <td style="width: 50%; border-color: transparent;">
+
+## Installation
+
+#### using npm
+```sh
+npm install @futurejj/react-native-visibility-sensor
+```
+#### using Yarn
+```sh
+yarn add @futurejj/react-native-visibility-sensor
+```
+
+
+## Usage
+
+```typescript
+import { VisibilitySensor } from '@futurejj/react-native-visibility-sensor';
+
+const [isInView, setIsInView] = useState(false)
+
+const checkVisible = (isVisible: boolean) => {
+  if (isVisible){
+    setIsInView(isVisible)
+  } else {
+    setIsInView(isVisible)
+  }
+}
+
+<ScrollView>
+  <VisibilitySensor onChange={(isVisible) => this.checkVisible(isVisible)}>
+    <View style={[styles.item, {backgroundColor: isInView ? 'yellow' : '#f9c2ff'}]}>
+      <Text>This View is currently visible? {isInView ? 'yes': 'no'}</Text>
+    </View>
+  </VisibilitySensor>
+</ScrollView>
+
+// ...
+```
+</td>
+
+<td style="width: 50%; min-width: 200px; border-color: transparent; text-align: center;">
+
+## Demo
+
+  <img src="https://drive.google.com/uc?export=view&id=1jjU2o1SnUEMvFR9MMqQHOaGtPOVdW7M-" style="width: 250px; max-width: 100%; height: auto" title="The original legends in a demo." alt="demo"/>
+</td>
+ </tr>
+</table>
+
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/commonjs/VisibilitySensor.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 measureInnerView = () => {
+    var _localRef$current;
+    if (!active) return;
+    (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _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);
+      }
+    });
+  };
+  useInterval(measureInnerView, delay || 100);
+  const startWatching = (0, _react.useCallback)(() => {
+    if (!active) setActive(true);
+  }, [active]);
+  const stopWatching = (0, _react.useCallback)(() => {
+    if (active) setActive(false);
+  }, [active]);
+  (0, _react.useEffect)(() => {
+    if (!disabled) {
+      startWatching();
+    }
+    return () => {
+      stopWatching();
+    };
+  }, [disabled, startWatching, stopWatching]);
+  (0, _react.useEffect)(() => {
+    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]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
+    ref: localRef
+  }, rest), children);
+});
+var _default = VisibilitySensor;
+exports.default = _default;
+//# sourceMappingURL=VisibilitySensor.js.map

package/lib/commonjs/VisibilitySensor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","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","measureInnerView","_localRef$current","measure","_x","_y","width","height","pageX","pageY","dimensions","startWatching","useCallback","stopWatching","window","Dimensions","isVisible","top","bottom","left","right","createElement","View","_default","exports"],"sourceRoot":"../../src","sources":["VisibilitySensor.tsx"],"mappings":"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"}

package/lib/commonjs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "VisibilitySensor", {
+  enumerable: true,
+  get: function () {
+    return _VisibilitySensor.default;
+  }
+});
+var _VisibilitySensor = _interopRequireDefault(require("./VisibilitySensor"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_VisibilitySensor","_interopRequireDefault","require","obj","__esModule","default"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAkD,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}

package/lib/commonjs/visibilitySensor.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=visibilitySensor.types.js.map

package/lib/commonjs/visibilitySensor.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["visibilitySensor.types.ts"],"mappings":""}

package/lib/module/VisibilitySensor.js

@@ -0,0 +1,97 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { Dimensions, View } from 'react-native';
+function useInterval(callback, delay) {
+  const savedCallback = useRef(callback);
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    if (delay === null || delay === undefined) {
+      return;
+    }
+    const id = setInterval(() => savedCallback.current(), delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}
+const VisibilitySensor = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onChange,
+    disabled = false,
+    triggerOnce = false,
+    delay,
+    threshold = {},
+    children,
+    ...rest
+  } = props;
+  const localRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    getInnerRef: () => localRef.current
+  }));
+  const [rectDimensions, setRectDimensions] = useState({
+    rectTop: 0,
+    rectBottom: 0,
+    rectLeft: 0,
+    rectRight: 0,
+    rectWidth: 0,
+    rectHeight: 0
+  });
+  const [lastValue, setLastValue] = useState(undefined);
+  const [active, setActive] = useState(false);
+  const measureInnerView = () => {
+    var _localRef$current;
+    if (!active) return;
+    (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _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);
+      }
+    });
+  };
+  useInterval(measureInnerView, delay || 100);
+  const startWatching = useCallback(() => {
+    if (!active) setActive(true);
+  }, [active]);
+  const stopWatching = useCallback(() => {
+    if (active) setActive(false);
+  }, [active]);
+  useEffect(() => {
+    if (!disabled) {
+      startWatching();
+    }
+    return () => {
+      stopWatching();
+    };
+  }, [disabled, startWatching, stopWatching]);
+  useEffect(() => {
+    const window = 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]);
+  return /*#__PURE__*/React.createElement(View, _extends({
+    ref: localRef
+  }, rest), children);
+});
+export default VisibilitySensor;
+//# sourceMappingURL=VisibilitySensor.js.map

package/lib/module/VisibilitySensor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","forwardRef","useImperativeHandle","Dimensions","View","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","measureInnerView","_localRef$current","measure","_x","_y","width","height","pageX","pageY","dimensions","startWatching","stopWatching","window","get","isVisible","top","bottom","left","right","createElement","_extends"],"sourceRoot":"../../src","sources":["VisibilitySensor.tsx"],"mappings":"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"}

package/lib/module/index.js

@@ -0,0 +1,3 @@
+import VisibilitySensor from './VisibilitySensor';
+export { VisibilitySensor };
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["VisibilitySensor"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,OAAOA,gBAAgB,MAAM,oBAAoB;AAOjD,SAASA,gBAAgB"}

package/lib/module/visibilitySensor.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=visibilitySensor.types.js.map

package/lib/module/visibilitySensor.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["visibilitySensor.types.ts"],"mappings":""}

package/lib/typescript/VisibilitySensor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { VisibilitySensorRef, VisibilitySensorProps } from './visibilitySensor.types';
+declare const VisibilitySensor: React.ForwardRefExoticComponent<VisibilitySensorProps & React.RefAttributes<VisibilitySensorRef>>;
+export default VisibilitySensor;
+//# sourceMappingURL=VisibilitySensor.d.ts.map

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

@@ -0,0 +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,mGA2GrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,5 @@
+import VisibilitySensor from './VisibilitySensor';
+import type { VisibilitySensorProps, VisibilitySensorRef, VisibilitySensorThreshold } from './visibilitySensor.types';
+export { VisibilitySensor };
+export type { VisibilitySensorProps, VisibilitySensorRef, VisibilitySensorThreshold, };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,yBAAyB,GAC1B,CAAC"}

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

@@ -0,0 +1,26 @@
+import type { View, ViewProps } from 'react-native';
+export interface VisibilitySensorProps extends ViewProps {
+    onChange: (visible: boolean) => void;
+    disabled?: boolean;
+    triggerOnce?: boolean;
+    delay?: number | undefined;
+    threshold?: VisibilitySensorThreshold;
+}
+export interface VisibilitySensorRef {
+    getInnerRef: () => View | null;
+}
+export interface VisibilitySensorThreshold {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
+export interface RectDimensionsState {
+    rectTop: number;
+    rectBottom: number;
+    rectWidth: number;
+    rectHeight: number;
+    rectLeft: number;
+    rectRight: number;
+}
+//# sourceMappingURL=visibilitySensor.types.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,169 @@
+{
+  "name": "@futurejj/react-native-visibility-sensor",
+  "version": "0.2.0",
+  "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",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "private": false,
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "visibility-sensor",
+    "visibility",
+    "sensor",
+    "visibilitysensor",
+    "in-view",
+    "inview"
+  ],
+  "repository": "https://github.com/JairajJangle/react-native-visibility-sensor",
+  "author": "https://github.com/se09deluca",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JairajJangle/react-native-visibility-sensor/issues"
+  },
+  "homepage": "https://github.com/JairajJangle/react-native-visibility-sensor#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "0.70.0",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "0.72.4",
+    "react-native-builder-bob": "^0.20.0",
+    "release-it": "^15.0.0",
+    "typescript": "^5.0.2"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true,
+      "publishArgs": [
+        "--access public"
+      ]
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/VisibilitySensor.tsx

@@ -0,0 +1,142 @@
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import { Dimensions, type ScaledSize, View } from 'react-native';
+import type {
+  VisibilitySensorRef,
+  VisibilitySensorProps,
+  RectDimensionsState,
+} from './visibilitySensor.types';
+
+function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay === null || delay === undefined) {
+      return;
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}
+
+const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
+  (props, ref) => {
+    const {
+      onChange,
+      disabled = false,
+      triggerOnce = false,
+      delay,
+      threshold = {},
+      children,
+      ...rest
+    } = props;
+
+    const localRef = useRef<View>(null);
+
+    useImperativeHandle(ref, () => ({
+      getInnerRef: () => localRef.current,
+    }));
+
+    const [rectDimensions, setRectDimensions] = useState<RectDimensionsState>({
+      rectTop: 0,
+      rectBottom: 0,
+      rectLeft: 0,
+      rectRight: 0,
+      rectWidth: 0,
+      rectHeight: 0,
+    });
+    const [lastValue, setLastValue] = useState<boolean | undefined>(undefined);
+    const [active, setActive] = useState<boolean>(false);
+
+    const measureInnerView = () => {
+      if (!active) return;
+
+      localRef.current?.measure(
+        (
+          _x: number,
+          _y: number,
+          width: number,
+          height: number,
+          pageX: number,
+          pageY: number
+        ) => {
+          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);
+          }
+        }
+      );
+    };
+
+    useInterval(measureInnerView, delay || 100);
+
+    const startWatching = useCallback(() => {
+      if (!active) setActive(true);
+    }, [active]);
+
+    const stopWatching = useCallback(() => {
+      if (active) setActive(false);
+    }, [active]);
+
+    useEffect(() => {
+      if (!disabled) {
+        startWatching();
+      }
+
+      return () => {
+        stopWatching();
+      };
+    }, [disabled, startWatching, stopWatching]);
+
+    useEffect(() => {
+      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
+
+      if (lastValue !== isVisible) {
+        setLastValue(isVisible);
+        onChange(isVisible);
+        if (isVisible && triggerOnce) {
+          stopWatching();
+        }
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rectDimensions, lastValue]);
+
+    return (
+      <View ref={localRef} {...rest}>
+        {children}
+      </View>
+    );
+  }
+);
+
+export default VisibilitySensor;

package/src/index.ts

@@ -0,0 +1,13 @@
+import VisibilitySensor from './VisibilitySensor';
+import type {
+  VisibilitySensorProps,
+  VisibilitySensorRef,
+  VisibilitySensorThreshold,
+} from './visibilitySensor.types';
+
+export { VisibilitySensor };
+export type {
+  VisibilitySensorProps,
+  VisibilitySensorRef,
+  VisibilitySensorThreshold,
+};

package/src/visibilitySensor.types.ts

@@ -0,0 +1,29 @@
+import type { View, ViewProps } from 'react-native';
+
+export interface VisibilitySensorProps extends ViewProps {
+  onChange: (visible: boolean) => void;
+  disabled?: boolean;
+  triggerOnce?: boolean;
+  delay?: number | undefined;
+  threshold?: VisibilitySensorThreshold;
+}
+
+export interface VisibilitySensorRef {
+  getInnerRef: () => View | null;
+}
+
+export interface VisibilitySensorThreshold {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+export interface RectDimensionsState {
+  rectTop: number;
+  rectBottom: number;
+  rectWidth: number;
+  rectHeight: number;
+  rectLeft: number;
+  rectRight: number;
+}