@cleartrip/ct-design-intersection-observer 5.30.0 → 5.32.0-SNAPSHOT-native-main.1

package/dist/IntersectionObserver.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntersectionObserver.native.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAEnD,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAyC7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"IntersectionObserver.native.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAEnD,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqD7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/type.d.ts

@@ -12,6 +12,7 @@ export interface IntersectionObserverProps {
     triggerOnce?: boolean;
     onUnmount?: () => void;
     observeOnScroll?: boolean;
+    observeWithScrollOffset?: boolean;
     testID?: string;
 }
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,yBAAyB;IAExC,QAAQ,EAAE,SAAS,CAAC;IAGpB,cAAc,EAAE,MAAM,IAAI,CAAC;IAG3B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGpC,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IAGxC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAGrB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAGvE,6BAA6B,CAAC,EAAE,OAAO,CAAC;IAGxC,WAAW,CAAC,EAAE,OAAO,CAAC;IAKtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAKvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAM1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,yBAAyB;IAExC,QAAQ,EAAE,SAAS,CAAC;IAGpB,cAAc,EAAE,MAAM,IAAI,CAAC;IAG3B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGpC,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IAGxC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAGrB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAGvE,6BAA6B,CAAC,EAAE,OAAO,CAAC;IAGxC,WAAW,CAAC,EAAE,OAAO,CAAC;IAKtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAKvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAMlC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/useInViewType.d.ts

@@ -23,6 +23,7 @@ export interface IntersectionOptions extends IntersectionObserverInit {
     observeOnScroll?: boolean;
     onUnmount?: () => void;
     checkFullVisibility?: boolean;
+    observeWithScrollOffset?: boolean;
 }
 export declare enum SCROLLING_TYPE {
     NONE = "none",

package/dist/useInViewType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInViewType.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useInViewType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEjD,MAAM,WAAW,mBAAoB,SAAQ,wBAAwB;IAEnE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAEtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,IAAI,CAAC,EAAE,OAAO,CAAC;IAGf,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAGrC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpC,uBAAuB,CAAC,EAAE;QACxB,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IAKF,8BAA8B,CAAC,EAAE,OAAO,CAAC;IAKzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IAGxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAGhC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAEvE,6BAA6B,CAAC,EAAE,OAAO,CAAC;IAMxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAMvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AAED,UAAU,UAAU;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}
+{"version":3,"file":"useInViewType.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useInViewType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEjD,MAAM,WAAW,mBAAoB,SAAQ,wBAAwB;IAEnE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAEtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,IAAI,CAAC,EAAE,OAAO,CAAC;IAGf,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAGrC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpC,uBAAuB,CAAC,EAAE;QACxB,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IAKF,8BAA8B,CAAC,EAAE,OAAO,CAAC;IAKzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IAGxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAGhC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAEvE,6BAA6B,CAAC,EAAE,OAAO,CAAC;IAMxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAMvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAM9B,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AAED,UAAU,UAAU;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/useinView.native.d.ts

@@ -1,4 +1,8 @@
 import { IntersectionOptions, InViewHookResponse } from './useInViewType';
-declare const useInView: <T>({ threshold, timedThreshold, onChange, onIntersectionComplete, onTimedObservationComplete, minimumObservationTime, observerBox, gestureHorizontallyScrollable, triggerOnce, observeOnScroll, onUnmount, checkFullVisibility, }: IntersectionOptions) => InViewHookResponse<T>;
+export declare const useInViewWithLayout: <T>({ threshold, timedThreshold, onChange, onIntersectionComplete, onTimedObservationComplete, minimumObservationTime, observerBox, gestureHorizontallyScrollable, triggerOnce, observeOnScroll, onUnmount, checkFullVisibility, observeWithScrollOffset, }: IntersectionOptions) => {
+    ref: InViewHookResponse<T>;
+    onLayout: () => void;
+};
+declare const useInView: <T>(options: IntersectionOptions) => InViewHookResponse<T>;
 export default useInView;
 //# sourceMappingURL=useinView.native.d.ts.map

package/dist/useinView.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useinView.native.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useinView.native.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAkI1E,QAAA,MAAM,SAAS,GAAI,CAAC,EAAE,gOAanB,mBAAmB,KAAG,kBAAkB,CAAC,CAAC,CAoI5C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"useinView.native.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useinView.native.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA0L1E,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAE,yPAcpC,mBAAmB,KAAG;IAAE,GAAG,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAsM1E,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,CAAC,EAAE,SAAS,mBAAmB,KAAG,kBAAkB,CAAC,CAAC,CAAwC,CAAC;AAElH,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-intersection-observer",
-  "version": "5.30.0",
+  "version": "5.32.0-SNAPSHOT-native-main.1",
   "description": "Intersection Observer Component",
   "types": "dist/index.d.ts",
   "main": "./dist/ct-design-intersection-observer.cjs.js",
@@ -24,15 +24,15 @@
     "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-scroll-container": "5.30.0",
-    "@cleartrip/ct-design-container": "5.30.0",
-    "@cleartrip/ct-design-style-manager": "5.30.0",
-    "@cleartrip/ct-design-theme": "5.30.0",
-    "@cleartrip/ct-design-list": "5.30.0",
-    "@cleartrip/ct-design-common-utils": "5.30.0"
+    "@cleartrip/ct-design-container": "5.32.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-scroll-container": "5.32.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-style-manager": "5.32.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-theme": "5.32.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-list": "5.32.0-SNAPSHOT-native-main.1",
+    "@cleartrip/ct-design-common-utils": "5.32.0-SNAPSHOT-native-main.1"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-types": "5.30.0"
+    "@cleartrip/ct-design-types": "5.32.0-SNAPSHOT-native-main.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/IntersectionObserver.native.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { View } from 'react-native';
-import useInView from './useinView';
+import { useInViewWithLayout } from './useinView.native';
 
 import { IntersectionObserverProps } from './type';
 
@@ -18,9 +18,10 @@ const InterSectionObserver: React.FC<IntersectionObserverProps> = ({
   onIntersectionComplete,
   onUnmount,
   observeOnScroll,
+  observeWithScrollOffset,
   testID,
 }) => {
-  const ref = useInView<View>({
+  const { ref, onLayout } = useInViewWithLayout<View>({
     onChange: onIntersection,
     onTimedObservationComplete,
     onIntersectionComplete,
@@ -32,17 +33,28 @@ const InterSectionObserver: React.FC<IntersectionObserverProps> = ({
     triggerOnce,
     onUnmount,
     observeOnScroll,
+    observeWithScrollOffset,
   });
   if (wrapped) {
     return (
-      <View ref={ref} testID={testID ? `${testID}-IntersectionObserver` : undefined} collapsable={false}>
+      <View
+        ref={ref}
+        testID={testID ? `${testID}-IntersectionObserver` : undefined}
+        collapsable={false}
+        onLayout={onLayout}
+      >
         {children}
       </View>
     );
   }
   return (
     <>
-      <View ref={ref} testID={testID ? `${testID}-IntersectionObserver` : undefined} collapsable={false} />
+      <View
+        ref={ref}
+        testID={testID ? `${testID}-IntersectionObserver` : undefined}
+        collapsable={false}
+        onLayout={onLayout}
+      />
       {children}
     </>
   );

package/src/type.ts

@@ -41,6 +41,11 @@ export interface IntersectionObserverProps {
    */
   observeOnScroll?: boolean;
 
+  /**
+   * compute visibility from the cached layout and parent scroll offset instead of measuring on every observe
+   */
+  observeWithScrollOffset?: boolean;
+
   /**
    * Identifier used to locate this component in end-to-end tests.
    * Forwarded to the observed React Native view.

package/src/useInViewType.ts

@@ -78,6 +78,12 @@ export interface IntersectionOptions extends IntersectionObserverInit {
    * @default false
    */
   checkFullVisibility?: boolean;
+
+  /**
+   * compute visibility from the cached layout and parent scroll offset instead of measuring on every observe
+   * @default false
+   */
+  observeWithScrollOffset?: boolean;
 }
 
 export enum SCROLLING_TYPE {

package/src/useinView.native.ts

@@ -1,7 +1,12 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { RefObject, useCallback, useEffect, useRef } from 'react';
 
 import { Dimensions, View } from 'react-native';
-import { useAddObservableChild, useGetScrolling } from '@cleartrip/ct-design-scroll-container';
+import {
+  ObserveOptions,
+  useAddObservableChild,
+  useGetScrollOffset,
+  useGetScrolling,
+} from '@cleartrip/ct-design-scroll-container';
 import { useListItem } from '@cleartrip/ct-design-list';
 import { promiseHandler } from '@cleartrip/ct-design-common-utils';
 
@@ -14,12 +19,27 @@ const { width, height } = Dimensions.get('window');
  */
 
 interface VisibilityState {
-  visibleRef: React.MutableRefObject<number>;
-  timeoutVisibleRef: React.MutableRefObject<boolean>;
-  timeoutVisibleStartRef: React.MutableRefObject<{ start: number; end: number }>;
-  triggerOnceValue: React.MutableRefObject<boolean>;
+  visibleRef: RefObject<number>;
+  timeoutVisibleRef: RefObject<boolean>;
+  timeoutVisibleStartRef: RefObject<{ start: number; end: number }>;
+  triggerOnceValue: RefObject<boolean>;
 }
 
+/** window coordinates + size of the element, and the scroll offset at the time it was measured */
+interface CachedLayout {
+  pageX: number;
+  pageY: number;
+  width: number;
+  height: number;
+  scrollX: number;
+  scrollY: number;
+}
+
+/** allowed difference (percentage points) between measure and offset based visibility */
+const VISIBILITY_MISMATCH_TOLERANCE = 10;
+/** px difference treated as equal while diagnosing a mismatch */
+const PIXEL_TOLERANCE = 1;
+
 const calculateVisibility = (
   rectTop: number,
   rectBottom: number,
@@ -66,6 +86,47 @@ const calculateVisibility = (
   return { verticalVisibility: clamp(verticalVisibility), horizontalVisibility: clamp(horizontalVisibility) };
 };
 
+/**
+ * Visibility percentage fed to handleVisibilityChange; 0 when not visible
+ */
+const getVisibility = (
+  pageX: number,
+  pageY: number,
+  rectWidth: number,
+  rectHeight: number,
+  observerBox: [number, number, number | undefined, number | undefined],
+  threshold: number[],
+  horizontal: boolean,
+  gestureHorizontallyScrollable: boolean,
+  checkFullVisibility: boolean,
+): number => {
+  const { verticalVisibility, horizontalVisibility } = calculateVisibility(
+    pageY,
+    pageY + rectHeight,
+    rectHeight,
+    pageX,
+    pageX + rectWidth,
+    rectWidth,
+    observerBox,
+  );
+
+  const visiblePercentage = threshold[0] * 100;
+  const isVisible =
+    horizontal || gestureHorizontallyScrollable
+      ? horizontalVisibility >= visiblePercentage
+      : verticalVisibility >= visiblePercentage;
+  const visibility = horizontal ? horizontalVisibility : verticalVisibility;
+
+  const totalVisibility = (horizontalVisibility * verticalVisibility) / 100;
+  if (totalVisibility >= visiblePercentage) {
+    return totalVisibility;
+  }
+  if (!checkFullVisibility && isVisible) {
+    return visibility;
+  }
+  return 0;
+};
+
 const handleVisibilityChange = (
   visibility: number,
   threshold: number[],
@@ -135,7 +196,7 @@ const handleVisibilityChange = (
   }
 };
 
-const useInView = <T>({
+export const useInViewWithLayout = <T>({
   threshold = [0.01, 0.5],
   timedThreshold = 1000,
   onChange,
@@ -148,8 +209,13 @@ const useInView = <T>({
   observeOnScroll = false,
   onUnmount,
   checkFullVisibility = false,
-}: IntersectionOptions): InViewHookResponse<T> => {
+  observeWithScrollOffset = false,
+}: IntersectionOptions): { ref: InViewHookResponse<T>; onLayout: () => void } => {
   const ref = useRef<View>(null);
+  const layoutRef = useRef<CachedLayout | null>(null);
+  // observe is registered once with the scroll container, so read the latest box from a ref
+  const observerBoxRef = useRef(observerBox);
+  observerBoxRef.current = observerBox;
   const visibleRef = useRef(0);
   const timeoutVisibleRef = useRef(false);
   const timeoutVisibleStartRef = useRef({ start: 0, end: 0 });
@@ -157,9 +223,27 @@ const useInView = <T>({
 
   const { horizontal } = useGetScrolling();
   const { listId } = useListItem();
+  const getScrollOffset = useGetScrollOffset();
+
+  const cacheLayout = useCallback(
+    (pageX: number, pageY: number, layoutWidth: number, layoutHeight: number) => {
+      if (!getScrollOffset) {
+        return;
+      }
+      const { x, y } = getScrollOffset();
+      layoutRef.current = { pageX, pageY, width: layoutWidth, height: layoutHeight, scrollX: x, scrollY: y };
+    },
+    [getScrollOffset],
+  );
+
+  const handleLayout = useCallback(() => {
+    ref.current?.measure((_x, _y, layoutWidth, layoutHeight, pageX, pageY) => {
+      cacheLayout(pageX, pageY, layoutWidth, layoutHeight);
+    });
+  }, [cacheLayout]);
 
   const observerMethod = useCallback(
-    (visibleItems?: Set<number>, isScrolling?: boolean) => {
+    (visibleItems?: Set<number>, isScrolling?: boolean, options?: ObserveOptions) => {
       if (!observeOnScroll && isScrolling) {
         return;
       }
@@ -182,6 +266,48 @@ const useInView = <T>({
         return;
       }
 
+      const visibilityOf = (x: number, y: number, w: number, h: number) =>
+        getVisibility(
+          x,
+          y,
+          w,
+          h,
+          observerBoxRef.current,
+          threshold,
+          !!horizontal,
+          gestureHorizontallyScrollable,
+          checkFullVisibility,
+        );
+
+      const state = {
+        visibleRef,
+        timeoutVisibleRef,
+        timeoutVisibleStartRef,
+        triggerOnceValue,
+      };
+
+      const callbacks = {
+        onChange,
+        onIntersectionComplete,
+        onTimedObservationComplete,
+        triggerOnce,
+        minimumObservationTime,
+        observerMethod,
+      };
+
+      const cachedLayout = layoutRef.current;
+      if (observeWithScrollOffset && cachedLayout && options?.scrollOffset && !options.refreshLayout) {
+        const { x, y } = options.scrollOffset;
+        const visibility = visibilityOf(
+          cachedLayout.pageX - (x - cachedLayout.scrollX),
+          cachedLayout.pageY - (y - cachedLayout.scrollY),
+          cachedLayout.width,
+          cachedLayout.height,
+        );
+        handleVisibilityChange(visibility, threshold, state, callbacks);
+        return;
+      }
+
       promiseHandler.add(() => {
         return new Promise<void>((resolve) => {
           if (!ref.current) {
@@ -189,61 +315,63 @@ const useInView = <T>({
             return;
           }
           ref.current?.measure((_x, _y, width, height, pageX, pageY) => {
-            const { verticalVisibility, horizontalVisibility } = calculateVisibility(
-              pageY,
-              pageY + height,
-              height,
-              pageX,
-              pageX + width,
-              width,
-              observerBox,
-            );
-
-            const visiblePercentage = threshold[0] * 100;
-            const isVisible =
-              horizontal || gestureHorizontallyScrollable
-                ? horizontalVisibility >= visiblePercentage && verticalVisibility > 0
-                : verticalVisibility >= visiblePercentage;
-            const visibility = horizontal ? horizontalVisibility : verticalVisibility;
-
-            const totalVisibility = (horizontalVisibility * verticalVisibility) / 100;
-            const isTotalVisible = totalVisibility >= visiblePercentage;
-
-            const state = {
-              visibleRef,
-              timeoutVisibleRef,
-              timeoutVisibleStartRef,
-              triggerOnceValue,
-            };
-
-            const callbacks = {
-              onChange,
-              onIntersectionComplete,
-              onTimedObservationComplete,
-              triggerOnce,
-              minimumObservationTime,
-              observerMethod,
-            };
-            if (isTotalVisible) {
-              handleVisibilityChange(totalVisibility, threshold, state, callbacks);
-            } else if (!checkFullVisibility && isVisible) {
-              handleVisibilityChange(visibility, threshold, state, callbacks);
-            } else {
-              handleVisibilityChange(0, threshold, state, callbacks);
+            const visibility = visibilityOf(pageX, pageY, width, height);
+
+            // TODO: remove measure based logic once offset based logic is verified
+            const cached = layoutRef.current;
+            const scrollOffset = options?.scrollOffset;
+            if (cached && scrollOffset && !options?.refreshLayout) {
+              // measure resolves async, so compare against the offset at resolve time
+              const measuredAtOffset = getScrollOffset?.() ?? scrollOffset;
+              const offsetPageX = cached.pageX - (measuredAtOffset.x - cached.scrollX);
+              const offsetPageY = cached.pageY - (measuredAtOffset.y - cached.scrollY);
+              const clamp = (value: number) => Math.min(100, Math.max(0, value));
+              const measureVisibility = clamp(visibility);
+              const offsetVisibility = clamp(visibilityOf(offsetPageX, offsetPageY, cached.width, cached.height));
+              if (Math.abs(offsetVisibility - measureVisibility) > VISIBILITY_MISMATCH_TOLERANCE) {
+                const drift = { x: pageX - offsetPageX, y: pageY - offsetPageY };
+                const reasons: string[] = [];
+                if (
+                  Math.abs(width - cached.width) > PIXEL_TOLERANCE ||
+                  Math.abs(height - cached.height) > PIXEL_TOLERANCE
+                ) {
+                  reasons.push('size changed since cache: layout not refreshed');
+                }
+                if (Math.abs(drift.x) > PIXEL_TOLERANCE || Math.abs(drift.y) > PIXEL_TOLERANCE) {
+                  reasons.push('position drift not explained by own scroll: parent moved / nested scroll / sticky');
+                }
+                console.error('[useInView] offset vs measure visibility mismatch', {
+                  reasons,
+                  diff: offsetVisibility - measureVisibility,
+                  drift,
+                  listId,
+                  measure: { visibility: measureVisibility, pageX, pageY, width, height },
+                  offset: { visibility: offsetVisibility, pageX: offsetPageX, pageY: offsetPageY, measuredAtOffset },
+                  eventScrollOffset: scrollOffset,
+                  cached,
+                });
+              }
             }
+            if (options?.refreshLayout) {
+              cacheLayout(pageX, pageY, width, height);
+            }
+
+            handleVisibilityChange(visibility, threshold, state, callbacks);
             resolve();
           });
         });
       }, ref.current);
     },
     [
+      cacheLayout,
       checkFullVisibility,
       gestureHorizontallyScrollable,
+      getScrollOffset,
       horizontal,
       listId,
       minimumObservationTime,
       observeOnScroll,
-      observerBox,
+      observeWithScrollOffset,
       onChange,
       onIntersectionComplete,
       onTimedObservationComplete,
@@ -271,7 +399,7 @@ const useInView = <T>({
 
   useEffect(() => {
     setTimeout(() => {
-      observerMethod();
+      observerMethod(undefined, false, { refreshLayout: true });
     }, 400);
     return () => {
       handleUnmount();
@@ -279,7 +407,9 @@ const useInView = <T>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handleUnmount]);
 
-  return ref as InViewHookResponse<T>;
+  return { ref: ref as InViewHookResponse<T>, onLayout: handleLayout };
 };
 
+const useInView = <T>(options: IntersectionOptions): InViewHookResponse<T> => useInViewWithLayout<T>(options).ref;
+
 export default useInView;