@cleartrip/ct-design-intersection-observer 5.32.0-SNAPSHOT-fix-intersection-observer-v1.0 → 5.32.0-SNAPSHOT-native-main.0

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,CAqD7D,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,CAyC7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/type.d.ts

@@ -12,7 +12,6 @@ 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;IAK1B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAMlC,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;IAM1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/useInViewType.d.ts

@@ -23,7 +23,6 @@ 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;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"}
+{"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"}

package/dist/useinView.native.d.ts

@@ -1,8 +1,4 @@
 import { IntersectionOptions, InViewHookResponse } from './useInViewType';
-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>;
+declare const useInView: <T>({ threshold, timedThreshold, onChange, onIntersectionComplete, onTimedObservationComplete, minimumObservationTime, observerBox, gestureHorizontallyScrollable, triggerOnce, observeOnScroll, onUnmount, checkFullVisibility, }: 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":"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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-intersection-observer",
-  "version": "5.32.0-SNAPSHOT-fix-intersection-observer-v1.0",
+  "version": "5.32.0-SNAPSHOT-native-main.0",
   "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.32.0-SNAPSHOT-fix-intersection-observer-v1.0",
-    "@cleartrip/ct-design-container": "5.32.0-SNAPSHOT-fix-intersection-observer-v1.0",
-    "@cleartrip/ct-design-style-manager": "5.31.1-SNAPSHOT-fix-intersection-observer-v1.0",
-    "@cleartrip/ct-design-theme": "5.32.0-SNAPSHOT-fix-intersection-observer-v1.0",
-    "@cleartrip/ct-design-list": "5.32.0-SNAPSHOT-fix-intersection-observer-v1.0",
-    "@cleartrip/ct-design-common-utils": "5.31.1-SNAPSHOT-fix-intersection-observer-v1.0"
+    "@cleartrip/ct-design-scroll-container": "5.32.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-container": "5.32.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-theme": "5.32.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-style-manager": "5.31.1-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-list": "5.32.0-SNAPSHOT-native-main.0",
+    "@cleartrip/ct-design-common-utils": "5.31.1-SNAPSHOT-native-main.0"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-types": "5.32.0-SNAPSHOT-fix-intersection-observer-v1.0"
+    "@cleartrip/ct-design-types": "5.32.0-SNAPSHOT-native-main.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/IntersectionObserver.native.tsx

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

package/src/type.ts

@@ -41,11 +41,6 @@ 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,12 +78,6 @@ 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,12 +1,7 @@
-import { RefObject, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { Dimensions, View } from 'react-native';
-import {
-  ObserveOptions,
-  useAddObservableChild,
-  useGetScrollOffset,
-  useGetScrolling,
-} from '@cleartrip/ct-design-scroll-container';
+import { useAddObservableChild, useGetScrolling } from '@cleartrip/ct-design-scroll-container';
 import { useListItem } from '@cleartrip/ct-design-list';
 import { promiseHandler } from '@cleartrip/ct-design-common-utils';
 
@@ -19,27 +14,12 @@ const { width, height } = Dimensions.get('window');
  */
 
 interface VisibilityState {
-  visibleRef: RefObject<number>;
-  timeoutVisibleRef: RefObject<boolean>;
-  timeoutVisibleStartRef: RefObject<{ start: number; end: number }>;
-  triggerOnceValue: RefObject<boolean>;
+  visibleRef: React.MutableRefObject<number>;
+  timeoutVisibleRef: React.MutableRefObject<boolean>;
+  timeoutVisibleStartRef: React.MutableRefObject<{ start: number; end: number }>;
+  triggerOnceValue: React.MutableRefObject<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,
@@ -86,47 +66,6 @@ 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[],
@@ -196,7 +135,7 @@ const handleVisibilityChange = (
   }
 };
 
-export const useInViewWithLayout = <T>({
+const useInView = <T>({
   threshold = [0.01, 0.5],
   timedThreshold = 1000,
   onChange,
@@ -209,13 +148,8 @@ export const useInViewWithLayout = <T>({
   observeOnScroll = false,
   onUnmount,
   checkFullVisibility = false,
-  observeWithScrollOffset = false,
-}: IntersectionOptions): { ref: InViewHookResponse<T>; onLayout: () => void } => {
+}: IntersectionOptions): InViewHookResponse<T> => {
   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 });
@@ -223,27 +157,9 @@ export const useInViewWithLayout = <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, options?: ObserveOptions) => {
+    (visibleItems?: Set<number>, isScrolling?: boolean) => {
       if (!observeOnScroll && isScrolling) {
         return;
       }
@@ -266,48 +182,6 @@ export const useInViewWithLayout = <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) {
@@ -315,63 +189,61 @@ export const useInViewWithLayout = <T>({
             return;
           }
           ref.current?.measure((_x, _y, width, height, pageX, pageY) => {
-            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,
-                });
-              }
+            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);
             }
-            if (options?.refreshLayout) {
-              cacheLayout(pageX, pageY, width, height);
-            }
-
-            handleVisibilityChange(visibility, threshold, state, callbacks);
             resolve();
           });
         });
       }, ref.current);
     },
     [
-      cacheLayout,
       checkFullVisibility,
       gestureHorizontallyScrollable,
-      getScrollOffset,
       horizontal,
       listId,
       minimumObservationTime,
       observeOnScroll,
-      observeWithScrollOffset,
+      observerBox,
       onChange,
       onIntersectionComplete,
       onTimedObservationComplete,
@@ -399,7 +271,7 @@ export const useInViewWithLayout = <T>({
 
   useEffect(() => {
     setTimeout(() => {
-      observerMethod(undefined, false, { refreshLayout: true });
+      observerMethod();
     }, 400);
     return () => {
       handleUnmount();
@@ -407,9 +279,7 @@ export const useInViewWithLayout = <T>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handleUnmount]);
 
-  return { ref: ref as InViewHookResponse<T>, onLayout: handleLayout };
+  return ref as InViewHookResponse<T>;
 };
 
-const useInView = <T>(options: IntersectionOptions): InViewHookResponse<T> => useInViewWithLayout<T>(options).ref;
-
 export default useInView;