Sortable list with section headers: dropping into an empty section + live drag-target feedback

[OmkarK45]

What I'm building

A sortable list whose data is a flat array interleaving section-header rows and item rows (think portfolio "segments", each holding "constituents"). I'm on the sortable API — useSortableList + SortableContainer + SortableItem (equivalently DraxList), v1.1.0. On drop I map the reordered flat order back to sections by walking it: each header opens a group, each item joins the current group.

Minimal shape that mirrors mine:

type Row =
  | { kind: 'section'; key: string; title: string }
  | { kind: 'item'; key: string; label: string };

// flat data fed to useSortableList / DraxList
const data: Row[] = [
  { kind: 'section', key: 'seg:tech',   title: 'Tech' },
  { kind: 'item',    key: 'ast:AAPL',   label: 'Apple' },
  { kind: 'item',    key: 'ast:MSFT',   label: 'Microsoft' },
  { kind: 'section', key: 'seg:energy', title: 'Energy' }, // <-- EMPTY: no items follow
  { kind: 'section', key: 'seg:pharma', title: 'Pharma' },
  { kind: 'item',    key: 'ast:PFE',    label: 'Pfizer' },
];

// membership re-derived from order on reorder:
// walk rows; each 'section' opens a group; each 'item' joins the current group.

flowchart TB
  classDef section fill:#1f6feb,color:#fff,stroke:#1f6feb
  classDef item fill:#21262d,color:#c9d1d9,stroke:#30363d
  classDef empty fill:#238636,color:#fff,stroke:#2ea043,stroke-width:2px

  S1["section · seg:tech · Tech"]:::section
  A["item · ast:AAPL · Apple"]:::item
  M["item · ast:MSFT · Microsoft"]:::item
  S2["section · seg:energy · Energy — EMPTY"]:::empty
  S3["section · seg:pharma · Pharma"]:::section
  P["item · ast:PFE · Pfizer"]:::item

  S1 --> A --> M --> S2 --> S3 --> P

Loading

Order is top→bottom; each section header owns the items until the next header. seg:energy has no items beneath it.

Only items are draggable (via a drag handle); section headers stay put. The first section is marked fixed as a barrier so an item can't be dragged above it.

Question 1 — dropping into an empty section

An empty section (e.g. seg:energy above) is a single header row with no item slot beneath it. What's the recommended way to let a user drop an item into an empty section, so the reorder places it immediately after that header (→ it becomes that section's first item)?

With onDragPositionChange, hovering the empty header resolves toIndex to the header's own slot, which is ambiguous — it ends up landing the item in the previous section. Is there a supported pattern for "drop into an empty group"?

flowchart TB
  classDef item fill:#21262d,color:#c9d1d9,stroke:#30363d
  classDef empty fill:#238636,color:#fff,stroke:#2ea043,stroke-width:2px
  classDef hdr fill:#1f6feb,color:#fff,stroke:#1f6feb
  classDef slot fill:#161b22,color:#f0f6fc,stroke:#8b949e,stroke-dasharray:5 5

  M["MSFT — last item of Tech"]:::item
  A["slot A · before the Energy header<br/>→ item stays in Tech ❌"]:::slot
  S2["Energy header — EMPTY section"]:::empty
  B["slot B · after the Energy header<br/>→ item joins Energy ✅ desired"]:::slot
  S3["Pharma header"]:::hdr

  M --> A --> S2 --> B --> S3

Loading

Because the empty section is a single header row, hovering it makes onDragPositionChange report slot A (the header's own index), so the item lands back in Tech instead of Energy.

Question 2 — live "which section is the drag over" feedback

While dragging, I'd like to drive UI for the section the item would land in (highlight it / fade a placeholder) — ideally on the UI thread via a SharedValue, without re-rendering the list.

Which signal is intended for this in a sortable list?

• onDragPositionChange (map toIndex → section), or
• per-header onReceiveDragEnter/onReceiveDragExit on the section rows, or
• a container-level onMonitorDragOver (+ monitorOffsetRatio)?

When I tried per-header onReceiveDragEnter/Exit, I got glitches whenever the receive state changed a header's layout/height mid-drag (drops then snap back) — I assume because slot boundaries are measured from the original layout. So I'm unsure of the intended approach.

Environment: react-native-drax 1.1.0 (sortable API), React Native + Reanimated.

Thanks!

[OmkarK45]

Here's a video of what I mean

Screen.Recording.2026-06-25.at.12.00.06.AM.mov