react-native-tree-multi-select 3.0.0-beta.2 → 3.0.0-beta.4

package/src/TreeView.tsx

@@ -1,4 +1,13 @@
-import React, { startTransition, useId } from "react";
+import {
+	forwardRef,
+	startTransition,
+	useCallback,
+	useEffect,
+	useId,
+	useImperativeHandle,
+	useRef,
+	type ForwardedRef,
+} from "react";
 import type {
 	TreeNode,
 	TreeViewProps,
@@ -15,9 +24,11 @@ import {
 	collapseAll,
 	toggleCheckboxes,
 	expandNodes,
-	collapseNodes
+	collapseNodes,
+	recalculateCheckedStates,
+	moveTreeNode,
 } from "./helpers";
-import { getTreeViewStore, useTreeViewStore } from "./store/treeView.store";
+import { deleteTreeViewStore, getTreeViewStore, useTreeViewStore } from "./store/treeView.store";
 import usePreviousState from "./utils/usePreviousState";
 import { useShallow } from "zustand/react/shallow";
 import useDeepCompareEffect from "./utils/useDeepCompareEffect";
@@ -25,13 +36,13 @@ import { typedMemo } from "./utils/typedMemo";
 import type {
 	ScrollToNodeHandlerRef,
 	ScrollToNodeParams
-} from "./handlers/ScrollToNodeHandler";
-import type { DragEndEvent } from "./types/dragDrop.types";
+} from "./hooks/useScrollToNode";
+import type { DragEndEvent, DropPosition } from "./types/dragDrop.types";
 import { fastIsEqual } from "fast-is-equal";
 
 function _innerTreeView<ID>(
 	props: TreeViewProps<ID>,
-	ref: React.ForwardedRef<TreeViewRef<ID>>
+	ref: ForwardedRef<TreeViewRef<ID>>
 ) {
 	const {
 		data,
@@ -57,16 +68,11 @@ function _innerTreeView<ID>(
 
 		CustomNodeRowComponent,
 
-		dragEnabled,
-		onDragEnd,
-		longPressDuration,
-		autoScrollThreshold,
-		autoScrollSpeed,
-		dragOverlayOffset,
-		autoExpandDelay,
-		dragDropCustomizations,
+		dragAndDrop,
 	} = props;
 
+	const onDragEnd = dragAndDrop?.onDragEnd;
+
 	const storeId = useId();
 
 	const {
@@ -109,7 +115,7 @@ function _innerTreeView<ID>(
 		})
 	));
 
-	React.useImperativeHandle(ref, () => ({
+	useImperativeHandle(ref, () => ({
 		selectAll: () => selectAll(storeId),
 		unselectAll: () => unselectAll(storeId),
 
@@ -129,15 +135,17 @@ function _innerTreeView<ID>(
 
 		scrollToNodeID,
 
-		getChildToParentMap
+		getChildToParentMap,
+
+		moveNode,
 	}));
 
-	const scrollToNodeHandlerRef = React.useRef<ScrollToNodeHandlerRef<ID>>(null);
+	const scrollToNodeHandlerRef = useRef<ScrollToNodeHandlerRef<ID>>(null);
 	const prevSearchText = usePreviousState(searchText);
-	const internalDataRef = React.useRef<TreeNode<ID>[] | null>(null);
+	const internalDataRef = useRef<TreeNode<ID>[] | null>(null);
 
 	// Wrap onDragEnd to set internalDataRef before calling consumer's callback
-	const wrappedOnDragEnd = React.useCallback((event: DragEndEvent<ID>) => {
+	const wrappedOnDragEnd = useCallback((event: DragEndEvent<ID>) => {
 		internalDataRef.current = event.newTreeData;
 		onDragEnd?.(event);
 	}, [onDragEnd]);
@@ -191,7 +199,24 @@ function _innerTreeView<ID>(
 		return treeViewStore.getState().childToParentMap;
 	}
 
-	const getIds = React.useCallback((node: TreeNode<ID>): ID[] => {
+	function moveNode(nodeId: ID, targetNodeId: ID, position: DropPosition) {
+		const store = getTreeViewStore<ID>(storeId);
+		const currentData = store.getState().initialTreeViewData;
+		const newData = moveTreeNode(currentData, nodeId, targetNodeId, position);
+
+		store.getState().updateInitialTreeViewData(newData);
+		initializeNodeMaps(storeId, newData);
+		recalculateCheckedStates<ID>(storeId);
+
+		if (position === "inside") {
+			expandNodes(storeId, [targetNodeId]);
+		}
+		expandNodes(storeId, [nodeId], true);
+
+		internalDataRef.current = newData;
+	}
+
+	const getIds = useCallback((node: TreeNode<ID>): ID[] => {
 		if (!node.children || node.children.length === 0) {
 			return [node.id];
 		} else {
@@ -199,15 +224,15 @@ function _innerTreeView<ID>(
 		}
 	}, []);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		onCheck?.(Array.from(checked), Array.from(indeterminate));
 	}, [onCheck, checked, indeterminate]);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		onExpand?.(Array.from(expanded));
 	}, [onExpand, expanded]);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		if (searchText) {
 			startTransition(() => {
 				updateExpanded(new Set(initialTreeViewData.flatMap(
@@ -230,11 +255,12 @@ function _innerTreeView<ID>(
 		updateExpanded
 	]);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		return () => {
 			cleanUpTreeViewStore();
+			deleteTreeViewStore(storeId);
 		};
-	}, [cleanUpTreeViewStore]);
+	}, [cleanUpTreeViewStore, storeId]);
 
 	return (
 		<NodeList
@@ -253,20 +279,16 @@ function _innerTreeView<ID>(
 
 			CustomNodeRowComponent={CustomNodeRowComponent}
 
-			dragEnabled={dragEnabled}
-			onDragEnd={wrappedOnDragEnd}
-			longPressDuration={longPressDuration}
-			autoScrollThreshold={autoScrollThreshold}
-			autoScrollSpeed={autoScrollSpeed}
-			dragOverlayOffset={dragOverlayOffset}
-			autoExpandDelay={autoExpandDelay}
-			dragDropCustomizations={dragDropCustomizations}
+			dragAndDrop={dragAndDrop && {
+				...dragAndDrop,
+				onDragEnd: wrappedOnDragEnd,
+			}}
 		/>
 	);
 }
 
-const _TreeView = React.forwardRef(_innerTreeView) as <ID>(
-	props: TreeViewProps<ID> & { ref?: React.ForwardedRef<TreeViewRef<ID>>; }
+const _TreeView = forwardRef(_innerTreeView) as <ID>(
+	props: TreeViewProps<ID> & { ref?: ForwardedRef<TreeViewRef<ID>>; }
 ) => ReturnType<typeof _innerTreeView>;
 
 export const TreeView = typedMemo<typeof _TreeView>(_TreeView);

package/src/components/CheckboxView.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo, useCallback } from "react";
 import {
     Platform,
     StyleSheet,
@@ -13,6 +13,8 @@ import type {
 } from "../types/treeView.types";
 import { Checkbox } from "@futurejj/react-native-checkbox";
 
+// Intentionally narrow: only re-render when the checkbox value or label text changes.
+// Other props (callbacks, styles) are stable references from parent memoization.
 function arePropsEqual(
     prevProps: BuiltInCheckBoxViewProps,
     nextProps: BuiltInCheckBoxViewProps
@@ -23,7 +25,7 @@ function arePropsEqual(
     );
 }
 
-export const CheckboxView = React.memo(_CheckboxView, arePropsEqual);
+export const CheckboxView = memo(_CheckboxView, arePropsEqual);
 
 function _CheckboxView(props: BuiltInCheckBoxViewProps) {
     const {
@@ -43,7 +45,7 @@ function _CheckboxView(props: BuiltInCheckBoxViewProps) {
         },
     } = props;
 
-    const customCheckboxValToCheckboxValType = React.useCallback((
+    const customCheckboxValToCheckboxValType = useCallback((
         customCheckboxValueType: CheckboxValueType
     ) => {
         return customCheckboxValueType === "indeterminate"
@@ -59,7 +61,7 @@ function _CheckboxView(props: BuiltInCheckBoxViewProps) {
      *
      * @param newValue This represents the updated CheckBox value after it's clicked.
      */
-    const onValueChangeModifier = React.useCallback(() => {
+    const onValueChangeModifier = useCallback(() => {
         // If the previous state was 'indeterminate', set checked to true
         if (value === "indeterminate") onValueChange(true);
         else onValueChange(!value);
@@ -106,6 +108,7 @@ export const defaultCheckboxViewStyles = StyleSheet.create({
     },
     checkboxTextStyle: {
         color: "black",
+        /* istanbul ignore next -- Platform.OS is never "android" in jest */
         marginTop: Platform.OS === "android" ? 2 : undefined,
     },
 });

package/src/components/CustomExpandCollapseIcon.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import { type ExpandIconProps } from "../types/treeView.types";
 
 // Function to dynamically load FontAwesomeIcon from either Expo or React Native
@@ -20,7 +20,7 @@ function loadFontAwesomeIcon() {
 // Load the FontAwesomeIcon component
 const FontAwesomeIcon = loadFontAwesomeIcon();
 
-export const CustomExpandCollapseIcon = React.memo(
+export const CustomExpandCollapseIcon = memo(
     _CustomExpandCollapseIcon
 );
 

package/src/components/DragOverlay.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { type ComponentType } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 
 import type {
@@ -10,8 +10,12 @@ import type {
 import { CheckboxView } from "./CheckboxView";
 import { CustomExpandCollapseIcon } from "./CustomExpandCollapseIcon";
 import { defaultIndentationMultiplier } from "../constants/treeView.constants";
+import { getTreeViewStore } from "../store/treeView.store";
+import { getCheckboxValue } from "../helpers";
+import { typedMemo } from "../utils/typedMemo";
 
 interface DragOverlayProps<ID> extends TreeItemCustomizations<ID> {
+    storeId: string;
     overlayY: Animated.Value;
     overlayX: Animated.Value;
     node: __FlattenedTreeNode__<ID>;
@@ -21,18 +25,24 @@ interface DragOverlayProps<ID> extends TreeItemCustomizations<ID> {
 
 function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
     const {
+        storeId,
         overlayY,
         overlayX,
         node,
         level,
         indentationMultiplier = defaultIndentationMultiplier,
-        CheckboxComponent = CheckboxView as React.ComponentType<CheckBoxViewProps>,
+        CheckboxComponent = CheckboxView as ComponentType<CheckBoxViewProps>,
         ExpandCollapseIconComponent = CustomExpandCollapseIcon,
         CustomNodeRowComponent,
         checkBoxViewStyleProps,
         dragDropCustomizations,
     } = props;
 
+    // Read the actual checked state for the dragged node
+    const store = getTreeViewStore<ID>(storeId);
+    const { checked, indeterminate } = store.getState();
+    const checkedValue = getCheckboxValue(checked.has(node.id), indeterminate.has(node.id));
+
     const overlayStyleProps = dragDropCustomizations?.dragOverlayStyleProps;
     const CustomOverlay = dragDropCustomizations?.CustomDragOverlayComponent;
 
@@ -52,13 +62,16 @@ function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
                 { transform: [{ translateX: overlayX }, { translateY: overlayY }] },
             ]}
         >
+            {/* Render priority: CustomDragOverlayComponent > CustomNodeRowComponent > built-in.
+               The overlay is display-only (pointerEvents="none" on parent), so handlers are no-ops.
+               isExpanded is always false because useDragDrop collapses the node at drag start. */}
             {CustomOverlay ? (
-                <CustomOverlay node={node} level={level} />
+                <CustomOverlay node={node} level={level} checkedValue={checkedValue} />
             ) : CustomNodeRowComponent ? (
                 <CustomNodeRowComponent
                     node={node}
                     level={level}
-                    checkedValue={false}
+                    checkedValue={checkedValue}
                     isExpanded={false}
                     onCheck={() => {}}
                     onExpand={() => {}}
@@ -73,7 +86,7 @@ function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
                     <CheckboxComponent
                         text={node.name}
                         onValueChange={() => {}}
-                        value={false}
+                        value={checkedValue}
                         {...checkBoxViewStyleProps}
                     />
                     {node.children?.length ? (
@@ -87,7 +100,7 @@ function _DragOverlay<ID>(props: DragOverlayProps<ID>) {
     );
 }
 
-export const DragOverlay = React.memo(_DragOverlay) as typeof _DragOverlay;
+export const DragOverlay = typedMemo(_DragOverlay);
 
 const styles = StyleSheet.create({
     overlay: {

package/src/components/DropIndicator.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import { Animated, View, StyleSheet } from "react-native";
 import type { DropPosition } from "../types/dragDrop.types";
 
@@ -10,7 +10,7 @@ interface DropIndicatorProps {
     indentationMultiplier: number;
 }
 
-export const DropIndicator = React.memo(function DropIndicator(
+export const DropIndicator = memo(function DropIndicator(
     props: DropIndicatorProps
 ) {
     const {

package/src/components/NodeList.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
 import {
     View,
     StyleSheet,
@@ -9,7 +15,6 @@ import {
 import { FlashList } from "@shopify/flash-list";
 
 import type {
-    CheckboxValueType,
     __FlattenedTreeNode__,
     DropIndicatorStyleProps,
     NodeListProps,
@@ -21,6 +26,7 @@ import { useTreeViewStore } from "../store/treeView.store";
 import {
     getFilteredTreeData,
     getFlattenedTreeData,
+    getCheckboxValue,
     getInnerMostChildrenIdsInTree,
     handleToggleExpand,
     toggleCheckboxes
@@ -29,10 +35,13 @@ import { CheckboxView } from "./CheckboxView";
 import { CustomExpandCollapseIcon } from "./CustomExpandCollapseIcon";
 import { DragOverlay } from "./DragOverlay";
 import type { DropPosition } from "../types/dragDrop.types";
-import { defaultIndentationMultiplier } from "../constants/treeView.constants";
+import {
+    defaultIndentationMultiplier,
+    listHeaderFooterPadding
+} from "../constants/treeView.constants";
 import { useShallow } from "zustand/react/shallow";
 import { typedMemo } from "../utils/typedMemo";
-import { ScrollToNodeHandler } from "../handlers/ScrollToNodeHandler";
+import { useScrollToNode } from "../hooks/useScrollToNode";
 import { useDragDrop } from "../hooks/useDragDrop";
 
 const NodeList = typedMemo(_NodeList);
@@ -54,15 +63,29 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         ExpandCollapseTouchableComponent,
         CustomNodeRowComponent,
 
-        dragEnabled,
+        dragAndDrop,
+    } = props;
+
+    const {
+        enabled: _dragEnabled,
+        onDragStart,
         onDragEnd,
+        onDragCancel,
         longPressDuration = 400,
         autoScrollThreshold = 60,
         autoScrollSpeed = 1.0,
         dragOverlayOffset = -4,
         autoExpandDelay = 800,
-        dragDropCustomizations,
-    } = props;
+        customizations: dragDropCustomizations,
+        canDrop: canDropCallback,
+        maxDepth,
+        canNodeHaveChildren,
+        canDrag,
+    } = dragAndDrop ?? {};
+
+    // When the dragAndDrop prop is provided, drag is enabled by default.
+    // Users can still toggle it off with enabled: false at runtime.
+    const dragEnabled = dragAndDrop ? (_dragEnabled ?? true) : false;
 
     const {
         expanded,
@@ -80,34 +103,43 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         })
     ));
 
-    const flashListRef = React.useRef<FlashList<__FlattenedTreeNode__<ID>> | null>(null);
-    const containerRef = React.useRef<View>(null);
-    const internalDataRef = React.useRef<TreeNode<ID>[] | null>(null);
-    const measuredItemHeightRef = React.useRef(0);
+    const flashListRef = useRef<FlashList<__FlattenedTreeNode__<ID>> | null>(null);
+    const containerRef = useRef<View>(null);
+    const internalDataRef = useRef<TreeNode<ID>[] | null>(null);
+    const measuredItemHeightRef = useRef(0);
 
-    const handleItemLayout = React.useCallback((height: number) => {
+    const handleItemLayout = useCallback((height: number) => {
         if (measuredItemHeightRef.current === 0 && height > 0) {
             measuredItemHeightRef.current = height;
         }
     }, []);
 
-    const [initialScrollIndex, setInitialScrollIndex] = React.useState<number>(-1);
+    const [initialScrollIndex, setInitialScrollIndex] = useState<number>(-1);
 
     // First we filter the tree as per the search term and keys
-    const filteredTree = React.useMemo(() => getFilteredTreeData<ID>(
+    const filteredTree = useMemo(() => getFilteredTreeData<ID>(
         initialTreeViewData,
         searchText.trim().toLowerCase(),
         searchKeys
     ), [initialTreeViewData, searchText, searchKeys]);
 
     // Then we flatten the tree to make it "render-compatible" in a "flat" list
-    const flattenedFilteredNodes = React.useMemo(() => getFlattenedTreeData<ID>(
+    const flattenedFilteredNodes = useMemo(() => getFlattenedTreeData<ID>(
         filteredTree,
         expanded,
     ), [filteredTree, expanded]);
 
+    useScrollToNode<ID>({
+        storeId,
+        scrollToNodeHandlerRef,
+        flashListRef,
+        flattenedFilteredNodes,
+        setInitialScrollIndex,
+        initialScrollNodeID,
+    });
+
     // And update the innermost children id -> required to un/select filtered tree
-    React.useEffect(() => {
+    useEffect(() => {
         const updatedInnerMostChildrenIds = getInnerMostChildrenIdsInTree<ID>(
             filteredTree
         );
@@ -133,8 +165,10 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         flattenedNodes: flattenedFilteredNodes,
         flashListRef,
         containerRef,
-        dragEnabled: dragEnabled ?? false,
+        dragEnabled,
+        onDragStart,
         onDragEnd,
+        onDragCancel,
         longPressDuration,
         autoScrollThreshold,
         autoScrollSpeed,
@@ -143,10 +177,14 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         dragOverlayOffset,
         autoExpandDelay,
         indentationMultiplier: effectiveIndentationMultiplier,
+        canDrop: canDropCallback,
+        maxDepth,
+        canNodeHaveChildren,
+        canDrag,
     });
 
     // Combined onScroll handler
-    const handleScroll = React.useCallback((
+    const handleScroll = useCallback((
         event: NativeSyntheticEvent<NativeScrollEvent>
     ) => {
         scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
@@ -156,7 +194,7 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
         treeFlashListProps?.onScroll?.(event as any);
     }, [scrollOffsetRef, cancelLongPressTimer, treeFlashListProps]);
 
-    const nodeRenderer = React.useCallback((
+    const nodeRenderer = useCallback((
         { item, index }: { item: __FlattenedTreeNode__<ID>; index: number; }
     ) => {
         return (
@@ -223,14 +261,6 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
 
     return (
         <>
-            <ScrollToNodeHandler
-                ref={scrollToNodeHandlerRef}
-                storeId={storeId}
-                flashListRef={flashListRef}
-                flattenedFilteredNodes={flattenedFilteredNodes}
-                setInitialScrollIndex={setInitialScrollIndex}
-                initialScrollNodeID={initialScrollNodeID} />
-
             {dragEnabled ? (
                 <View
                     ref={containerRef}
@@ -240,6 +270,7 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
                     {flashListElement}
                     {isDragging && draggedNode && (
                         <DragOverlay<ID>
+                            storeId={storeId}
                             overlayY={overlayY}
                             overlayX={overlayX}
                             node={draggedNode}
@@ -262,22 +293,10 @@ function _NodeList<ID>(props: NodeListProps<ID>) {
 
 function HeaderFooterView() {
     return (
-        <View style={styles.defaultHeaderFooter} />
+        <View style={{ padding: listHeaderFooterPadding }} />
     );
 }
 
-function getValue(
-    isChecked: boolean,
-    isIndeterminate: boolean
-): CheckboxValueType {
-    if (isIndeterminate) {
-        return "indeterminate";
-    } else if (isChecked) {
-        return true;
-    } else {
-        return false;
-    }
-}
 
 const Node = typedMemo(_Node);
 function _Node<ID>(props: NodeProps<ID>) {
@@ -315,7 +334,7 @@ function _Node<ID>(props: NodeProps<ID>) {
     } = useTreeViewStore<ID>(storeId)(useShallow(
         state => ({
             isExpanded: state.expanded.has(node.id),
-            value: getValue(
+            value: getCheckboxValue(
                 state.checked.has(node.id),
                 state.indeterminate.has(node.id)
             ),
@@ -330,39 +349,53 @@ function _Node<ID>(props: NodeProps<ID>) {
     // Track when this node was dragged so we can swallow the onPress/onCheck
     // that fires when the user lifts their finger after a long-press-initiated drag.
     // The flag is set during render (synchronous) and cleared on the next touch start.
-    const wasDraggedRef = React.useRef(false);
+    // It is also cleared via effect when dragging ends, to prevent stale `true`
+    // values surviving FlashList recycling (where refs persist across items).
+    const wasDraggedRef = useRef(false);
     if (isDraggingGlobal && isBeingDragged) {
         wasDraggedRef.current = true;
     }
 
-    const _onToggleExpand = React.useCallback(() => {
+    useEffect(() => {
+        if (!isDraggingGlobal) {
+            wasDraggedRef.current = false;
+        }
+    }, [isDraggingGlobal]);
+
+    const _onToggleExpand = useCallback(() => {
         if (wasDraggedRef.current) return;
         handleToggleExpand(storeId, node.id);
     }, [storeId, node.id]);
 
-    const _onCheck = React.useCallback(() => {
+    const _onCheck = useCallback(() => {
         if (wasDraggedRef.current) return;
         toggleCheckboxes(storeId, [node.id]);
     }, [storeId, node.id]);
 
-    const handleTouchStart = React.useCallback((e: any) => {
+    const handleTouchStart = useCallback((e: any) => {
         wasDraggedRef.current = false;
         if (!onNodeTouchStart) return;
         const { pageY, locationY } = e.nativeEvent;
         onNodeTouchStart(node.id, pageY, locationY, nodeIndex);
     }, [node.id, nodeIndex, onNodeTouchStart]);
 
-    const handleTouchEnd = React.useCallback(() => {
+    const handleTouchEnd = useCallback(() => {
         onNodeTouchEnd?.();
     }, [onNodeTouchEnd]);
 
-    // Determine opacity for drag state
-    const dragOpacity = dragDropCustomizations?.draggedNodeOpacity ?? 0.3;
-    const nodeOpacity = (isDraggingGlobal && (isBeingDragged || isDragInvalid))
-        ? dragOpacity
-        : 1.0;
-
-    const handleLayout = React.useCallback((e: any) => {
+    // Determine opacity for drag state (separate values for dragged node vs invalid targets).
+    // When CustomNodeRowComponent is used, hand off all visual control
+    // (including drag opacity) to the custom component — it receives
+    // isDraggedNode / isInvalidDropTarget / isDragging props.
+    const draggedOpacity = dragDropCustomizations?.draggedNodeOpacity ?? 0.3;
+    const invalidOpacity = dragDropCustomizations?.invalidTargetOpacity ?? 0.3;
+    const nodeOpacity = CustomNodeRowComponent
+        ? 1.0
+        : isDraggingGlobal
+            ? (isBeingDragged ? draggedOpacity : isDragInvalid ? invalidOpacity : 1.0)
+            : 1.0;
+
+    const handleLayout = useCallback((e: any) => {
         onItemLayout?.(e.nativeEvent.layout.height);
     }, [onItemLayout]);
 
@@ -416,7 +449,6 @@ function _Node<ID>(props: NodeProps<ID>) {
     else {
         return (
             <View
-                {...touchHandlers}
                 onLayout={onItemLayout ? handleLayout : undefined}
                 style={[
                     { opacity: nodeOpacity },
@@ -431,9 +463,12 @@ function _Node<ID>(props: NodeProps<ID>) {
                     isExpanded={isExpanded}
                     onCheck={_onCheck}
                     onExpand={_onToggleExpand}
-                    isDragTarget={isDragInvalid}
+                    isInvalidDropTarget={isDragInvalid}
+                    isDropTarget={isDropTarget}
+                    dropPosition={nodeDropPosition ?? undefined}
                     isDragging={isDraggingGlobal}
                     isDraggedNode={isBeingDragged}
+                    dragHandleProps={touchHandlers}
                 />
             </View>
         );
@@ -503,9 +538,6 @@ function NodeDropIndicator({ position, level, indentationMultiplier, styleProps
 }
 
 const styles = StyleSheet.create({
-    defaultHeaderFooter: {
-        padding: 5
-    },
     nodeExpandableArrowTouchable: {
         flex: 1
     },

package/src/constants/treeView.constants.ts

@@ -1 +1,4 @@
-export const defaultIndentationMultiplier = 15;
+export const defaultIndentationMultiplier = 15;
+
+/** Padding used by the FlashList header/footer component. Total header height = 2 * this value. */
+export const listHeaderFooterPadding = 5;