Collision Modes
Demonstrates the three collision algorithms side-by-side.
Key Concepts
- Center — hover center must be inside receiver (default)
- Intersect — any overlap counts
- Contain — dragged view must be fully inside
Features Shown
| Feature | How |
|---|---|
collisionAlgorithm="center" | Default precise detection |
collisionAlgorithm="intersect" | Forgiving overlap detection |
collisionAlgorithm="contain" | Strict containment |
| Visual feedback | Zones highlight when detection triggers |
Source Code
example/app/(tabs)/collision-modes.tsx
// Full source available at:
// https://github.com/nuclearpasta/react-native-drax/blob/main/example/app/(tabs)/collision-modes.tsx
Related
- Collision Algorithms Guide — Full tutorial
- API: DraxView —
collisionAlgorithmprop