New Architecture Support - measureLayout() is obsolete with native node handlers

src/DraxList.tsx

@@ -16,7 +16,6 @@ import {
 	NativeSyntheticEvent,
 	FlatList,
 	Animated,
-	findNodeHandle,
 	StyleSheet,
 } from 'react-native';
 
@@ -90,12 +89,9 @@ const DraxListUnforwarded = <T extends unknown>(
 	// The unique identifer for this list's Drax view.
 	const id = useDraxId(idProp);
 
-	// FlatList, used for scrolling.
+	// FlatList, used for scrolling and measuring children
 	const flatListRef = useRef<FlatList<T> | null>(null);
 
-	// FlatList node handle, used for measuring children.
-	const nodeHandleRef = useRef<number | null>(null);
-
 	// Container view measurements, for scrolling by percentage.
 	const containerMeasurementsRef = useRef<DraxViewMeasurements | undefined>(undefined);
 
@@ -293,7 +289,6 @@ const DraxListUnforwarded = <T extends unknown>(
 	const setFlatListRefs = useCallback(
 		(ref) => {
 			flatListRef.current = ref;
-			nodeHandleRef.current = ref && findNodeHandle(ref);
 			if (forwardedRef) {
 				if (typeof forwardedRef === 'function') {
 					forwardedRef(ref);
@@ -689,7 +684,10 @@ const DraxListUnforwarded = <T extends unknown>(
 			onMonitorDragEnd={onMonitorDragEnd}
 			onMonitorDragDrop={onMonitorDragDrop}
 		>
-			<DraxSubprovider parent={{ id, nodeHandleRef }}>
+			<DraxSubprovider parent={{ id, viewRef: {
+				//@ts-ignore
+				current: flatListRef.current?.getNativeScrollRef()
+			} }}>
 				<FlatList
 					{...flatListProps}
 					style={flatListStyle}

src/DraxProvider.tsx

@@ -3,7 +3,7 @@ import React, {
 	ReactNodeArray,
 	useRef,
 } from 'react';
-import { View, StyleSheet, findNodeHandle } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { State } from 'react-native-gesture-handler';
 
 import { useDraxState, useDraxRegistry } from './hooks';
@@ -50,7 +50,7 @@ export const DraxProvider = ({
 		unregisterView,
 	} = useDraxRegistry(dispatch);
 
-	const rootNodeHandleRef = useRef<number | null>(null);
+	const rootViewRef = useRef<View | null>(null);
 
 	const handleGestureStateChange = useCallback(
 		(id: string, event: DraxGestureStateChangeEvent) => {
@@ -742,7 +742,7 @@ export const DraxProvider = ({
 		updateViewMeasurements,
 		handleGestureStateChange,
 		handleGestureEvent,
-		rootNodeHandleRef,
+		rootViewRef,
 	};
 
 	const hoverViews: ReactNodeArray = [];
@@ -769,18 +769,11 @@ export const DraxProvider = ({
 		}
 	});
 
-	const setRootNodeHandleRef = useCallback(
-		(ref: View | null) => {
-			rootNodeHandleRef.current = ref && findNodeHandle(ref);
-		},
-		[],
-	);
-
 	return (
 		<DraxContext.Provider value={contextValue}>
 			<View
 				style={style}
-				ref={setRootNodeHandleRef}
+				ref={rootViewRef}
 			>
 				{children}
 				<View

src/DraxScrollView.tsx

@@ -10,7 +10,6 @@ import {
 	ScrollView,
 	NativeSyntheticEvent,
 	NativeScrollEvent,
-	findNodeHandle,
 } from 'react-native';
 
 import { DraxView } from './DraxView';
@@ -53,12 +52,9 @@ const DraxScrollViewUnforwarded = (
 	// The unique identifer for this view.
 	const id = useDraxId(idProp);
 
-	// Scrollable view, used for scrolling.
+	// Scrollable view, used for scrolling and measuring children
 	const scrollRef = useRef<ScrollView | null>(null);
 
-	// ScrollView node handle, used for measuring children.
-	const nodeHandleRef = useRef<number | null>(null);
-
 	// Container view measurements, for scrolling by percentage.
 	const containerMeasurementsRef = useRef<DraxViewMeasurements | undefined>(undefined);
 
@@ -215,7 +211,6 @@ const DraxScrollViewUnforwarded = (
 	const setScrollViewRefs = useCallback(
 		(ref: ScrollView | null) => {
 			scrollRef.current = ref;
-			nodeHandleRef.current = ref && findNodeHandle(ref);
 			if (forwardedRef) {
 				if (typeof forwardedRef === 'function') {
 					forwardedRef(ref);
@@ -258,7 +253,7 @@ const DraxScrollViewUnforwarded = (
 			onMonitorDragEnd={resetScroll}
 			onMonitorDragDrop={resetScroll}
 		>
-			<DraxSubprovider parent={{ id, nodeHandleRef }}>
+			<DraxSubprovider parent={{ id, viewRef: scrollRef }}>
 				<ScrollView
 					{...scrollViewProps}
 					ref={setScrollViewRefs}

src/DraxView.tsx

@@ -10,7 +10,6 @@ import {
 	Animated,
 	View,
 	StyleSheet,
-	findNodeHandle,
 	Dimensions,
 	ViewStyle,
 	StyleProp,
@@ -132,12 +131,9 @@ export const DraxView = (
 	// The unique identifier for this view.
 	const id = useDraxId(idProp);
 
-	// The underlying View, for measuring.
+	// The underlying View, for measuring and for subprovider nesting if this is a Drax parent view.
 	const viewRef = useRef<View | null>(null);
 
-	// The underlying View node handle, used for subprovider nesting if this is a Drax parent view.
-	const nodeHandleRef = useRef<number | null>(null);
-
 	// This view's measurements, for reference.
 	const measurementsRef = useRef<DraxViewMeasurements | undefined>(undefined);
 
@@ -151,7 +147,7 @@ export const DraxView = (
 		updateViewMeasurements,
 		handleGestureEvent,
 		handleGestureStateChange,
-		rootNodeHandleRef,
+		rootViewRef,
 		parent: contextParent,
 	} = useDraxContext();
 
@@ -160,7 +156,7 @@ export const DraxView = (
 	const parentId = parent?.id;
 
 	// Identify parent node handle ref.
-	const parentNodeHandleRef = parent ? parent.nodeHandleRef : rootNodeHandleRef;
+	const parentViewRef = parent ? parent.viewRef : rootViewRef;
 
 	// Register and unregister with Drax context when necessary.
 	useEffect(
@@ -412,14 +408,14 @@ export const DraxView = (
 		(measurementHandler?: DraxViewMeasurementHandler) => {
 			const view = viewRef.current;
 			if (view) {
-				const nodeHandle = parentNodeHandleRef.current;
-				if (nodeHandle) {
+				if (parentViewRef.current) {
 					const measureCallback = measurementHandler
 						? buildMeasureCallback(measurementHandler)
 						: updateMeasurements;
 					// console.log('definitely measuring in reference to something');
 					view.measureLayout(
-						nodeHandle,
+						// @ts-ignore
+						parentViewRef.current,
 						measureCallback,
 						() => {
 							// console.log('Failed to measure Drax view in relation to parent nodeHandle');
@@ -433,7 +429,7 @@ export const DraxView = (
 			}
 		},
 		[
-			parentNodeHandleRef,
+			parentViewRef,
 			buildMeasureCallback,
 			updateMeasurements,
 		],
@@ -576,7 +572,7 @@ export const DraxView = (
 			if (isParent) {
 				// This is a Drax parent, so wrap children in subprovider.
 				content = (
-					<DraxSubprovider parent={{ id, nodeHandleRef }}>
+					<DraxSubprovider parent={{ id, viewRef }}>
 						{content}
 					</DraxSubprovider>
 				);
@@ -589,14 +585,13 @@ export const DraxView = (
 			children,
 			isParent,
 			id,
-			nodeHandleRef,
+			viewRef,
 		],
 	);
 
 	const setViewRefs = useCallback(
 		(ref: View | null) => {
 			viewRef.current = ref;
-			nodeHandleRef.current = ref && findNodeHandle(ref);
 		},
 		[],
 	);

src/types.ts

@@ -1,10 +1,13 @@
 import { RefObject, ReactNode } from 'react';
 import {
-	ViewProps,
 	Animated,
-	FlatListProps,
+	View,
+	ViewProps,
 	ViewStyle,
 	StyleProp,
+	FlatList,
+	FlatListProps,
+	ScrollView,
 	ScrollViewProps,
 	ListRenderItemInfo,
 } from 'react-native';
@@ -573,8 +576,8 @@ export interface DraxContextValue {
 	/** Handle gesture event for a registered Drax view */
 	handleGestureEvent: (id: string, event: DraxGestureEvent) => void;
 
-	/** Root node handle ref for the Drax provider, for measuring non-parented views in relation to */
-	rootNodeHandleRef: RefObject<number | null>;
+	/** Root View ref for the Drax provider, for measuring non-parented views in relation to */
+	rootViewRef: RefObject<View | null>;
 
 	/** Drax parent view for all views under this context, when nesting */
 	parent?: DraxParentView;
@@ -603,8 +606,8 @@ export interface DraxViewRegistration {
 export interface DraxParentView {
 	/** Drax view id of the parent */
 	id: string;
-	/** Ref to node handle of the parent, for measuring relative to */
-	nodeHandleRef: RefObject<number | null>;
+	/** View Ref of the parent, for measuring relative to */
+	viewRef: RefObject<FlatList | ScrollView | View | null>;
 }
 
 /** Function that receives a Drax view measurement */