Knight Moves
A chess knight puzzle — drag the knight to valid L-shaped moves. Demonstrates conditional drop acceptance with acceptsDrag.
Key Concepts
- Conditional acceptance — only valid knight moves are accepted
acceptsDrag— returnstrueonly for L-shaped destinations- Visual feedback — valid squares highlight during drag
- Grid layout — 8x8 chess board
Features Shown
| Feature | How |
|---|---|
acceptsDrag | Validates L-shaped knight moves |
receivingStyle | Valid squares highlight green |
payload | Knight carries its current position |
| Grid of DraxViews | 64 squares, each a receptive DraxView |
Source Code
example/app/(tabs)/knight-moves.tsx
// Full source available at:
// https://github.com/nuclearpasta/react-native-drax/blob/main/example/app/(tabs)/knight-moves.tsx
Related
- Drop Zone Acceptance Guide — Conditional drops
- Drag & Drop Guide — Free-form DnD