Skip to main content

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​

PropTypeDefaultDescription
styleStyleProp<ViewStyle>—Style for the provider's root view
debugbooleanfalseShow debug overlay with colored borders around all registered views
onDragStart(event: DraxProviderDragEvent) => void—Called when any drag starts
onDrag(event: DraxProviderDragEvent) => void—Called on every gesture update during any drag
onDragEnd(event: DraxProviderDragEvent & { cancelled }) => void—Called when any drag ends
childrenReactNode—Child components

Provider Callbacks​

Listen to all drag events globally without per-view callbacks:

<DraxProvider
  onDragStart={({ draggedId }) => console.log('drag started:', draggedId)}
  onDrag={({ position, receiverId }) => {
    // Fires every frame — use for analytics or conditional UI
  }}
  onDragEnd={({ draggedId, receiverId, cancelled }) => {
    if (!cancelled && receiverId) {
      console.log(`${draggedId} dropped on ${receiverId}`);
    }
  }}
>
  {children}
</DraxProvider>

Debug Mode​

Enable the debug prop to visualize all registered Drax views:

<DraxProvider debug>
  {/* Colored dashed borders appear around every DraxView:
      Blue = draggable, Green = receptive, Orange = both, Yellow = monitor */}
</DraxProvider>

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>