Examples
The example/ directory contains an Expo Router app with 11 screens demonstrating all Drax features. Each example below includes a description, key concepts, and the full source code.
Running the Examples
cd example && yarn start
Use --clear flag after library source changes to bust the Metro cache.
Try It Live
Visit the live interactive demo to try the examples in your browser (Expo web export).
Example Screens
| Example | Features | Links |
|---|---|---|
| Color Drag & Drop | Free-form DnD, drop acceptance, hover styles, snap alignment | ▶️ Live demo · Source |
| Reorderable List | DraxList, animation presets, auto-scroll, inactive styling | ▶️ Live demo · Source |
| Reorderable Grid | Sortable grid, multi-column, numColumns | ▶️ Live demo · Source |
| Mixed-Size Grid | getItemSpan, packGrid, items with different spans | ▶️ Live demo · Source |
| Drag Handles | DraxHandle, only grip starts drag | ▶️ Live demo · Source |
| Drag Bounds | dragBoundsRef, constrained drag area | ▶️ Live demo · Source |
| Collision Modes | Center vs Intersect vs Contain | ▶️ Live demo · Source |
| Cross-List Reorder | FlashList + LegendList + FlatList cross-container drag | ▶️ Live demo · Source |
| Knight Moves | Chess knight puzzle, conditional acceptance | ▶️ Live demo · Source |
| Scrolling | DraxScrollView, auto-scroll, drag from scroll | ▶️ Live demo · Source |
| Stress Test | 100 items in a sortable list | ▶️ Live demo · Source |