@granite-js/react-native 1.0.36 → 1.0.38

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @granite-js/react-native
 
+## 1.0.38
+
+### Patch Changes
+
+- 757fa25: Deprecate `useBackEvent` in favor of `useBackHandler`. Handlers registered through `useBackHandler` receive a `BackEvent` object and can conditionally consume the back action by returning `true`. `useBackEvent` still works, but will be removed in a future release.
+  - @granite-js/blur-view@1.0.38
+  - @granite-js/brownfield-module@1.0.38
+  - @granite-js/cli@1.0.38
+  - @granite-js/jest@1.0.38
+  - @granite-js/mpack@1.0.38
+  - @granite-js/native@1.0.38
+  - @granite-js/plugin-core@1.0.38
+  - @granite-js/style-utils@1.0.38
+  - @granite-js/video@1.0.38
+
+## 1.0.37
+
+### Patch Changes
+
+- e60a630: fix(react-native): stop forwarding InView API props to the host view
+- Updated dependencies [2096242]
+  - @granite-js/mpack@1.0.37
+  - @granite-js/cli@1.0.37
+  - @granite-js/blur-view@1.0.37
+  - @granite-js/brownfield-module@1.0.37
+  - @granite-js/jest@1.0.37
+  - @granite-js/native@1.0.37
+  - @granite-js/plugin-core@1.0.37
+  - @granite-js/style-utils@1.0.37
+  - @granite-js/video@1.0.37
+
 ## 1.0.36
 
 ### Patch Changes

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

@@ -63,6 +63,11 @@ export declare function BackEventProvider({ children }: {
  */
 export declare function useBackEventState(): PrivateBackEventControls;
 /**
+ * @deprecated Use `useBackHandler` instead. This will be removed in a future release.
+ * Handlers registered through `useBackHandler` receive a `BackEvent` object and can conditionally
+ * consume the back action by returning `true`. To keep the behavior of `useBackEvent`
+ * (always blocking default back navigation while registered), return `true` from the handler.
+ *
  * @public
  * @category Screen Control
  * @name useBackEvent

package/package.json

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

package/src/impression-area/ImpressionArea.tsx

@@ -330,6 +330,12 @@ function ImpressionAreaImpl({
   return (
     <InView
       onChange={(inView, currentThreshold) => {
+        // Guard against non-observer invocations (e.g. a bubbling native event reaching
+        // the callback): a wrong `false` here sticks forever because the observer only
+        // re-notifies when its own `inView` value changes.
+        if (typeof inView !== 'boolean' || typeof currentThreshold !== 'number') {
+          return;
+        }
         const isVisible = inView && currentThreshold >= areaThreshold;
         setInviewImpressed(isVisible);
       }}

package/src/intersection-observer/InView.spec.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
 import { describe, expect, it, vi } from 'vitest';
 import IOContext, { IOContextValue } from './IOContext';
@@ -147,6 +148,33 @@ describe('InView', () => {
     expect(outer.unobserve).toHaveBeenCalledTimes(1);
   });
 
+  it('does not forward its own API props (onChange, triggerOnce) to the rendered view', () => {
+    const manager = new FakeIntersectionObserverRegistry();
+    const onChange = vi.fn();
+    const received: Record<string, unknown>[] = [];
+    const CaptureView = forwardRef<View, Record<string, unknown>>((props, ref) => {
+      received.push(props);
+      return <View ref={ref} />;
+    });
+
+    render(
+      <IOContext.Provider value={{ manager: manager.asManager, parent: { manager: null } }}>
+        <InView as={CaptureView} triggerOnce onChange={onChange} testID="target">
+          <View />
+        </InView>
+      </IOContext.Provider>
+    );
+
+    const props = received.at(-1);
+    // API props must not leak: `onChange` on a host View is a bubbling event handler,
+    // so change events from descendants (e.g. TextInput) would call the observer
+    // callback with a SyntheticEvent.
+    expect(props).not.toHaveProperty('onChange');
+    expect(props).not.toHaveProperty('triggerOnce');
+    // Regular ViewProps still pass through.
+    expect(props).toHaveProperty('testID', 'target');
+  });
+
   it('with triggerOnce, stops observing all ancestors once visible', () => {
     const inner = new FakeIntersectionObserverRegistry();
     const outer = new FakeIntersectionObserverRegistry();

package/src/intersection-observer/InView.tsx

@@ -257,7 +257,12 @@ class InView<T = ViewProps> extends PureComponent<InViewProps<T>> {
   };
 
   render() {
-    const { as, children, ...props } = this.props;
+    // `onChange` and `triggerOnce` are InView's own API props and must not reach the
+    // rendered view. In React Native `onChange` is a bubbling event (`topChange`), so
+    // passing it through would make change events from descendants (e.g. a typing
+    // `TextInput`) invoke the observer callback with a SyntheticEvent instead of
+    // `(inView, intersectionRatio)`.
+    const { as, children, triggerOnce, onChange, ...props } = this.props;
     if (typeof children === 'function') {
       return null;
     }

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

@@ -1,14 +1,24 @@
 import { render } from '@testing-library/react';
-import { BackHandler } from 'react-native';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { BackHandler, Platform } from 'react-native';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { CanGoBackGuard } from './CanGoBackGuard';
 
+function mockPlatformOS(os: typeof Platform.OS) {
+  vi.spyOn(Platform, 'OS', 'get').mockReturnValue(os);
+}
+
 describe('CanGoBackGuard', () => {
   beforeEach(() => {
     vi.mocked(BackHandler.addEventListener).mockClear();
   });
 
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it('passes Android hardware back events to onBack and consumes the native event', () => {
+    mockPlatformOS('android');
+
     const onBack = vi.fn();
 
     render(
@@ -25,6 +35,8 @@ describe('CanGoBackGuard', () => {
   });
 
   it('does not register Android hardware back when no back event exists', () => {
+    mockPlatformOS('android');
+
     const onBack = vi.fn();
 
     render(
@@ -37,6 +49,8 @@ describe('CanGoBackGuard', () => {
   });
 
   it('registers the iOS swipe back handler while back events exist', () => {
+    mockPlatformOS('ios');
+
     const onBack = vi.fn();
     const setiOSBackPressHandler = vi.fn();
 
@@ -63,6 +77,8 @@ describe('CanGoBackGuard', () => {
   });
 
   it('disables iOS swipe when the current state should block default back navigation', () => {
+    mockPlatformOS('ios');
+
     const setIosSwipeGestureEnabled = vi.fn();
 
     const { unmount } = render(

package/src/router/components/CanGoBackGuard.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect } from 'react';
-import { BackHandler } from 'react-native';
+import { BackHandler, Platform } from 'react-native';
 import type { BackEvent } from '../../use-back-event';
 
 type SetIosSwipeGestureEnabled = ({ isEnabled }: { isEnabled: boolean }) => Promise<void> | void;
@@ -23,6 +23,10 @@ export function CanGoBackGuard({
   setiOSBackPressHandler?: SetIOSBackPressHandler;
 }) {
   useEffect(() => {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+
     if (!isInitialScreen || !canGoBack) {
       setIosSwipeGestureEnabled?.({ isEnabled: false });
 
@@ -35,6 +39,10 @@ export function CanGoBackGuard({
   }, [canGoBack, isInitialScreen, setIosSwipeGestureEnabled]);
 
   useEffect(() => {
+    if (Platform.OS !== 'android') {
+      return;
+    }
+
     if (!hasBackEvent) {
       return;
     }
@@ -51,6 +59,10 @@ export function CanGoBackGuard({
   }, [hasBackEvent, onBack]);
 
   useEffect(() => {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+
     if (!hasBackEvent || setiOSBackPressHandler == null) {
       return;
     }

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

@@ -218,6 +218,11 @@ export function useBackEventState() {
 }
 
 /**
+ * @deprecated Use `useBackHandler` instead. This will be removed in a future release.
+ * Handlers registered through `useBackHandler` receive a `BackEvent` object and can conditionally
+ * consume the back action by returning `true`. To keep the behavior of `useBackEvent`
+ * (always blocking default back navigation while registered), return `true` from the handler.
+ *
  * @public
  * @category Screen Control
  * @name useBackEvent