@granite-js/react-native 3.0.5 → 3.0.7

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @granite-js/react-native
 
+## 3.0.7
+
+### Patch Changes
+
+- dcd6832: Handle iOS accessibility escape gestures through the router's registered back handlers and expose `accessibilityEscape` as a back event source.
+  - @granite-js/blur-view@3.0.7
+  - @granite-js/brownfield-module@3.0.7
+  - @granite-js/cli@3.0.7
+  - @granite-js/config@3.0.7
+  - @granite-js/jest@3.0.7
+  - @granite-js/mpack@3.0.7
+  - @granite-js/style-utils@3.0.7
+  - @granite-js/video@3.0.7
+
+## 3.0.6
+
+### Patch Changes
+
+- @granite-js/blur-view@3.0.6
+- @granite-js/brownfield-module@3.0.6
+- @granite-js/cli@3.0.6
+- @granite-js/config@3.0.6
+- @granite-js/jest@3.0.6
+- @granite-js/mpack@3.0.6
+- @granite-js/style-utils@3.0.6
+- @granite-js/video@3.0.6
+
 ## 3.0.5
 
 ### Patch Changes

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { type PrivateBackEventControls } from './BackEventContext';
-export type BackEventSource = 'backButton' | 'iosSwipeGesture' | 'androidHardwareBackPress';
+export type BackEventSource = 'backButton' | 'iosSwipeGesture' | 'androidHardwareBackPress' | 'accessibilityEscape';
 export interface BackEvent {
     source: BackEventSource;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.mjs"
@@ -91,8 +91,8 @@
     "@babel/core": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@granite-js/native": "3.0.5",
-    "@granite-js/vitest": "3.0.5",
+    "@granite-js/native": "3.0.7",
+    "@granite-js/vitest": "3.0.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -121,14 +121,14 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/blur-view": "3.0.5",
-    "@granite-js/brownfield-module": "3.0.5",
-    "@granite-js/cli": "3.0.5",
-    "@granite-js/config": "3.0.5",
-    "@granite-js/jest": "3.0.5",
-    "@granite-js/mpack": "3.0.5",
-    "@granite-js/style-utils": "3.0.5",
-    "@granite-js/video": "3.0.5",
+    "@granite-js/blur-view": "3.0.7",
+    "@granite-js/brownfield-module": "3.0.7",
+    "@granite-js/cli": "3.0.7",
+    "@granite-js/config": "3.0.7",
+    "@granite-js/jest": "3.0.7",
+    "@granite-js/mpack": "3.0.7",
+    "@granite-js/style-utils": "3.0.7",
+    "@granite-js/video": "3.0.7",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

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

@@ -1,5 +1,5 @@
-import { render } from '@testing-library/react';
-import { BackHandler, Platform } from 'react-native';
+import { render, renderHook } from '@testing-library/react';
+import { BackHandler, Platform, View } from 'react-native';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { CanGoBackGuard } from './CanGoBackGuard';
 
@@ -16,6 +16,74 @@ describe('CanGoBackGuard', () => {
     vi.restoreAllMocks();
   });
 
+  it('passes accessibility escape events to onBack while back events exist', () => {
+    mockPlatformOS('ios');
+
+    const onBack = vi.fn();
+    const children = <div />;
+    const { result } = renderHook(() =>
+      CanGoBackGuard({
+        canGoBack: false,
+        hasBackEvent: true,
+        isInitialScreen: true,
+        onBack,
+        children,
+      })
+    );
+
+    expect(result.current.type).toBe(View);
+    expect(result.current.props.collapsable).toBe(false);
+    expect(result.current.props.children).toBe(children);
+
+    result.current.props.onAccessibilityEscape();
+
+    expect(onBack).toHaveBeenCalledExactlyOnceWith({ source: 'accessibilityEscape' });
+  });
+
+  it('registers the accessibility escape handler only while back events exist', () => {
+    mockPlatformOS('ios');
+
+    const onBack = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ hasBackEvent }) =>
+        CanGoBackGuard({
+          canGoBack: !hasBackEvent,
+          hasBackEvent,
+          isInitialScreen: true,
+          onBack,
+          children: <div />,
+        }),
+      { initialProps: { hasBackEvent: false } }
+    );
+
+    expect(result.current.props.onAccessibilityEscape).toBeUndefined();
+
+    rerender({ hasBackEvent: true });
+
+    result.current.props.onAccessibilityEscape();
+
+    expect(onBack).toHaveBeenCalledExactlyOnceWith({ source: 'accessibilityEscape' });
+
+    rerender({ hasBackEvent: false });
+
+    expect(result.current.props.onAccessibilityEscape).toBeUndefined();
+  });
+
+  it('does not register an accessibility escape handler when onBack is absent', () => {
+    mockPlatformOS('ios');
+
+    const { result } = renderHook(() =>
+      CanGoBackGuard({
+        canGoBack: false,
+        hasBackEvent: true,
+        isInitialScreen: true,
+        children: <div />,
+      })
+    );
+
+    expect(result.current.props.onAccessibilityEscape).toBeUndefined();
+  });
+
   it('passes Android hardware back events to onBack and consumes the native event', () => {
     mockPlatformOS('android');
 

package/src/router/components/CanGoBackGuard.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect } from 'react';
-import { BackHandler, Platform } from 'react-native';
+import { BackHandler, Platform, View } from 'react-native';
 import type { BackEvent } from '../../use-back-event';
 
 type SetIosSwipeGestureEnabled = ({ isEnabled }: { isEnabled: boolean }) => Promise<void> | void;
@@ -86,5 +86,13 @@ export function CanGoBackGuard({
     };
   }, [hasBackEvent, onBack, setiOSBackPressHandler]);
 
-  return <>{children}</>;
+  return (
+    <View
+      style={{ flex: 1 }}
+      collapsable={false}
+      onAccessibilityEscape={hasBackEvent && onBack ? () => onBack({ source: 'accessibilityEscape' }) : undefined}
+    >
+      {children}
+    </View>
+  );
 }

package/src/use-back-event/useBackEvent.tsx

@@ -10,7 +10,7 @@ import {
 import { useBackEventActionsContext } from './useBackEventActionsContext';
 import type { BackHandlerCallback } from './useBackHandler';
 
-export type BackEventSource = 'backButton' | 'iosSwipeGesture' | 'androidHardwareBackPress';
+export type BackEventSource = 'backButton' | 'iosSwipeGesture' | 'androidHardwareBackPress' | 'accessibilityEscape';
 
 export interface BackEvent {
   source: BackEventSource;