react-native-chess-kit 0.5.0 → 0.5.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 anas-asghar4831
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 anas-asghar4831
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,168 +1,168 @@
-# react-native-chess-kit
-
-High-performance chess board for React Native. Built for 60fps on budget Android devices.
-
-## Performance
-
-| Metric | react-native-chess-kit | expo-chessboard |
-|--------|----------------------|-----------------|
-| Gesture handlers | 1 (centralized) | 32 (one per piece) |
-| Mounted components | ~40 | ~281 |
-| Native views | ~75 | ~470 |
-| React Context providers | 0 | 8 |
-| Re-renders during drag | 0 | Per-frame |
-
-Zero React re-renders during drag -- all animation runs on the UI thread via Reanimated worklets. Pieces animate only `transform` + `opacity` (Reanimated's fast path). Stable piece IDs survive position changes without unmount/remount cycles.
-
-## Installation
-
-```bash
-npm install react-native-chess-kit
-```
-
-### Peer dependencies
-
-```bash
-npm install react-native-reanimated react-native-gesture-handler chess.js
-```
-
-| Package | Version |
-|---------|---------|
-| react-native-reanimated | >= 3.0.0 |
-| react-native-gesture-handler | >= 2.0.0 |
-| chess.js | >= 1.0.0 |
-| react | >= 18.0.0 |
-| react-native | >= 0.70.0 |
-
-## Usage
-
-```tsx
-import { useRef } from 'react';
-import { Board } from 'react-native-chess-kit';
-import type { BoardRef } from 'react-native-chess-kit';
-
-function ChessScreen() {
-  const boardRef = useRef<BoardRef>(null);
-
-  return (
-    <Board
-      ref={boardRef}
-      fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-      orientation="white"
-      boardSize={360}
-      gestureEnabled={true}
-      player="white"
-      colors={{ light: '#eeeed2', dark: '#769656' }}
-      moveDuration={200}
-      withLetters={true}
-      withNumbers={true}
-      showLegalMoves={true}
-      moveMethod="both"
-      onMove={({ from, to }) => {
-        console.log(`Moved from ${from} to ${to}`);
-      }}
-    />
-  );
-}
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `fen` | `string` | required | Board position in FEN notation |
-| `orientation` | `'white' \| 'black'` | required | Which color is at the bottom |
-| `boardSize` | `number` | required | Board width/height in pixels |
-| `gestureEnabled` | `boolean` | required | Whether touch interaction is enabled |
-| `player` | `'white' \| 'black' \| 'both'` | required | Which side can move pieces |
-| `colors` | `{ light: string, dark: string }` | required | Square colors |
-| `moveDuration` | `number` | required | Animation duration in ms (0 = instant) |
-| `withLetters` | `boolean` | required | Show file labels (a-h) |
-| `withNumbers` | `boolean` | required | Show rank numbers (1-8) |
-| `showLegalMoves` | `boolean` | required | Show legal move dots on piece selection |
-| `moveMethod` | `'drag' \| 'click' \| 'both'` | required | How the user moves pieces |
-| `onMove` | `(info: { from, to }) => void` | optional | Called after a move gesture completes |
-| `renderPiece` | `(code, size) => ReactElement` | optional | Custom piece renderer |
-
-## Ref API
-
-```ts
-const boardRef = useRef<BoardRef>(null);
-
-// Programmatic move (e.g. opponent's move, puzzle auto-play)
-boardRef.current?.move({ from: 'e2', to: 'e4' });
-
-// Highlight a square
-boardRef.current?.highlight('e4', 'rgba(255, 255, 0, 0.5)');
-
-// Clear all highlights
-boardRef.current?.clearHighlights();
-
-// Reset to a new position
-boardRef.current?.resetBoard('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1');
-
-// Undo the last visual move (snap back)
-boardRef.current?.undo();
-```
-
-## Custom Piece Rendering
-
-Use `renderPiece` to provide your own piece images:
-
-```tsx
-import { Image } from 'expo-image';
-
-const PIECE_IMAGES = {
-  wp: require('./assets/pieces/wp.png'),
-  wn: require('./assets/pieces/wn.png'),
-  // ... etc
-};
-
-<Board
-  renderPiece={(code, size) => (
-    <Image
-      source={PIECE_IMAGES[code]}
-      style={{ width: size, height: size }}
-      cachePolicy="memory-disk"
-    />
-  )}
-  // ... other props
-/>
-```
-
-## Exports
-
-```ts
-// Component
-export { Board } from 'react-native-chess-kit';
-
-// Types
-export type {
-  BoardRef,
-  BoardProps,
-  BoardColors,
-  BoardPiece,
-  ChessColor,
-  MoveMethod,
-  GestureState,
-  LegalMoveTarget,
-  ParsedPiece,
-} from 'react-native-chess-kit';
-
-// Utilities (useful for overlay positioning)
-export { squareToXY, xyToSquare } from 'react-native-chess-kit';
-```
-
-## Architecture
-
-The board follows the chess.com / lichess pattern:
-
-- **Single gesture handler** at the board level (not per-piece)
-- **Reanimated shared values** for drag state (zero JS thread work during drag)
-- **Stable piece IDs** via smart FEN diffing (pieces survive position changes)
-- **chess.js** for internal legal move validation
-- **Worklet-only animation** using transform + opacity (Reanimated fast path)
-
-## License
-
-MIT
+# react-native-chess-kit
+
+High-performance chess board for React Native. Built for 60fps on budget Android devices.
+
+## Performance
+
+| Metric | react-native-chess-kit | expo-chessboard |
+|--------|----------------------|-----------------|
+| Gesture handlers | 1 (centralized) | 32 (one per piece) |
+| Mounted components | ~40 | ~281 |
+| Native views | ~75 | ~470 |
+| React Context providers | 0 | 8 |
+| Re-renders during drag | 0 | Per-frame |
+
+Zero React re-renders during drag -- all animation runs on the UI thread via Reanimated worklets. Pieces animate only `transform` + `opacity` (Reanimated's fast path). Stable piece IDs survive position changes without unmount/remount cycles.
+
+## Installation
+
+```bash
+npm install react-native-chess-kit
+```
+
+### Peer dependencies
+
+```bash
+npm install react-native-reanimated react-native-gesture-handler chess.js
+```
+
+| Package | Version |
+|---------|---------|
+| react-native-reanimated | >= 3.0.0 |
+| react-native-gesture-handler | >= 2.0.0 |
+| chess.js | >= 1.0.0 |
+| react | >= 18.0.0 |
+| react-native | >= 0.70.0 |
+
+## Usage
+
+```tsx
+import { useRef } from 'react';
+import { Board } from 'react-native-chess-kit';
+import type { BoardRef } from 'react-native-chess-kit';
+
+function ChessScreen() {
+  const boardRef = useRef<BoardRef>(null);
+
+  return (
+    <Board
+      ref={boardRef}
+      fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+      orientation="white"
+      boardSize={360}
+      gestureEnabled={true}
+      player="white"
+      colors={{ light: '#eeeed2', dark: '#769656' }}
+      moveDuration={200}
+      withLetters={true}
+      withNumbers={true}
+      showLegalMoves={true}
+      moveMethod="both"
+      onMove={({ from, to }) => {
+        console.log(`Moved from ${from} to ${to}`);
+      }}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fen` | `string` | required | Board position in FEN notation |
+| `orientation` | `'white' \| 'black'` | required | Which color is at the bottom |
+| `boardSize` | `number` | required | Board width/height in pixels |
+| `gestureEnabled` | `boolean` | required | Whether touch interaction is enabled |
+| `player` | `'white' \| 'black' \| 'both'` | required | Which side can move pieces |
+| `colors` | `{ light: string, dark: string }` | required | Square colors |
+| `moveDuration` | `number` | required | Animation duration in ms (0 = instant) |
+| `withLetters` | `boolean` | required | Show file labels (a-h) |
+| `withNumbers` | `boolean` | required | Show rank numbers (1-8) |
+| `showLegalMoves` | `boolean` | required | Show legal move dots on piece selection |
+| `moveMethod` | `'drag' \| 'click' \| 'both'` | required | How the user moves pieces |
+| `onMove` | `(info: { from, to }) => void` | optional | Called after a move gesture completes |
+| `renderPiece` | `(code, size) => ReactElement` | optional | Custom piece renderer |
+
+## Ref API
+
+```ts
+const boardRef = useRef<BoardRef>(null);
+
+// Programmatic move (e.g. opponent's move, puzzle auto-play)
+boardRef.current?.move({ from: 'e2', to: 'e4' });
+
+// Highlight a square
+boardRef.current?.highlight('e4', 'rgba(255, 255, 0, 0.5)');
+
+// Clear all highlights
+boardRef.current?.clearHighlights();
+
+// Reset to a new position
+boardRef.current?.resetBoard('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1');
+
+// Undo the last visual move (snap back)
+boardRef.current?.undo();
+```
+
+## Custom Piece Rendering
+
+Use `renderPiece` to provide your own piece images:
+
+```tsx
+import { Image } from 'expo-image';
+
+const PIECE_IMAGES = {
+  wp: require('./assets/pieces/wp.png'),
+  wn: require('./assets/pieces/wn.png'),
+  // ... etc
+};
+
+<Board
+  renderPiece={(code, size) => (
+    <Image
+      source={PIECE_IMAGES[code]}
+      style={{ width: size, height: size }}
+      cachePolicy="memory-disk"
+    />
+  )}
+  // ... other props
+/>
+```
+
+## Exports
+
+```ts
+// Component
+export { Board } from 'react-native-chess-kit';
+
+// Types
+export type {
+  BoardRef,
+  BoardProps,
+  BoardColors,
+  BoardPiece,
+  ChessColor,
+  MoveMethod,
+  GestureState,
+  LegalMoveTarget,
+  ParsedPiece,
+} from 'react-native-chess-kit';
+
+// Utilities (useful for overlay positioning)
+export { squareToXY, xyToSquare } from 'react-native-chess-kit';
+```
+
+## Architecture
+
+The board follows the chess.com / lichess pattern:
+
+- **Single gesture handler** at the board level (not per-piece)
+- **Reanimated shared values** for drag state (zero JS thread work during drag)
+- **Stable piece IDs** via smart FEN diffing (pieces survive position changes)
+- **chess.js** for internal legal move validation
+- **Worklet-only animation** using transform + opacity (Reanimated fast path)
+
+## License
+
+MIT

package/lib/commonjs/board-annotations.js

@@ -18,11 +18,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 // Annotations layer
 // ---------------------------------------------------------------------------
 
-/**
- * Text annotation badges on chess squares (!, ?, !!, ??, etc.).
- *
- * Each annotation appears as a small colored badge at the top-right
- * corner of the target square. Positioned absolutely, pointer-events none.
+/**
+ * Text annotation badges on chess squares (!, ?, !!, ??, etc.).
+ *
+ * Each annotation appears as a small colored badge at the top-right
+ * corner of the target square. Positioned absolutely, pointer-events none.
  */
 const BoardAnnotations = exports.BoardAnnotations = /*#__PURE__*/_react.default.memo(function BoardAnnotations({
   boardSize,
@@ -81,9 +81,9 @@ const BoardAnnotations = exports.BoardAnnotations = /*#__PURE__*/_react.default.
 // Standalone export for advanced consumers
 // ---------------------------------------------------------------------------
 
-/**
- * Single annotation badge component.
- * Exported for consumers who build their own overlay layers.
+/**
+ * Single annotation badge component.
+ * Exported for consumers who build their own overlay layers.
  */
 const Annotation = exports.Annotation = /*#__PURE__*/_react.default.memo(function Annotation({
   square,

package/lib/commonjs/board-arrows.js

@@ -52,13 +52,13 @@ function calculateArrowPath(from, to, shortenBy) {
 // Combined arrows + shapes SVG layer
 // ---------------------------------------------------------------------------
 
-/**
- * SVG overlay for arrows and shapes drawn on the board.
- *
- * Uses a percentage-based 100x100 viewBox so coordinates map cleanly
- * to the 8x8 grid (each square = 12.5 x 12.5 units).
- *
- * Renders above the pieces layer so arrows are always visible.
+/**
+ * SVG overlay for arrows and shapes drawn on the board.
+ *
+ * Uses a percentage-based 100x100 viewBox so coordinates map cleanly
+ * to the 8x8 grid (each square = 12.5 x 12.5 units).
+ *
+ * Renders above the pieces layer so arrows are always visible.
  */
 const BoardArrows = exports.BoardArrows = /*#__PURE__*/_react.default.memo(function BoardArrows({
   boardSize,

package/lib/commonjs/board-background.js

@@ -8,11 +8,11 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 64 static colored squares forming the chess board grid.
- *
- * These are plain Views with backgroundColor — no animations, no gesture
- * handlers. They never re-render after mount unless the board theme changes.
+/**
+ * 64 static colored squares forming the chess board grid.
+ *
+ * These are plain Views with backgroundColor — no animations, no gesture
+ * handlers. They never re-render after mount unless the board theme changes.
  */
 const BoardBackground = exports.BoardBackground = /*#__PURE__*/_react.default.memo(function BoardBackground({
   boardSize,

package/lib/commonjs/board-coordinates.js

@@ -13,14 +13,14 @@ const FILES_BLACK = ['h', 'g', 'f', 'e', 'd', 'c', 'b', 'a'];
 const RANKS_WHITE = ['8', '7', '6', '5', '4', '3', '2', '1'];
 const RANKS_BLACK = ['1', '2', '3', '4', '5', '6', '7', '8'];
 
-/**
- * File letters (a-h) and rank numbers (1-8) drawn on or around the board.
- *
- * Two modes:
- * - **inside** (default): absolute-positioned inside each edge square, colors
- *   alternate to contrast with the square behind them.
- * - **outside**: rendered in a gutter area around the board. Rank numbers to
- *   the left, file letters along the bottom. Uses the dark square color.
+/**
+ * File letters (a-h) and rank numbers (1-8) drawn on or around the board.
+ *
+ * Two modes:
+ * - **inside** (default): absolute-positioned inside each edge square, colors
+ *   alternate to contrast with the square behind them.
+ * - **outside**: rendered in a gutter area around the board. Rank numbers to
+ *   the left, file letters along the bottom. Uses the dark square color.
  */
 const BoardCoordinates = exports.BoardCoordinates = /*#__PURE__*/_react.default.memo(function BoardCoordinates({
   boardSize,

package/lib/commonjs/board-drag-ghost.js

@@ -9,12 +9,12 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Floating piece that follows the user's finger during drag.
- *
- * Only ONE instance exists — not one per piece. It reads drag position
- * from shared values on the UI thread, so zero JS bridge calls and
- * zero re-renders while dragging.
+/**
+ * Floating piece that follows the user's finger during drag.
+ *
+ * Only ONE instance exists — not one per piece. It reads drag position
+ * from shared values on the UI thread, so zero JS bridge calls and
+ * zero re-renders while dragging.
  */
 const BoardDragGhost = exports.BoardDragGhost = /*#__PURE__*/_react.default.memo(function BoardDragGhost({
   squareSize,
@@ -63,10 +63,10 @@ const BoardDragGhost = exports.BoardDragGhost = /*#__PURE__*/_react.default.memo
   });
 });
 
-/**
- * Inner content that renders the actual piece image.
- * Separate component so the Animated.View wrapper doesn't need
- * to re-render when the piece code changes — it uses shared value.
+/**
+ * Inner content that renders the actual piece image.
+ * Separate component so the Animated.View wrapper doesn't need
+ * to re-render when the piece code changes — it uses shared value.
  */
 const DragGhostContent = /*#__PURE__*/_react.default.memo(function DragGhostContent({
   renderPiece,

package/lib/commonjs/board-highlights.js

@@ -19,15 +19,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 // Static highlights (View-based, no animation needed)
 // ---------------------------------------------------------------------------
 
-/**
- * Renders all board square highlights as a single layer.
- *
- * Combines multiple highlight sources (last move, check, selected piece,
- * premoves, custom, and imperative) into one flat list of colored rectangles.
- * Rendered between the background and pieces layers.
- *
- * Uses plain Views (not Animated) because highlights change discretely
- * on move events, not during animation frames.
+/**
+ * Renders all board square highlights as a single layer.
+ *
+ * Combines multiple highlight sources (last move, check, selected piece,
+ * premoves, custom, and imperative) into one flat list of colored rectangles.
+ * Rendered between the background and pieces layers.
+ *
+ * Uses plain Views (not Animated) because highlights change discretely
+ * on move events, not during animation frames.
  */
 const BoardHighlights = exports.BoardHighlights = /*#__PURE__*/_react.default.memo(function BoardHighlights({
   boardSize,
@@ -131,9 +131,9 @@ const BoardHighlights = exports.BoardHighlights = /*#__PURE__*/_react.default.me
 // Drag target highlight (Animated, updates on UI thread during drag)
 // ---------------------------------------------------------------------------
 
-/**
- * Highlight on the square currently under the dragged piece.
- * Uses Reanimated shared values for zero-JS-bridge updates during drag.
+/**
+ * Highlight on the square currently under the dragged piece.
+ * Uses Reanimated shared values for zero-JS-bridge updates during drag.
  */
 const DragTargetHighlight = exports.DragTargetHighlight = /*#__PURE__*/_react.default.memo(function DragTargetHighlight({
   squareSize,
@@ -183,9 +183,9 @@ const DragTargetHighlight = exports.DragTargetHighlight = /*#__PURE__*/_react.de
 // Standalone SquareHighlight (exported for advanced consumers)
 // ---------------------------------------------------------------------------
 
-/**
- * Single square highlight component.
- * Exported for consumers who build their own overlay layers.
+/**
+ * Single square highlight component.
+ * Exported for consumers who build their own overlay layers.
  */
 const SquareHighlight = exports.SquareHighlight = /*#__PURE__*/_react.default.memo(function SquareHighlight({
   square,

package/lib/commonjs/board-legal-dots.js

@@ -9,11 +9,11 @@ var _reactNative = require("react-native");
 var _useBoardPieces = require("./use-board-pieces");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Legal move indicator dots, rendered only when a piece is selected.
- *
- * Dots are CONDITIONALLY rendered (only for actual legal move squares,
- * typically 5-15) instead of always mounting 64 invisible dot views.
+/**
+ * Legal move indicator dots, rendered only when a piece is selected.
+ *
+ * Dots are CONDITIONALLY rendered (only for actual legal move squares,
+ * typically 5-15) instead of always mounting 64 invisible dot views.
  */
 const BoardLegalDots = exports.BoardLegalDots = /*#__PURE__*/_react.default.memo(function BoardLegalDots({
   legalMoves,

package/lib/commonjs/board-piece.js

@@ -9,9 +9,9 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * Animate a shared value using the provided AnimationConfig.
- * Falls back to withTiming with moveDuration for backwards compatibility.
+/**
+ * Animate a shared value using the provided AnimationConfig.
+ * Falls back to withTiming with moveDuration for backwards compatibility.
  */
 function animateValue(target, config, moveDuration) {
   if (config) {
@@ -34,28 +34,28 @@ function animateValue(target, config, moveDuration) {
   });
 }
 
-/**
- * A single animated chess piece.
- *
- * Uses two nested Animated.Views to avoid the Reanimated warning
- * "Property opacity may be overwritten by a layout animation":
- *
- * Outer view: position (transform) + exiting layout animation (FadeOut)
- * Inner view: drag-hide opacity
- *
- * Only `transform` and `opacity` are animated — Reanimated's fast path
- * on Android. No layout properties (top/left/width/height), avoiding
- * costly layout recalculations on low-end devices.
- *
- * During drag:
- * - Inner view hides (opacity: 0) — the drag ghost shows instead
- *
- * After a move:
- * - Outer view snaps to new position via withTiming/withSpring
- *
- * On capture (unmount):
- * - Outer view plays the exitingAnimation (default: FadeOut, no conflict with inner opacity)
- * - Pass exitingAnimation={undefined} to disable (instant disappear on full board remount)
+/**
+ * A single animated chess piece.
+ *
+ * Uses two nested Animated.Views to avoid the Reanimated warning
+ * "Property opacity may be overwritten by a layout animation":
+ *
+ * Outer view: position (transform) + exiting layout animation (FadeOut)
+ * Inner view: drag-hide opacity
+ *
+ * Only `transform` and `opacity` are animated — Reanimated's fast path
+ * on Android. No layout properties (top/left/width/height), avoiding
+ * costly layout recalculations on low-end devices.
+ *
+ * During drag:
+ * - Inner view hides (opacity: 0) — the drag ghost shows instead
+ *
+ * After a move:
+ * - Outer view snaps to new position via withTiming/withSpring
+ *
+ * On capture (unmount):
+ * - Outer view plays the exitingAnimation (default: FadeOut, no conflict with inner opacity)
+ * - Pass exitingAnimation={undefined} to disable (instant disappear on full board remount)
  */
 const BoardPieceView = exports.BoardPieceView = /*#__PURE__*/_react.default.memo(function BoardPieceView({
   targetX,