@granite-js/react-native 1.0.30 → 1.0.32

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @granite-js/react-native
 
+## 1.0.32
+
+### Patch Changes
+
+- 20f2781: add opt-in back handler API
+  - @granite-js/blur-view@1.0.32
+  - @granite-js/brownfield-module@1.0.32
+  - @granite-js/cli@1.0.32
+  - @granite-js/jest@1.0.32
+  - @granite-js/mpack@1.0.32
+  - @granite-js/native@1.0.32
+  - @granite-js/plugin-core@1.0.32
+  - @granite-js/style-utils@1.0.32
+  - @granite-js/video@1.0.32
+
+## 1.0.31
+
+### Patch Changes
+
+- f8aee14: fix: impression area debounced handlers
+  - @granite-js/blur-view@1.0.31
+  - @granite-js/brownfield-module@1.0.31
+  - @granite-js/cli@1.0.31
+  - @granite-js/jest@1.0.31
+  - @granite-js/mpack@1.0.31
+  - @granite-js/native@1.0.31
+  - @granite-js/plugin-core@1.0.31
+  - @granite-js/style-utils@1.0.31
+  - @granite-js/video@1.0.31
+
 ## 1.0.30
 
 ### Patch Changes

package/dist/app/AppRoot.d.ts

@@ -1 +1 @@
-export declare function AppRoot({ appName, context, container: Container, initialProps, initialScheme, router, setIosSwipeGestureEnabled, getInitialUrl, }: AppRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppRoot({ appName, context, container: Container, initialProps, initialScheme, router, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl, }: AppRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/app/Granite.d.ts

@@ -31,6 +31,13 @@ export interface GraniteProps {
     setIosSwipeGestureEnabled?: ({ isEnabled }: {
         isEnabled: boolean;
     }) => void;
+    /**
+     * @description
+     * The function to register a handler that runs when the iOS swipe back gesture is detected.
+     */
+    setiOSBackPressHandler?: ({ handler }: {
+        handler: () => void;
+    }) => Promise<void> | void;
     /**
      * @description
      * The function to provide the initial URL to router.
@@ -74,7 +81,7 @@ export interface GraniteProps {
  * ```
  */
 export declare const Granite: {
-    registerApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName, context, router, initialScheme, setIosSwipeGestureEnabled, getInitialUrl }: GraniteProps): (initialProps: InitialProps) => JSX.Element;
+    registerApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName, context, router, initialScheme, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl }: GraniteProps): (initialProps: InitialProps) => JSX.Element;
     registerHostApp(AppContainer: ComponentType<PropsWithChildren<InitialProps>>, { appName }: Pick<GraniteProps, "appName">): (initialProps: InitialProps) => React.JSX.Element;
     readonly appName: string;
 };

package/dist/intersection-observer/IntersectionObserver.d.ts

@@ -39,11 +39,13 @@ export interface IntersectionObserverOptions {
      */
     root: Root;
     rootMargin?: RootMargin;
-    threshold?: number | number[];
+    onLayoutThreshold?: number;
+    onScrollThreshold?: number;
 }
 export type IntersectionObserverCallback = (entries: IntersectionObserverEntry[]) => void;
 export declare const defaultRootMargin: RootMargin;
-export declare const defaultThreshold = 0;
+export declare const defaultOnLayoutThreshold = 300;
+export declare const defaultOnScrollThreshold = 100;
 /**
  * @kind class
  * @name IntersectionObserver
@@ -57,10 +59,12 @@ declare class IntersectionObserver {
     protected callback: IntersectionObserverCallback;
     protected options: IntersectionObserverOptions;
     protected targets: Element[];
+    protected onLayoutHandler: () => void;
+    protected onScrollHandler: () => void;
     constructor(callback: IntersectionObserverCallback, options: IntersectionObserverOptions);
     protected measureTarget: (target: Element) => void;
-    protected handleLayout: () => void;
-    protected handleScroll: () => void;
+    protected createOnLayoutHandler(): () => void;
+    protected createOnScrollHandler(): import("es-toolkit").ThrottledFunction<() => void>;
     observe(target: Element): void;
     unobserve(target: Element): void;
 }

package/dist/intersection-observer/withIO.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps } from 'react';
 import { ScrollView } from 'react-native';
-import { RootMargin } from './IntersectionObserver';
+import type { IntersectionObserverOptions, RootMargin } from './IntersectionObserver';
 export interface IOComponentProps {
     rootMargin?: RootMargin;
 }
@@ -16,5 +16,5 @@ export interface IOComponentProps {
  * @param {string[]} [methods] - List of event handler names from BaseComponent to be bound.
  * @returns {React.ComponentType} - Returns a wrapped component that can use Intersection Observer functionality.
  */
-declare function withIO<CompProps extends Pick<ComponentProps<typeof ScrollView>, 'horizontal' | 'scrollEventThrottle' | 'onContentSizeChange' | 'onLayout' | 'onScroll'>>(BaseComponent: React.ComponentType<CompProps>, methods: string[]): typeof BaseComponent;
+declare function withIO<CompProps extends Pick<ComponentProps<typeof ScrollView>, 'horizontal' | 'scrollEventThrottle' | 'onContentSizeChange' | 'onLayout' | 'onScroll'>>(BaseComponent: React.ComponentType<CompProps>, methods: string[], options?: Omit<IntersectionObserverOptions, 'root' | 'rootMargin'>): typeof BaseComponent;
 export default withIO;

package/dist/router/Router.d.ts

@@ -63,5 +63,5 @@ type NavigationContainerProps = Pick<ComponentProps<typeof NavigationContainer>,
  * }
  * ```
  */
-export declare function Router({ prefix, context, container: Container, initialProps, initialScheme, navigationContainerRef, defaultScreenOption, screenContainer, defaultErrorComponent, setIosSwipeGestureEnabled, getInitialUrl, ...navigationContainerProps }: InternalRouterProps & RouterProps): ReactElement;
+export declare function Router({ prefix, context, container: Container, initialProps, initialScheme, navigationContainerRef, defaultScreenOption, screenContainer, defaultErrorComponent, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl, ...navigationContainerProps }: InternalRouterProps & RouterProps): ReactElement;
 export {};

package/dist/router/components/CanGoBackGuard.d.ts

@@ -1,10 +1,18 @@
 import { ReactNode } from 'react';
-export declare function CanGoBackGuard({ children, canGoBack, onBack, isInitialScreen, setIosSwipeGestureEnabled, }: {
+import type { BackEvent } from '../../use-back-event';
+type SetIosSwipeGestureEnabled = ({ isEnabled }: {
+    isEnabled: boolean;
+}) => Promise<void> | void;
+type SetIOSBackPressHandler = ({ handler }: {
+    handler: () => void;
+}) => Promise<void> | void;
+export declare function CanGoBackGuard({ children, canGoBack, hasBackEvent, onBack, isInitialScreen, setIosSwipeGestureEnabled, setiOSBackPressHandler, }: {
     canGoBack: boolean;
+    hasBackEvent: boolean;
     isInitialScreen: boolean;
     children: ReactNode;
-    onBack?: () => void;
-    setIosSwipeGestureEnabled?: ({ isEnabled }: {
-        isEnabled: boolean;
-    }) => void;
+    onBack?: (event: BackEvent) => void;
+    setIosSwipeGestureEnabled?: SetIosSwipeGestureEnabled;
+    setiOSBackPressHandler?: SetIOSBackPressHandler;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/router/components/useRouterBackHandler.d.ts

@@ -1,4 +1,5 @@
-import { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-navigation/native';
+import type { NavigationContainerRefWithCurrent } from '@granite-js/native/@react-navigation/native';
+import type { BackEvent } from '../../use-back-event';
 /**
  * @public
  * @name useRouterBackHandler
@@ -52,6 +53,8 @@ export declare function useInternalRouterBackHandler({ navigationContainerRef, o
     onClose?: () => void;
 }): {
     handler: () => void;
+    handleBackEvent: (event: BackEvent) => void;
     canGoBack: boolean;
+    hasBackEvent: boolean;
     onBack: () => void;
 };

package/dist/use-back-event/BackEventContext.d.ts

@@ -0,0 +1,15 @@
+import type { BackEvent, BackEventControls, BackEventHandler } from './useBackEvent';
+import type { BackHandlerCallback, BackHandlerControls } from './useBackHandler';
+export interface PrivateBackEventControls extends BackEventControls {
+    handlersRef: Set<BackEventHandler>;
+    hasBackEvent: boolean;
+    hasBackHandler: boolean;
+    addBackHandler: BackHandlerControls['addEventListener'];
+    removeBackHandler: (...handlers: Array<BackHandlerCallback>) => void;
+    onBack: () => void;
+    onBackHandler: (event: BackEvent) => boolean;
+}
+export type BackEventActionsContextValue = Omit<PrivateBackEventControls, 'handlersRef' | 'hasBackEvent' | 'hasBackHandler'>;
+export type BackEventStateContextValue = Pick<PrivateBackEventControls, 'handlersRef' | 'hasBackEvent' | 'hasBackHandler'>;
+export declare const BackEventActionsContext: import("react").Context<BackEventActionsContextValue | null>;
+export declare const BackEventStateContext: import("react").Context<BackEventStateContextValue | null>;

package/dist/use-back-event/index.d.ts

@@ -1 +1,2 @@
 export * from './useBackEvent';
+export * from './useBackHandler';

package/dist/use-back-event/useBackEvent.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
-export interface BackEventControls {
-    addEventListener: (...handlers: Array<() => void>) => void;
-    removeEventListener: (...handlers: Array<() => void>) => void;
+import { type PrivateBackEventControls } from './BackEventContext';
+export type BackEventSource = 'backButton' | 'iosSwipeGesture' | 'androidHardwareBackPress';
+export interface BackEvent {
+    source: BackEventSource;
 }
-interface PrivateBackEventControls extends BackEventControls {
-    handlersRef: Set<() => void>;
-    hasBackEvent: boolean;
-    onBack: () => void;
+export type BackEventHandler = () => void;
+export interface BackEventControls {
+    addEventListener: (...handlers: Array<BackEventHandler>) => void;
+    removeEventListener: (...handlers: Array<BackEventHandler>) => void;
 }
 /**
  * @component
@@ -127,5 +128,3 @@ export declare function useBackEventState(): PrivateBackEventControls;
  * ```
  */
 export declare function useBackEvent(): BackEventControls;
-export declare function useBackEventContext(): PrivateBackEventControls;
-export {};

package/dist/use-back-event/useBackEventActionsContext.d.ts

@@ -0,0 +1 @@
+export declare function useBackEventActionsContext(): import("./BackEventContext").BackEventActionsContextValue;

package/dist/use-back-event/useBackEventContext.d.ts

@@ -0,0 +1,2 @@
+import { type PrivateBackEventControls } from './BackEventContext';
+export declare function useBackEventContext(): PrivateBackEventControls;

package/dist/use-back-event/useBackHandler.d.ts

@@ -0,0 +1,53 @@
+import type { BackEvent } from './useBackEvent';
+export type BackHandlerCallback = (event: BackEvent) => boolean | void;
+export interface BackHandlerSubscription {
+    remove: () => void;
+}
+export interface BackHandlerControls {
+    addEventListener: (handler: BackHandlerCallback) => BackHandlerSubscription;
+}
+/**
+ * @public
+ * @category Screen Control
+ * @name useBackHandler
+ * @description
+ * A Hook that registers back handlers. Back handlers run before handlers registered through `useBackEvent`.
+ * Return `true` to stop bubbling and prevent default back navigation. Return `false` or return nothing to continue bubbling to the next handler.
+ *
+ * @example
+ *
+ * ### Example of Closing an Overlay First
+ *
+ * ```tsx
+ * import { useEffect, useState } from 'react';
+ * import { Button, View } from 'react-native';
+ * import { useBackHandler } from '@granite-js/react-native';
+ *
+ * export function OverlayExample() {
+ *   const backHandler = useBackHandler();
+ *   const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+ *
+ *   useEffect(() => {
+ *     const subscription = backHandler.addEventListener(() => {
+ *       if (isOverlayOpen) {
+ *         setIsOverlayOpen(false);
+ *         return true;
+ *       }
+ *
+ *       return undefined;
+ *     });
+ *
+ *     return () => {
+ *       subscription.remove();
+ *     };
+ *   }, [backHandler, isOverlayOpen]);
+ *
+ *   return (
+ *     <View>
+ *       <Button title="Open Overlay" onPress={() => setIsOverlayOpen(true)} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export declare function useBackHandler(): BackHandlerControls;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -91,7 +91,8 @@
     "@babel/core": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@granite-js/native": "1.0.30",
+    "@granite-js/native": "1.0.32",
+    "@granite-js/vitest": "1.0.32",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -113,21 +114,21 @@
     "zod": "^4.1.12"
   },
   "peerDependencies": {
-    "@granite-js/native": "1.0.30",
+    "@granite-js/native": "1.0.32",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/blur-view": "1.0.30",
-    "@granite-js/brownfield-module": "1.0.30",
-    "@granite-js/cli": "1.0.30",
-    "@granite-js/jest": "1.0.30",
-    "@granite-js/mpack": "1.0.30",
-    "@granite-js/plugin-core": "1.0.30",
-    "@granite-js/style-utils": "1.0.30",
-    "@granite-js/video": "1.0.30",
+    "@granite-js/blur-view": "1.0.32",
+    "@granite-js/brownfield-module": "1.0.32",
+    "@granite-js/cli": "1.0.32",
+    "@granite-js/jest": "1.0.32",
+    "@granite-js/mpack": "1.0.32",
+    "@granite-js/plugin-core": "1.0.32",
+    "@granite-js/style-utils": "1.0.32",
+    "@granite-js/video": "1.0.32",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

package/src/app/AppRoot.tsx

@@ -16,6 +16,7 @@ interface AppRootProps extends GraniteProps {
   initialProps: InitialProps;
   initialScheme: string;
   setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => void;
+  setiOSBackPressHandler?: ({ handler }: { handler: () => void }) => Promise<void> | void;
   getInitialUrl: InternalRouterProps['getInitialUrl'];
 }
 
@@ -27,6 +28,7 @@ export function AppRoot({
   initialScheme,
   router,
   setIosSwipeGestureEnabled,
+  setiOSBackPressHandler,
   getInitialUrl,
 }: AppRootProps) {
   const prefix = getSchemePrefix({
@@ -47,6 +49,7 @@ export function AppRoot({
               container={Container}
               prefix={prefix}
               setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
+              setiOSBackPressHandler={setiOSBackPressHandler}
               getInitialUrl={getInitialUrl}
               {...router}
             />

package/src/app/Granite.tsx

@@ -39,6 +39,12 @@ export interface GraniteProps {
    */
   setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => void;
 
+  /**
+   * @description
+   * The function to register a handler that runs when the iOS swipe back gesture is detected.
+   */
+  setiOSBackPressHandler?: ({ handler }: { handler: () => void }) => Promise<void> | void;
+
   /**
    * @description
    * The function to provide the initial URL to router.
@@ -65,7 +71,7 @@ const createApp = () => {
   return {
     registerApp( 
       AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
-      { appName, context, router, initialScheme, setIosSwipeGestureEnabled, getInitialUrl }: GraniteProps
+      { appName, context, router, initialScheme, setIosSwipeGestureEnabled, setiOSBackPressHandler, getInitialUrl }: GraniteProps
     ): (initialProps: InitialProps) => JSX.Element {
       if (appName === ENTRY_BUNDLE_NAME) {
         throw new Error(`Reserved app name 'shared' cannot be used`);
@@ -80,6 +86,7 @@ const createApp = () => {
             initialProps={initialProps}
             initialScheme={initialSchemeValue}
             setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
+            setiOSBackPressHandler={setiOSBackPressHandler}
             getInitialUrl={getInitialUrl}
             appName={appName}
             context={context}

package/src/intersection-observer/IntersectionObserver.ts

@@ -45,7 +45,8 @@ export interface IntersectionObserverOptions {
    */
   root: Root;
   rootMargin?: RootMargin;
-  threshold?: number | number[];
+  onLayoutThreshold?: number;
+  onScrollThreshold?: number;
 }
 
 export type IntersectionObserverCallback = (entries: IntersectionObserverEntry[]) => void;
@@ -57,7 +58,8 @@ export const defaultRootMargin: RootMargin = {
   bottom: 0,
 };
 
-export const defaultThreshold = 0;
+export const defaultOnLayoutThreshold = 300;
+export const defaultOnScrollThreshold = 100;
 
 /**
  * @kind class
@@ -72,13 +74,15 @@ class IntersectionObserver {
   protected callback: IntersectionObserverCallback;
   protected options: IntersectionObserverOptions;
   protected targets: Element[];
+  protected onLayoutHandler: () => void;
+  protected onScrollHandler: () => void;
 
   constructor(callback: IntersectionObserverCallback, options: IntersectionObserverOptions) {
     this.callback = callback;
     this.options = options;
     this.targets = [];
-    this.options.root.onLayout = this.handleLayout;
-    this.options.root.onScroll = this.handleScroll;
+    this.onLayoutHandler = this.options.root.onLayout = this.createOnLayoutHandler();
+    this.onScrollHandler = this.options.root.onScroll = this.createOnScrollHandler();
   }
 
   protected measureTarget = (target: Element) => {
@@ -91,111 +95,117 @@ class IntersectionObserver {
           width,
           height,
         };
-        this.handleScroll();
+        this.onScrollHandler();
       });
     }
   };
 
-  protected handleLayout = throttle(
-    () => {
-      for (let index = 0; index < this.targets.length; index += 1) {
-        const target = this.targets[index];
+  protected createOnLayoutHandler(): () => void {
+    const onLayoutThreshold = this.options?.onLayoutThreshold || defaultOnLayoutThreshold;
+    return throttle(
+      () => {
+        for (let index = 0; index < this.targets.length; index += 1) {
+          const target = this.targets[index];
 
-        if (target != null) {
-          this.measureTarget(target);
-        }
-      }
-    },
-    300,
-    { edges: ['trailing'] }
-  ) as () => void;
-
-  protected handleScroll = throttle(
-    () => {
-      const rootMargin = this.options?.rootMargin || defaultRootMargin;
-
-      const {
-        horizontal,
-        current: { contentOffset, contentSize, layoutMeasurement },
-      } = this.options.root;
-      if (
-        contentSize.width <= 0 ||
-        contentSize.height <= 0 ||
-        layoutMeasurement.width <= 0 ||
-        layoutMeasurement.height <= 0
-      ) {
-        return;
-      }
-      const contentOffsetWithLayout = horizontal
-        ? contentOffset.x + layoutMeasurement.width
-        : contentOffset.y + layoutMeasurement.height;
-      const changedTargets: IntersectionObserverEntry[] = [];
-      for (let index = 0; index < this.targets.length; index += 1) {
-        const target = this.targets[index];
-
-        if (target == null) {
-          continue;
-        }
-
-        const targetLayout = target.layout;
-        if (!targetLayout || targetLayout.width === 0 || targetLayout.height === 0) {
-          continue;
+          if (target != null) {
+            this.measureTarget(target);
+          }
         }
+      },
+      onLayoutThreshold,
+      { edges: ['leading', 'trailing'] }
+    );
+  }
 
-        const previousIntersectionRatio = target.intersectionRatio;
-
-        let isIntersecting = false;
-        let intersectionRatio = previousIntersectionRatio;
-
-        if (horizontal) {
-          const visibleTargetMinX = Math.max(contentOffset.x - (rootMargin.left || 0), targetLayout.x);
-          const visibleTargetMaxX = Math.min(
-            contentOffsetWithLayout + (rootMargin.left || 0),
-            targetLayout.x + targetLayout.width
-          );
-          const visibleHeight = Math.max(visibleTargetMaxX - visibleTargetMinX, 0);
-
-          intersectionRatio = visibleHeight / targetLayout.height;
-          isIntersecting =
-            contentOffsetWithLayout + (rootMargin.right || 0) >= targetLayout.x &&
-            contentOffset.x - (rootMargin.left || 0) <= targetLayout.x + targetLayout.width;
-        } else {
-          const visibleTargetMinY = Math.max(contentOffset.y - (rootMargin.top || 0), targetLayout.y);
-          const visibleTargetMaxY = Math.min(
-            contentOffsetWithLayout + (rootMargin.bottom || 0),
-            targetLayout.y + targetLayout.height
-          );
-          const visibleHeight = Math.max(visibleTargetMaxY - visibleTargetMinY, 0);
-
-          intersectionRatio = visibleHeight / targetLayout.height;
-          isIntersecting =
-            contentOffsetWithLayout + (rootMargin.bottom || 0) >= targetLayout.y &&
-            contentOffset.y - (rootMargin.top || 0) <= targetLayout.y + targetLayout.height;
+  protected createOnScrollHandler() {
+    const onScrollThreshold = this.options?.onScrollThreshold || defaultOnScrollThreshold;
+    return throttle(
+      () => {
+        const rootMargin = this.options?.rootMargin || defaultRootMargin;
+
+        const {
+          horizontal,
+          current: { contentOffset, contentSize, layoutMeasurement },
+        } = this.options.root;
+        if (
+          contentSize.width <= 0 ||
+          contentSize.height <= 0 ||
+          layoutMeasurement.width <= 0 ||
+          layoutMeasurement.height <= 0
+        ) {
+          return;
         }
-
-        intersectionRatio = Math.floor(intersectionRatio * 100) / 100;
-
-        if (target.inView !== isIntersecting || target.intersectionRatio !== intersectionRatio) {
-          target.inView = isIntersecting;
-          target.intersectionRatio = intersectionRatio;
-
-          changedTargets.push({
-            target,
-            isIntersecting,
-            intersectionRatio,
-          });
+        const contentOffsetWithLayout = horizontal
+          ? contentOffset.x + layoutMeasurement.width
+          : contentOffset.y + layoutMeasurement.height;
+        const changedTargets: IntersectionObserverEntry[] = [];
+        for (let index = 0; index < this.targets.length; index += 1) {
+          const target = this.targets[index];
+
+          if (target == null) {
+            continue;
+          }
+
+          const targetLayout = target.layout;
+          if (!targetLayout || targetLayout.width === 0 || targetLayout.height === 0) {
+            continue;
+          }
+
+          const previousIntersectionRatio = target.intersectionRatio;
+
+          let isIntersecting = false;
+          let intersectionRatio = previousIntersectionRatio;
+
+          if (horizontal) {
+            const visibleTargetMinX = Math.max(contentOffset.x - (rootMargin.left || 0), targetLayout.x);
+            const visibleTargetMaxX = Math.min(
+              contentOffsetWithLayout + (rootMargin.left || 0),
+              targetLayout.x + targetLayout.width
+            );
+            const visibleHeight = Math.max(visibleTargetMaxX - visibleTargetMinX, 0);
+
+            intersectionRatio = visibleHeight / targetLayout.height;
+            isIntersecting =
+              contentOffsetWithLayout + (rootMargin.right || 0) >= targetLayout.x &&
+              contentOffset.x - (rootMargin.left || 0) <= targetLayout.x + targetLayout.width;
+          } else {
+            const visibleTargetMinY = Math.max(contentOffset.y - (rootMargin.top || 0), targetLayout.y);
+            const visibleTargetMaxY = Math.min(
+              contentOffsetWithLayout + (rootMargin.bottom || 0),
+              targetLayout.y + targetLayout.height
+            );
+            const visibleHeight = Math.max(visibleTargetMaxY - visibleTargetMinY, 0);
+
+            intersectionRatio = visibleHeight / targetLayout.height;
+            isIntersecting =
+              contentOffsetWithLayout + (rootMargin.bottom || 0) >= targetLayout.y &&
+              contentOffset.y - (rootMargin.top || 0) <= targetLayout.y + targetLayout.height;
+          }
+
+          intersectionRatio = Math.floor(intersectionRatio * 100) / 100;
+
+          if (target.inView !== isIntersecting || target.intersectionRatio !== intersectionRatio) {
+            target.inView = isIntersecting;
+            target.intersectionRatio = intersectionRatio;
+
+            changedTargets.push({
+              target,
+              isIntersecting,
+              intersectionRatio,
+            });
+          }
         }
-      }
-      this.callback(changedTargets);
-    },
-    100,
-    { edges: ['trailing'] }
-  ) as () => void;
+        this.callback(changedTargets);
+      },
+      onScrollThreshold,
+      { edges: ['leading', 'trailing'] }
+    );
+  }
 
   public observe(target: Element) {
     const index = this.targets.indexOf(target);
     if (index < 0) {
-      target.onLayout = this.handleLayout;
+      target.onLayout = this.onLayoutHandler;
       this.targets.push(target);
     }
   }

package/src/intersection-observer/withIO.tsx

@@ -2,7 +2,7 @@ import { type ComponentProps, PureComponent, RefObject, createRef } from 'react'
 import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, View } from 'react-native';
 import IOContext, { IOContextValue } from './IOContext';
 import IOManager from './IOManager';
-import { Root, RootMargin } from './IntersectionObserver';
+import type { IntersectionObserverOptions, Root, RootMargin } from './IntersectionObserver';
 
 export interface IOComponentProps {
   rootMargin?: RootMargin;
@@ -25,7 +25,11 @@ function withIO<
     ComponentProps<typeof ScrollView>,
     'horizontal' | 'scrollEventThrottle' | 'onContentSizeChange' | 'onLayout' | 'onScroll'
   >,
->(BaseComponent: React.ComponentType<CompProps>, methods: string[]) {
+>(
+  BaseComponent: React.ComponentType<CompProps>,
+  methods: string[],
+  options?: Omit<IntersectionObserverOptions, 'root' | 'rootMargin'>
+) {
   type ScrollableComponentProps = CompProps & IOComponentProps;
   const IOScrollableComponent = class extends PureComponent<ScrollableComponentProps> {
     protected node: any;
@@ -75,6 +79,7 @@ function withIO<
         get rootMargin() {
           return self.props.rootMargin;
         },
+        ...options,
       });
       this.manager = manager;
       this.contextValue = {