From 9aec1b76d698efbdb6db3d60262dd4aa688fce43 Mon Sep 17 00:00:00 2001
From: Mohamed Riad <mohamed.riad@mycomera.com>
Date: Thu, 28 May 2026 16:47:56 +0300
Subject: [PATCH] fix: resolve measureLayout warning by using UIManager with
 native node handles

Calling ref.measureLayout() directly on composite (JS) component refs
triggers a React Native warning: "ref.measureLayout must be called with
a ref to a native component." This happens because containerRef and
viewRef point to wrapped/Animated components, not host views.

Fix both call sites to use UIManager.measureLayout() with findNodeHandle()
to first resolve refs to their underlying native node handles before
measuring.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/CellRendererComponent.tsx     | 11 +++++------
 src/components/NestableDraggableFlatList.tsx | 11 +++++++----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/CellRendererComponent.tsx b/src/components/CellRendererComponent.tsx
index e4e861a6..bc25d58c 100644
--- a/src/components/CellRendererComponent.tsx
+++ b/src/components/CellRendererComponent.tsx
@@ -4,6 +4,7 @@ import {
   LayoutChangeEvent,
   MeasureLayoutOnSuccessCallback,
   StyleProp,
+  UIManager,
   ViewStyle,
 } from "react-native";
 import Animated, {
@@ -88,13 +89,11 @@ function CellRendererComponent<T>(props: Props<T>) {
       }
     };
 
-    const containerNode = containerRef.current;
-    const viewNode = viewRef.current;
-    const nodeHandle = containerNode;
+    const viewHandle = findNodeHandle(viewRef.current);
+    const containerHandle = findNodeHandle(containerRef.current);
 
-    if (viewNode && nodeHandle) {
-      //@ts-ignore
-      viewNode.measureLayout(nodeHandle, onSuccess, onFail);
+    if (viewHandle && containerHandle) {
+      UIManager.measureLayout(viewHandle, containerHandle, onFail, onSuccess);
     }
   });
 
diff --git a/src/components/NestableDraggableFlatList.tsx b/src/components/NestableDraggableFlatList.tsx
index 15593527..4e6ba93a 100644
--- a/src/components/NestableDraggableFlatList.tsx
+++ b/src/components/NestableDraggableFlatList.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { findNodeHandle, LogBox } from "react-native";
+import { findNodeHandle, LogBox, UIManager } from "react-native";
 import Animated, {
   useDerivedValue,
   useSharedValue,
@@ -48,7 +48,8 @@ function NestableDraggableFlatListInner<T>(
   });
 
   const onListContainerLayout = useStableCallback(async ({ containerRef }) => {
-    const nodeHandle = findNodeHandle(scrollableRef.current);
+    const scrollableHandle = findNodeHandle(scrollableRef.current);
+    const containerHandle = findNodeHandle(containerRef.current);
 
     const onSuccess = (_x: number, y: number) => {
       listVerticalOffset.value = y;
@@ -56,8 +57,10 @@ function NestableDraggableFlatListInner<T>(
     const onFail = () => {
       console.log("## nested draggable list measure fail");
     };
-    //@ts-ignore
-    containerRef.current.measureLayout(nodeHandle, onSuccess, onFail);
+
+    if (containerHandle && scrollableHandle) {
+      UIManager.measureLayout(containerHandle, scrollableHandle, onFail, onSuccess);
+    }
   });
 
   const onDragBegin: DraggableFlatListProps<T>["onDragBegin"] = useStableCallback(