@granite-js/react-native 0.1.23-next.13 → 0.1.23-next.14

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @granite-js/react-native
 
+## 0.1.23-next.14
+
+### Patch Changes
+
+- fix
+- Updated dependencies
+  - @granite-js/plugin-core@0.1.23-next.14
+  - @granite-js/style-utils@0.1.23-next.14
+  - @granite-js/lottie@0.1.23-next.14
+  - @granite-js/native@0.1.23-next.14
+  - @granite-js/image@0.1.23-next.14
+  - @granite-js/mpack@0.1.23-next.14
+  - @granite-js/jest@0.1.23-next.14
+  - @granite-js/cli@0.1.23-next.14
+
 ## 0.1.23-next.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.23-next.13",
+  "version": "0.1.23-next.14",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -86,7 +86,7 @@
     "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.23-next.13",
+    "@granite-js/native": "0.1.23-next.14",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -105,20 +105,20 @@
     "vitest": "^2.1.8"
   },
   "peerDependencies": {
-    "@granite-js/native": "0.1.23-next.13",
+    "@granite-js/native": "0.1.23-next.14",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.23-next.13",
-    "@granite-js/image": "0.1.23-next.13",
-    "@granite-js/jest": "0.1.23-next.13",
-    "@granite-js/lottie": "0.1.23-next.13",
-    "@granite-js/mpack": "0.1.23-next.13",
-    "@granite-js/plugin-core": "0.1.23-next.13",
-    "@granite-js/style-utils": "0.1.23-next.13",
+    "@granite-js/cli": "0.1.23-next.14",
+    "@granite-js/image": "0.1.23-next.14",
+    "@granite-js/jest": "0.1.23-next.14",
+    "@granite-js/lottie": "0.1.23-next.14",
+    "@granite-js/mpack": "0.1.23-next.14",
+    "@granite-js/plugin-core": "0.1.23-next.14",
+    "@granite-js/style-utils": "0.1.23-next.14",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "1.3.0"
   }

package/src/intersection-observer/withIO.tsx

@@ -1,5 +1,5 @@
 import { type ComponentProps, PureComponent, RefObject, createRef } from 'react';
-import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
+import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, View } from 'react-native';
 import IOContext, { IOContextValue } from './IOContext';
 import IOManager from './IOManager';
 import { Root, RootMargin } from './IntersectionObserver';
@@ -40,6 +40,7 @@ function withIO<
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       const self = this;
       this.scroller = createRef();
+      this.node = null;
       this.root = {
         get node() {
           return self.node;
@@ -81,10 +82,53 @@ function withIO<
       };
     }
 
+    // Private helpers to keep type-safety encapsulated
+    private isRefObject<T>(v: unknown): v is RefObject<T> {
+      return typeof v === 'object' && v !== null && 'current' in (v as Record<string, unknown>);
+    }
+
+    private toView(v: RefObject<View> | View | null | undefined): View | null {
+      if (!v) return null;
+      return this.isRefObject<View>(v) ? v.current ?? null : v;
+    }
+
+    private callIfFunction<T extends object, K extends string>(obj: T | null | undefined, key: K): unknown {
+      if (!obj) return null;
+      const rec = obj as unknown as Record<string, unknown>;
+      const fn = rec[String(key)];
+      if (typeof fn === 'function') {
+        return (fn as Function).call(obj);
+      }
+      return null;
+    }
+
+    protected resolveRootNode = (): View | null => {
+      const instance = this.scroller.current as unknown;
+
+      // 1) Prefer native scroll ref (FlatList/VirtualizedList on Fabric)
+      const viaNativeRef = this.callIfFunction(instance as object, 'getNativeScrollRef');
+      const nativeFromNativeRef = this.toView(viaNativeRef as RefObject<View> | View | null | undefined);
+      if (nativeFromNativeRef) return nativeFromNativeRef;
+
+      // 2) Fallback to getScrollRef
+      const viaScrollRef = this.callIfFunction(instance as object, 'getScrollRef');
+      const nativeFromScrollRef = this.toView(viaScrollRef as RefObject<View> | View | null | undefined);
+      if (nativeFromScrollRef) return nativeFromScrollRef;
+
+      // 3) Fallback to getScrollableNode (exclude numeric handles)
+      const scrollable = this.callIfFunction(instance as object, 'getScrollableNode');
+      if (scrollable && typeof scrollable !== 'number') {
+        return scrollable as View;
+      }
+
+      // 4) Lastly, treat the instance itself as a View or RefObject<View>
+      return this.toView(instance as RefObject<View> | View | null | undefined);
+    };
+
     componentDidMount() {
-      // Use the host component ref directly for RN 0.81/React 19 compatibility.
-      // This avoids relying on numeric node handles and works with Fabric.
-      this.node = this.scroller.current;
+      // Prefer a native scroll ref (FlatList/VirtualizedList),
+      // otherwise fall back to the host ref (ScrollView).
+      this.node = this.resolveRootNode();
       methods.forEach((method) => {
         (this as any)[method] = (...args: any) => {
           this.scroller.current?.[method]?.(...args);