diff --git a/src/DraxList.tsx b/src/DraxList.tsx index 402ebc0..c18fdd7 100644 --- a/src/DraxList.tsx +++ b/src/DraxList.tsx @@ -16,7 +16,6 @@ import { NativeSyntheticEvent, FlatList, Animated, - findNodeHandle, StyleSheet, } from 'react-native'; @@ -90,12 +89,9 @@ const DraxListUnforwarded = ( // 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 | null>(null); - // FlatList node handle, used for measuring children. - const nodeHandleRef = useRef(null); - // Container view measurements, for scrolling by percentage. const containerMeasurementsRef = useRef(undefined); @@ -293,7 +289,6 @@ const DraxListUnforwarded = ( 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 = ( onMonitorDragEnd={onMonitorDragEnd} onMonitorDragDrop={onMonitorDragDrop} > - + (null); + const rootViewRef = useRef(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 ( {children} (null); - // ScrollView node handle, used for measuring children. - const nodeHandleRef = useRef(null); - // Container view measurements, for scrolling by percentage. const containerMeasurementsRef = useRef(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} > - + (null); - // The underlying View node handle, used for subprovider nesting if this is a Drax parent view. - const nodeHandleRef = useRef(null); - // This view's measurements, for reference. const measurementsRef = useRef(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 = ( - + {content} ); @@ -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); }, [], ); diff --git a/src/types.ts b/src/types.ts index 399f279..d7235ea 100644 --- a/src/types.ts +++ b/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; + /** Root View ref for the Drax provider, for measuring non-parented views in relation to */ + rootViewRef: RefObject; /** 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; + /** View Ref of the parent, for measuring relative to */ + viewRef: RefObject; } /** Function that receives a Drax view measurement */