@granite-js/react-native 1.0.35 → 1.0.36

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @granite-js/react-native
 
+## 1.0.36
+
+### Patch Changes
+
+- 9336784: fix(react-native): correct ImpressionArea/InView visibility in nested scroll views
+  - @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/native@1.0.36
+  - @granite-js/plugin-core@1.0.36
+  - @granite-js/style-utils@1.0.36
+  - @granite-js/video@1.0.36
+
 ## 1.0.35
 
 ### Patch Changes

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

@@ -1,6 +1,13 @@
 import IOManager from './IOManager';
 export interface IOContextValue {
     manager: null | IOManager;
+    /**
+     * The enclosing `IOContext` value, if this scroll container is nested inside another
+     * `IOScrollView`/`IOFlatList`. This forms a linked list from the innermost scroll
+     * container up to the outermost one, allowing `InView` to observe every ancestor
+     * viewport (like the web `IntersectionObserver`, which clips against all ancestors).
+     */
+    parent?: IOContextValue | null;
 }
 /**
  * @name IOContext

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

@@ -1,8 +1,20 @@
 import { ComponentType, PureComponent, ReactElement, ReactNode, RefObject } from 'react';
 import { LayoutChangeEvent, View, ViewProps } from 'react-native';
 import { IOContextValue } from './IOContext';
-import { ObserverInstance } from './IOManager';
+import IOManager from './IOManager';
 import { Element } from './IntersectionObserver';
+/**
+ * Per-manager observation state. A single `InView` can be observed by multiple
+ * `IOManager`s at once (one per ancestor scroll container). Each binding keeps its
+ * own `Element` because every observer measures the view against a different root
+ * and writes its own `layout`/`inView`/`intersectionRatio`.
+ */
+interface ManagerBinding {
+    manager: IOManager;
+    element: Element;
+    inView: boolean;
+    intersectionRatio: number;
+}
 export interface RenderProps {
     inView: boolean;
     onChange: (inView: boolean) => void;
@@ -87,12 +99,26 @@ declare class InView<T = ViewProps> extends PureComponent<InViewProps<T>> {
     static defaultProps: Partial<InViewProps>;
     context: undefined | IOContextValue;
     mounted: boolean;
-    protected element: Element;
-    protected instance: undefined | ObserverInstance;
+    protected bindings: ManagerBinding[];
+    protected combinedInView: boolean;
+    protected combinedRatio: number;
+    protected lastWidth: number;
+    protected lastHeight: number;
     protected view: any;
-    constructor(props: InViewProps<T>);
     componentDidMount(): void;
     componentWillUnmount(): void;
+    /**
+     * Walks the `IOContext` chain from the nearest scroll container to the outermost,
+     * collecting every non-null manager along the way.
+     */
+    protected collectManagers(): IOManager[];
+    protected handleBindingChange: (binding: ManagerBinding, inView: boolean, intersectionRatio: number) => void;
+    /**
+     * Recomputes the combined visibility across all ancestor viewports and notifies
+     * `onChange` only when the AND-ed result actually changes. `intersectionRatio` is
+     * reported as the smallest ratio among ancestors — the most restrictive viewport.
+     */
+    protected updateCombined(): void;
     protected handleChange: (inView: boolean, areaThreshold: number) => void;
     protected handleRef: (ref: any) => void;
     protected handleLayout: (event: LayoutChangeEvent) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "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.35",
-    "@granite-js/vitest": "1.0.35",
+    "@granite-js/native": "1.0.36",
+    "@granite-js/vitest": "1.0.36",
     "@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.35",
+    "@granite-js/native": "1.0.36",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/blur-view": "1.0.35",
-    "@granite-js/brownfield-module": "1.0.35",
-    "@granite-js/cli": "1.0.35",
-    "@granite-js/jest": "1.0.35",
-    "@granite-js/mpack": "1.0.35",
-    "@granite-js/plugin-core": "1.0.35",
-    "@granite-js/style-utils": "1.0.35",
-    "@granite-js/video": "1.0.35",
+    "@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",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

package/src/intersection-observer/IOContext.ts

@@ -3,6 +3,13 @@ import IOManager from './IOManager';
 
 export interface IOContextValue {
   manager: null | IOManager;
+  /**
+   * The enclosing `IOContext` value, if this scroll container is nested inside another
+   * `IOScrollView`/`IOFlatList`. This forms a linked list from the innermost scroll
+   * container up to the outermost one, allowing `InView` to observe every ancestor
+   * viewport (like the web `IntersectionObserver`, which clips against all ancestors).
+   */
+  parent?: IOContextValue | null;
 }
 
 /**
@@ -11,6 +18,7 @@ export interface IOContextValue {
  */
 const IOContext = createContext<IOContextValue>({
   manager: null,
+  parent: null,
 });
 
 export default IOContext;

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

@@ -0,0 +1,174 @@
+import { render } from '@testing-library/react';
+import { View } from 'react-native';
+import { describe, expect, it, vi } from 'vitest';
+import IOContext, { IOContextValue } from './IOContext';
+import IOManager, { ObserverInstance, ObserverInstanceCallback } from './IOManager';
+import InView from './InView';
+import { Element } from './IntersectionObserver';
+
+/**
+ * A stand-in for `IOManager` that captures the observed element/callback so the test
+ * can drive intersection changes directly, without a real native scroll viewport.
+ */
+class FakeIntersectionObserverRegistry {
+  observe = vi.fn((element: Element, callback: ObserverInstanceCallback): ObserverInstance => {
+    this.callbacks.set(element, callback);
+    return { callback, element, observerId: 1, observer: null as never };
+  });
+
+  unobserve = vi.fn((element: Element) => {
+    this.callbacks.delete(element);
+  });
+
+  private callbacks = new Map<Element, ObserverInstanceCallback>();
+
+  /** Emits an intersection change to every element this manager observes. */
+  emit(inView: boolean, intersectionRatio: number) {
+    for (const callback of this.callbacks.values()) {
+      callback(inView, intersectionRatio);
+    }
+  }
+
+  get asManager(): IOManager {
+    return this as unknown as IOManager;
+  }
+}
+
+function renderInView(contextValue: IOContextValue, onChange: (inView: boolean, ratio: number) => void) {
+  return render(
+    <IOContext.Provider value={contextValue}>
+      <InView onChange={onChange}>
+        <View />
+      </InView>
+    </IOContext.Provider>
+  );
+}
+
+describe('InView', () => {
+  it('observes the single ancestor manager and forwards its intersection changes', () => {
+    const manager = new FakeIntersectionObserverRegistry();
+    const onChange = vi.fn();
+
+    renderInView({ manager: manager.asManager, parent: { manager: null } }, onChange);
+
+    expect(manager.observe).toHaveBeenCalledTimes(1);
+
+    manager.emit(true, 0.3);
+
+    expect(onChange).toHaveBeenCalledWith(true, 0.3);
+  });
+
+  it('observes every ancestor viewport when scroll containers are nested', () => {
+    const inner = new FakeIntersectionObserverRegistry();
+    const outer = new FakeIntersectionObserverRegistry();
+    const onChange = vi.fn();
+
+    renderInView(
+      {
+        manager: inner.asManager,
+        parent: { manager: outer.asManager, parent: { manager: null } },
+      },
+      onChange
+    );
+
+    expect(inner.observe).toHaveBeenCalledTimes(1);
+    expect(outer.observe).toHaveBeenCalledTimes(1);
+  });
+
+  it('reports visible only when the element intersects ALL ancestor viewports (AND)', () => {
+    const inner = new FakeIntersectionObserverRegistry();
+    const outer = new FakeIntersectionObserverRegistry();
+    const onChange = vi.fn();
+
+    renderInView(
+      {
+        manager: inner.asManager,
+        parent: { manager: outer.asManager, parent: { manager: null } },
+      },
+      onChange
+    );
+
+    // Visible in the inner (horizontal) viewport, but the outer (vertical) viewport
+    // hasn't scrolled it into view yet -> must NOT be considered visible.
+    inner.emit(true, 0.5);
+    expect(onChange).not.toHaveBeenCalled();
+
+    // Now visible in the outer viewport too -> visible, with the most restrictive
+    // (smallest) ratio reported.
+    outer.emit(true, 1);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true, 0.5);
+
+    // Scrolling the outer viewport away hides it again even though the inner viewport
+    // still reports it visible.
+    onChange.mockClear();
+    outer.emit(false, 0);
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(false, 0);
+  });
+
+  it('does not re-notify when the combined visibility is unchanged', () => {
+    const inner = new FakeIntersectionObserverRegistry();
+    const outer = new FakeIntersectionObserverRegistry();
+    const onChange = vi.fn();
+
+    renderInView(
+      {
+        manager: inner.asManager,
+        parent: { manager: outer.asManager, parent: { manager: null } },
+      },
+      onChange
+    );
+
+    inner.emit(true, 0.5);
+    outer.emit(true, 1);
+    onChange.mockClear();
+
+    // The outer ratio changes but the inner viewport stays the more restrictive one,
+    // so the combined result (visible, ratio 0.5) is unchanged.
+    outer.emit(true, 0.8);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('unobserves every ancestor manager on unmount', () => {
+    const inner = new FakeIntersectionObserverRegistry();
+    const outer = new FakeIntersectionObserverRegistry();
+    const onChange = vi.fn();
+
+    const { unmount } = renderInView(
+      {
+        manager: inner.asManager,
+        parent: { manager: outer.asManager, parent: { manager: null } },
+      },
+      onChange
+    );
+
+    unmount();
+
+    expect(inner.unobserve).toHaveBeenCalledTimes(1);
+    expect(outer.unobserve).toHaveBeenCalledTimes(1);
+  });
+
+  it('with triggerOnce, stops observing all ancestors once visible', () => {
+    const inner = new FakeIntersectionObserverRegistry();
+    const outer = new FakeIntersectionObserverRegistry();
+    const onChange = vi.fn();
+
+    render(
+      <IOContext.Provider
+        value={{
+          manager: inner.asManager,
+          parent: { manager: outer.asManager, parent: { manager: null } },
+        }}
+      >
+        <InView triggerOnce onChange={onChange}>
+          <View />
+        </InView>
+      </IOContext.Provider>
+    );
+
+    inner.emit(true, 0.5);
+    outer.emit(true, 1);
+
+    expect(inner.unobserve).toHaveBeenCalledTimes(1);
+    expect(outer.unobserve).toHaveBeenCalledTimes(1);
+  });
+});

package/src/intersection-observer/InView.tsx

@@ -1,9 +1,22 @@
 import { ComponentType, PureComponent, ReactElement, ReactNode, RefObject } from 'react';
 import { LayoutChangeEvent, View, ViewProps } from 'react-native';
 import IOContext, { IOContextValue } from './IOContext';
-import { ObserverInstance } from './IOManager';
+import IOManager from './IOManager';
 import { Element } from './IntersectionObserver';
 
+/**
+ * Per-manager observation state. A single `InView` can be observed by multiple
+ * `IOManager`s at once (one per ancestor scroll container). Each binding keeps its
+ * own `Element` because every observer measures the view against a different root
+ * and writes its own `layout`/`inView`/`intersectionRatio`.
+ */
+interface ManagerBinding {
+  manager: IOManager;
+  element: Element;
+  inView: boolean;
+  intersectionRatio: number;
+}
+
 export interface RenderProps {
   inView: boolean;
   onChange: (inView: boolean) => void;
@@ -97,46 +110,98 @@ class InView<T = ViewProps> extends PureComponent<InViewProps<T>> {
   context: undefined | IOContextValue = undefined;
   mounted = false;
 
-  protected element: Element;
-  protected instance: undefined | ObserverInstance;
+  protected bindings: ManagerBinding[] = [];
+  protected combinedInView = false;
+  protected combinedRatio = 0;
+  protected lastWidth = 0;
+  protected lastHeight = 0;
   protected view: any;
 
-  constructor(props: InViewProps<T>) {
-    super(props);
-
-    this.element = {
-      inView: false,
-      intersectionRatio: 0,
-      layout: {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-      },
-      measureLayout: this.measureLayout,
-    };
-  }
-
   componentDidMount() {
     this.mounted = true;
-    if (this.context?.manager) {
-      this.instance = this.context.manager.observe(this.element, this.handleChange);
-    }
+    // Observe the element in every ancestor viewport, from the innermost scroll
+    // container up to the outermost. The element is considered visible only when it
+    // intersects *all* of them (AND), matching the web `IntersectionObserver`, which
+    // clips the target against every ancestor's scrollport.
+    this.bindings = this.collectManagers().map((manager) => {
+      const binding: ManagerBinding = {
+        manager,
+        inView: false,
+        intersectionRatio: 0,
+        element: {
+          inView: false,
+          intersectionRatio: 0,
+          layout: { x: 0, y: 0, width: 0, height: 0 },
+          measureLayout: this.measureLayout,
+        },
+      };
+      manager.observe(binding.element, (inView, intersectionRatio) =>
+        this.handleBindingChange(binding, inView, intersectionRatio)
+      );
+      return binding;
+    });
   }
 
   componentWillUnmount() {
     this.mounted = false;
-    if (this.context?.manager && this.instance) {
-      this.context.manager.unobserve(this.element);
+    for (const binding of this.bindings) {
+      binding.manager.unobserve(binding.element);
     }
+    this.bindings = [];
+  }
+
+  /**
+   * Walks the `IOContext` chain from the nearest scroll container to the outermost,
+   * collecting every non-null manager along the way.
+   */
+  protected collectManagers(): IOManager[] {
+    const managers: IOManager[] = [];
+    let context: IOContextValue | null | undefined = this.context;
+    while (context != null) {
+      if (context.manager != null) {
+        managers.push(context.manager);
+      }
+      context = context.parent;
+    }
+    return managers;
+  }
+
+  protected handleBindingChange = (binding: ManagerBinding, inView: boolean, intersectionRatio: number) => {
+    binding.inView = inView;
+    binding.intersectionRatio = intersectionRatio;
+    this.updateCombined();
+  };
+
+  /**
+   * Recomputes the combined visibility across all ancestor viewports and notifies
+   * `onChange` only when the AND-ed result actually changes. `intersectionRatio` is
+   * reported as the smallest ratio among ancestors — the most restrictive viewport.
+   */
+  protected updateCombined() {
+    if (!this.mounted || this.bindings.length === 0) {
+      return;
+    }
+
+    const inView = this.bindings.every((binding) => binding.inView);
+    const intersectionRatio = inView
+      ? this.bindings.reduce((min, binding) => Math.min(min, binding.intersectionRatio), 1)
+      : 0;
+
+    if (inView === this.combinedInView && intersectionRatio === this.combinedRatio) {
+      return;
+    }
+
+    this.combinedInView = inView;
+    this.combinedRatio = intersectionRatio;
+    this.handleChange(inView, intersectionRatio);
   }
 
   protected handleChange = (inView: boolean, areaThreshold: number) => {
     if (this.mounted) {
       const { triggerOnce, onChange } = this.props;
       if (inView && triggerOnce) {
-        if (this.context?.manager) {
-          this.context?.manager.unobserve(this.element);
+        for (const binding of this.bindings) {
+          binding.manager.unobserve(binding.element);
         }
       }
       if (onChange) {
@@ -153,9 +218,12 @@ class InView<T = ViewProps> extends PureComponent<InViewProps<T>> {
     const {
       nativeEvent: { layout },
     } = event;
-    if (layout.width !== this.element.layout.width || layout.height !== this.element.layout.height) {
-      if (this.element.onLayout) {
-        this.element.onLayout();
+    if (layout.width !== this.lastWidth || layout.height !== this.lastHeight) {
+      this.lastWidth = layout.width;
+      this.lastHeight = layout.height;
+      // Re-measure the target in every ancestor viewport when its size changes.
+      for (const binding of this.bindings) {
+        binding.element.onLayout?.();
       }
     }
     const { onLayout } = this.props;

package/src/intersection-observer/IntersectionObserver.spec.ts

@@ -0,0 +1,89 @@
+import { NativeScrollEvent } from 'react-native';
+import { describe, expect, it } from 'vitest';
+import IntersectionObserver, { Element, IntersectionObserverEntry, Root } from './IntersectionObserver';
+
+const VIEWPORT = 300;
+
+function createRoot(horizontal: boolean, contentOffset: { x: number; y: number }): Root {
+  return {
+    node: {},
+    horizontal,
+    current: {
+      contentOffset,
+      contentSize: { width: 1000, height: 1000 },
+      layoutMeasurement: { width: VIEWPORT, height: VIEWPORT },
+    } as NativeScrollEvent,
+  };
+}
+
+/**
+ * Creates an observed element positioned at a fixed layout. `measureLayout`
+ * synchronously reports that layout so we can drive the observer without a native
+ * scroll view.
+ */
+function createElement(layout: { x: number; y: number; width: number; height: number }): Element {
+  return {
+    inView: false,
+    intersectionRatio: 0,
+    layout: { x: 0, y: 0, width: 0, height: 0 },
+    measureLayout: (_node, callback) => callback(layout.x, layout.y, layout.width, layout.height),
+  };
+}
+
+/**
+ * Observes the element, forces a measure + intersection computation, and returns the
+ * flattened entries the observer emitted.
+ */
+function measure(root: Root, element: Element): IntersectionObserverEntry[] {
+  const entries: IntersectionObserverEntry[] = [];
+  const observer = new IntersectionObserver((changed) => entries.push(...changed), { root });
+  observer.observe(element);
+  // Synchronously trigger measureTarget -> onScrollHandler (throttle leading edge).
+  root.onLayout?.();
+  return entries;
+}
+
+describe('IntersectionObserver', () => {
+  it('does not mark a horizontally adjacent target (0px visible) as intersecting', () => {
+    const root = createRoot(true, { x: 0, y: 0 });
+    // Target's left edge sits exactly on the viewport's right edge.
+    const element = createElement({ x: VIEWPORT, y: 0, width: VIEWPORT, height: 200 });
+
+    const entries = measure(root, element);
+
+    expect(entries.some((entry) => entry.isIntersecting)).toBe(false);
+    expect(element.inView).toBe(false);
+  });
+
+  it('does not mark a vertically adjacent target (0px visible) as intersecting', () => {
+    const root = createRoot(false, { x: 0, y: 0 });
+    // Target's top edge sits exactly on the viewport's bottom edge.
+    const element = createElement({ x: 0, y: VIEWPORT, width: 200, height: VIEWPORT });
+
+    const entries = measure(root, element);
+
+    expect(entries.some((entry) => entry.isIntersecting)).toBe(false);
+    expect(element.inView).toBe(false);
+  });
+
+  it('marks a target as intersecting once even 1px is visible', () => {
+    const root = createRoot(true, { x: 0, y: 0 });
+    // Target overlaps the viewport by 1px on its left edge.
+    const element = createElement({ x: VIEWPORT - 1, y: 0, width: VIEWPORT, height: 200 });
+
+    const entries = measure(root, element);
+
+    expect(entries.some((entry) => entry.isIntersecting)).toBe(true);
+    expect(element.inView).toBe(true);
+  });
+
+  it('reports a fully visible target with ratio 1', () => {
+    const root = createRoot(true, { x: 0, y: 0 });
+    const element = createElement({ x: 0, y: 0, width: VIEWPORT, height: 200 });
+
+    const entries = measure(root, element);
+
+    const intersecting = entries.find((entry) => entry.isIntersecting);
+    expect(intersecting?.intersectionRatio).toBe(1);
+  });
+});

package/src/intersection-observer/IntersectionObserver.ts

@@ -165,9 +165,12 @@ class IntersectionObserver {
             const visibleWidth = Math.max(visibleTargetMaxX - visibleTargetMinX, 0);
 
             intersectionRatio = visibleWidth / targetLayout.width;
-            isIntersecting =
-              contentOffsetWithLayout + (rootMargin.right || 0) >= targetLayout.x &&
-              contentOffset.x - (rootMargin.left || 0) <= targetLayout.x + targetLayout.width;
+            // Intersecting only when there is a real overlap. A target whose edge
+            // exactly touches the viewport (0px visible) is NOT considered visible,
+            // matching the web IntersectionObserver (a zero-area intersection is not
+            // intersecting). Using `>=` here would fire impressions for elements that
+            // are merely adjacent to the viewport edge.
+            isIntersecting = visibleWidth > 0;
           } else {
             const visibleTargetMinY = Math.max(contentOffset.y - (rootMargin.top || 0), targetLayout.y);
             const visibleTargetMaxY = Math.min(
@@ -177,9 +180,9 @@ class IntersectionObserver {
             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;
+            // See the horizontal branch above: 0px overlap (edge exactly touching the
+            // viewport) is not intersecting.
+            isIntersecting = visibleHeight > 0;
           }
 
           intersectionRatio = Math.floor(intersectionRatio * 100) / 100;

package/src/intersection-observer/withIO.tsx

@@ -32,13 +32,18 @@ function withIO<
 ) {
   type ScrollableComponentProps = CompProps & IOComponentProps;
   const IOScrollableComponent = class extends PureComponent<ScrollableComponentProps> {
+    // Consume the enclosing IOContext so nested scroll containers can chain their
+    // managers. `contextType` makes the parent context available as the second
+    // constructor argument.
+    static contextType = IOContext;
+
     protected node: any;
     protected scroller: RefObject<any>;
     protected root: Root;
     protected manager: IOManager;
     protected contextValue: IOContextValue;
 
-    constructor(props: ScrollableComponentProps) {
+    constructor(props: ScrollableComponentProps, parentContext?: IOContextValue) {
       super(props);
 
       // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -84,6 +89,9 @@ function withIO<
       this.manager = manager;
       this.contextValue = {
         manager,
+        // Link to the enclosing scroll container (if any) so descendant `InView`
+        // components can compute intersection against every ancestor viewport.
+        parent: parentContext ?? null,
       };
     }