@granite-js/react-native 1.0.36 → 1.0.37

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @granite-js/react-native
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "1.0.36",
+  "version": "1.0.37",
   "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.37",
+    "@granite-js/vitest": "1.0.37",
     "@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.37",
     "@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.37",
+    "@granite-js/brownfield-module": "1.0.37",
+    "@granite-js/cli": "1.0.37",
+    "@granite-js/jest": "1.0.37",
+    "@granite-js/mpack": "1.0.37",
+    "@granite-js/plugin-core": "1.0.37",
+    "@granite-js/style-utils": "1.0.37",
+    "@granite-js/video": "1.0.37",
     "@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;
     }