DraxProvider

Context provider that manages drag state, the view registry, spatial index, and hover layer. Wrap your drag-and-drop area with a DraxProvider.

Import

import { DraxProvider } from 'react-native-drax';
// or
import { Drax } from 'react-native-drax';
// then use Drax.Provider

Usage

<DraxProvider>
  <DraxView payload="item-1" />
  <DraxView onReceiveDragDrop={handleDrop} />
</DraxProvider>

Props

Prop	Type	Default	Description
style	StyleProp<ViewStyle>	—	Style for the provider's root view
debug	boolean	false	Enable debug logging
children	ReactNode	—	Child components

Responsibilities

• View Registry — Tracks all mounted DraxView instances with their measurements and props
• Spatial Index — Maintains a SharedValue<SpatialEntry[]> for UI-thread hit-testing
• Drag State — SharedValues for draggedIdSV, receiverIdSV, dragPhaseSV, hoverPositionSV
• Hover Layer — Renders the floating copy of the dragged view
• Callback Dispatch — Routes handleDragStart, handleReceiverChange, handleDragEnd to registered views

Multiple Providers

You can have multiple DraxProvider instances for independent drag contexts:

<DraxProvider>
  {/* These views can only drag within this provider */}
</DraxProvider>

<DraxProvider>
  {/* Independent drag context */}
</DraxProvider>

Related

• DraxView — The core draggable/receptive view
• Core Concepts — Architecture overview