@granite-js/react-native 1.0.31 → 1.0.33

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @granite-js/react-native
 
+## 1.0.33
+
+### Patch Changes
+
+- 39e17bb: Fix horizontal `IntersectionObserver` ratio calculation
+  - @granite-js/blur-view@1.0.33
+  - @granite-js/brownfield-module@1.0.33
+  - @granite-js/cli@1.0.33
+  - @granite-js/jest@1.0.33
+  - @granite-js/mpack@1.0.33
+  - @granite-js/native@1.0.33
+  - @granite-js/plugin-core@1.0.33
+  - @granite-js/style-utils@1.0.33
+  - @granite-js/video@1.0.33
+
+## 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

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/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.31",
+  "version": "1.0.33",
   "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.31",
+    "@granite-js/native": "1.0.33",
+    "@granite-js/vitest": "1.0.33",
     "@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.31",
+    "@granite-js/native": "1.0.33",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@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/plugin-core": "1.0.31",
-    "@granite-js/style-utils": "1.0.31",
-    "@granite-js/video": "1.0.31",
+    "@granite-js/blur-view": "1.0.33",
+    "@granite-js/brownfield-module": "1.0.33",
+    "@granite-js/cli": "1.0.33",
+    "@granite-js/jest": "1.0.33",
+    "@granite-js/mpack": "1.0.33",
+    "@granite-js/plugin-core": "1.0.33",
+    "@granite-js/style-utils": "1.0.33",
+    "@granite-js/video": "1.0.33",
     "@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

@@ -159,12 +159,12 @@ class IntersectionObserver {
           if (horizontal) {
             const visibleTargetMinX = Math.max(contentOffset.x - (rootMargin.left || 0), targetLayout.x);
             const visibleTargetMaxX = Math.min(
-              contentOffsetWithLayout + (rootMargin.left || 0),
+              contentOffsetWithLayout + (rootMargin.right || 0),
               targetLayout.x + targetLayout.width
             );
-            const visibleHeight = Math.max(visibleTargetMaxX - visibleTargetMinX, 0);
+            const visibleWidth = Math.max(visibleTargetMaxX - visibleTargetMinX, 0);
 
-            intersectionRatio = visibleHeight / targetLayout.height;
+            intersectionRatio = visibleWidth / targetLayout.width;
             isIntersecting =
               contentOffsetWithLayout + (rootMargin.right || 0) >= targetLayout.x &&
               contentOffset.x - (rootMargin.left || 0) <= targetLayout.x + targetLayout.width;

package/src/router/Router.tsx

@@ -65,6 +65,7 @@ export interface InternalRouterProps {
   initialProps: InitialProps;
   initialScheme: string;
   setIosSwipeGestureEnabled?: ({ isEnabled }: { isEnabled: boolean }) => Promise<void> | void;
+  setiOSBackPressHandler?: ({ handler }: { handler: () => void }) => Promise<void> | void;
   getInitialUrl?: RouterControlsConfig['getInitialUrl'];
 }
 
@@ -148,6 +149,7 @@ export function Router({
   defaultErrorComponent,
   // Public props (StackNavigator)
   setIosSwipeGestureEnabled,
+  setiOSBackPressHandler,
   getInitialUrl,
   ...navigationContainerProps
 }: InternalRouterProps & RouterProps): ReactElement {
@@ -162,7 +164,7 @@ export function Router({
 
   const ref = useMemo(() => navigationContainerRef ?? createNavigationContainerRef<never>(), [navigationContainerRef]);
 
-  const { handler, canGoBack, onBack } = useInternalRouterBackHandler({
+  const { handler, handleBackEvent, canGoBack, hasBackEvent } = useInternalRouterBackHandler({
     navigationContainerRef: ref,
     onClose: closeView,
   });
@@ -195,9 +197,11 @@ export function Router({
     >
       <CanGoBackGuard
         canGoBack={canGoBack}
+        hasBackEvent={hasBackEvent}
         isInitialScreen={isInitialScreen}
-        onBack={onBack}
+        onBack={handleBackEvent}
         setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
+        setiOSBackPressHandler={setiOSBackPressHandler}
       >
         <Container {...initialProps}>
           <StackNavigator.Navigator screenOptions={screenOptions}>{Screens}</StackNavigator.Navigator>

package/src/router/components/CanGoBackGuard.spec.tsx

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react';
+import { BackHandler } from 'react-native';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CanGoBackGuard } from './CanGoBackGuard';
+
+describe('CanGoBackGuard', () => {
+  beforeEach(() => {
+    vi.mocked(BackHandler.addEventListener).mockClear();
+  });
+
+  it('passes Android hardware back events to onBack and consumes the native event', () => {
+    const onBack = vi.fn();
+
+    render(
+      <CanGoBackGuard canGoBack={false} hasBackEvent={true} isInitialScreen={true} onBack={onBack}>
+        <div />
+      </CanGoBackGuard>
+    );
+
+    const handler = vi.mocked(BackHandler.addEventListener).mock.calls[0]?.[1];
+
+    expect(BackHandler.addEventListener).toHaveBeenCalledWith('hardwareBackPress', expect.any(Function));
+    expect(handler?.()).toBe(true);
+    expect(onBack).toHaveBeenCalledWith({ source: 'androidHardwareBackPress' });
+  });
+
+  it('does not register Android hardware back when no back event exists', () => {
+    const onBack = vi.fn();
+
+    render(
+      <CanGoBackGuard canGoBack={true} hasBackEvent={false} isInitialScreen={true} onBack={onBack}>
+        <div />
+      </CanGoBackGuard>
+    );
+
+    expect(BackHandler.addEventListener).not.toHaveBeenCalled();
+  });
+
+  it('registers the iOS swipe back handler while back events exist', () => {
+    const onBack = vi.fn();
+    const setiOSBackPressHandler = vi.fn();
+
+    const { unmount } = render(
+      <CanGoBackGuard
+        canGoBack={true}
+        hasBackEvent={true}
+        isInitialScreen={true}
+        onBack={onBack}
+        setiOSBackPressHandler={setiOSBackPressHandler}
+      >
+        <div />
+      </CanGoBackGuard>
+    );
+
+    setiOSBackPressHandler.mock.calls[0]?.[0].handler();
+
+    expect(setiOSBackPressHandler).toHaveBeenCalledWith({ handler: expect.any(Function) });
+    expect(onBack).toHaveBeenCalledWith({ source: 'iosSwipeGesture' });
+
+    unmount();
+
+    expect(setiOSBackPressHandler).toHaveBeenLastCalledWith({ handler: expect.any(Function) });
+  });
+
+  it('disables iOS swipe when the current state should block default back navigation', () => {
+    const setIosSwipeGestureEnabled = vi.fn();
+
+    const { unmount } = render(
+      <CanGoBackGuard
+        canGoBack={false}
+        hasBackEvent={true}
+        isInitialScreen={true}
+        setIosSwipeGestureEnabled={setIosSwipeGestureEnabled}
+      >
+        <div />
+      </CanGoBackGuard>
+    );
+
+    expect(setIosSwipeGestureEnabled).toHaveBeenCalledWith({ isEnabled: false });
+
+    unmount();
+
+    expect(setIosSwipeGestureEnabled).toHaveBeenLastCalledWith({ isEnabled: true });
+  });
+});

package/src/router/components/CanGoBackGuard.tsx

@@ -1,21 +1,27 @@
 import { ReactNode, useEffect } from 'react';
 import { BackHandler } from 'react-native';
+import type { BackEvent } from '../../use-back-event';
+
+type SetIosSwipeGestureEnabled = ({ isEnabled }: { isEnabled: boolean }) => Promise<void> | void;
+type SetIOSBackPressHandler = ({ handler }: { handler: () => void }) => Promise<void> | void;
 
 export 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;
 }) {
-  const shouldBlockGoingBack = !canGoBack;
-
   useEffect(() => {
     if (!isInitialScreen || !canGoBack) {
       setIosSwipeGestureEnabled?.({ isEnabled: false });
@@ -29,19 +35,36 @@ export function CanGoBackGuard({
   }, [canGoBack, isInitialScreen, setIosSwipeGestureEnabled]);
 
   useEffect(() => {
-    if (shouldBlockGoingBack) {
-      const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
-        onBack?.();
-        return true;
-      });
+    if (!hasBackEvent) {
+      return;
+    }
 
-      return () => {
-        subscription.remove();
-      };
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      onBack?.({ source: 'androidHardwareBackPress' });
+
+      return true;
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [hasBackEvent, onBack]);
+
+  useEffect(() => {
+    if (!hasBackEvent || setiOSBackPressHandler == null) {
+      return;
     }
 
-    return;
-  }, [shouldBlockGoingBack, onBack]);
+    setiOSBackPressHandler({
+      handler: () => {
+        onBack?.({ source: 'iosSwipeGesture' });
+      },
+    });
+
+    return () => {
+      setiOSBackPressHandler({ handler: () => {} });
+    };
+  }, [hasBackEvent, onBack, setiOSBackPressHandler]);
 
   return <>{children}</>;
 }