{"id":18020786,"url":"https://github.com/enzomanuelmangano/react-native-chessboard","last_synced_at":"2025-09-21T21:08:07.880Z","repository":{"id":37355587,"uuid":"495086024","full_name":"enzomanuelmangano/react-native-chessboard","owner":"enzomanuelmangano","description":"A lightweight, simple, and high-performing chessboard for React Native","archived":false,"fork":false,"pushed_at":"2023-09-30T18:22:00.000Z","size":2001,"stargazers_count":65,"open_issues_count":8,"forks_count":20,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-22T14:11:14.223Z","etag":null,"topics":["chess","chessboard","react-native","reanimated"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enzomanuelmangano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-05-22T14:36:45.000Z","updated_at":"2025-03-03T18:57:18.000Z","dependencies_parsed_at":"2023-02-10T16:30:51.887Z","dependency_job_id":null,"html_url":"https://github.com/enzomanuelmangano/react-native-chessboard","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"1c7c3e0fba2f7671570191ab49adf2d7fd40dc3c"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Freact-native-chessboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Freact-native-chessboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Freact-native-chessboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzomanuelmangano%2Freact-native-chessboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enzomanuelmangano","download_url":"https://codeload.github.com/enzomanuelmangano/react-native-chessboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245738951,"owners_count":20664374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chess","chessboard","react-native","reanimated"],"created_at":"2024-10-30T06:07:38.302Z","updated_at":"2025-09-21T21:08:02.825Z","avatar_url":"https://github.com/enzomanuelmangano.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n👉🏼 React Native Chessboard\n\u003c/h1\u003e\n\nA lightweight, simple, and high-performing chessboard for React Native. \n\nDeeply inspired by the [Chess Youtube Episode](https://youtu.be/JulJJxbP_T0) from the series [\"Can it be done in React Native?\"](https://github.com/wcandillon/can-it-be-done-in-react-native) made by [William Candillon](https://github.com/wcandillon).\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/enzomanuelmangano/react-native-chessboard/blob/main/.assets/chessboard.gif\" title=\"react-native-chessboard\"\u003e\n\u003c/div\u003e\n\n## Disclaimer \n\nIf you want this package in production, use it with caution.\n\n## Installation\n\n**You need to have already installed the following packages:**\n\n- [react-native-reanimated (\u003e= 2.3.0)](https://docs.swmansion.com/react-native-reanimated/docs)\n- [react-native-gesture-handler (\u003e= 2.0.0)](https://docs.swmansion.com/react-native-gesture-handler/docs/)\n\nOpen a Terminal in your project's folder and install the library using `yarn`:\n\n```sh\nyarn add react-native-chessboard\n```\n\nor with `npm`:\n\n```sh\nnpm install react-native-chessboard\n```\n\n## Usage\n\n```jsx\nimport Chessboard from 'react-native-chessboard';\n\nconst App = () =\u003e (\n  \u003cView\n    style={{\n        flex: 1, \n        alignItems: 'center',\n        justifyContent: 'center'\n    }}\n  \u003e\n    \u003cChessboard/\u003e\n  \u003c/View\u003e\n);\n```\n\n## Properties\n\n### `gestureEnabled?: boolean`\n\nEnables gestures for chess pieces.\n\nDefault: `true`\n\n---\n\n### `fen?: string`\n\nIndicates the initial fen position of the chessboard.\n\n---\n\n### `withLetters?: boolean`\n\nDecides whether or not to show the letters on the bottom horizontal axis of the chessboard.\n\nDefault: `true`\n\n---\n\n### `withNumbers?: boolean`\n\nDecides whether or not to show the numbers on the left vertical axis of the chessboard.\n\nDefault: `true`\n\n---\n\n### `boardSize?: number`\n\nIndicates the chessboard width and height.\n\nDefault: `Math.floor(SCREEN_WIDTH / 8) * 8`\n\n---\n\n### `renderPiece?: (piece: PieceType) =\u003e React.ReactElement | null`\n\nIt gives the possibility to customise the chessboard pieces.\n\nIn detail, it takes a PieceType as input, which is constructed as follows: \n\n```ts\ntype Player = 'b' | 'w';\ntype Type = 'q' | 'r' | 'n' | 'b' | 'k' | 'p';\ntype PieceType = `${Player}${Type}`;\n```\n\n---\n\n### `onMove?: (info: ChessMoveInfo) =\u003e void;`\n\nIt's a particularly useful callback if you want to execute an instruction after a move. \n\n```jsx\nimport Chessboard from 'react-native-chessboard';\n\nconst App = () =\u003e (\n  \u003cView\n    style={{\n        flex: 1, \n        alignItems: 'center',\n        justifyContent: 'center'\n    }}\n  \u003e\n    \u003cChessboard\n        onMove={({ state }) =\u003e {\n          if (state.in_checkmate) {\n            console.log('Life goes on.');\n          }\n        }}\n      /\u003e\n  \u003c/View\u003e\n);\n```\n\nIn detail, you can access these parameters: \n- `in_check: boolean`\n- `in_checkmate: boolean`\n- `in_draw: boolean`\n- `in_stalemate: boolean`\n- `in_threefold_repetition: boolean`\n- `insufficient_material: boolean`\n- `game_over: boolean`\n- `fen: boolean`\n\nP.S: These parameters are the outputs given by the respective functions used by chess.js (on which the package is built).\n\n---\n\n### `colors?: ChessboardColorsType` \n\nUseful if you want to customise the default colors used in the chessboard. \n\nDefault: \n- black: `'#62B1A8'`\n- white: `'#D9FDF8'`\n- lastMoveHighlight: `'rgba(255,255,0, 0.5)'`\n- checkmateHighlight: `'#E84855'`\n- promotionPieceButton: `'#FF9B71'`\n\n---\n\n### `durations?: { move?: number }`\n\nUseful if you want to customise the default durations used in the chessboard (in milliseconds). \n\nDefault: \n- move: `150`\n\n---\n\n## What if I want to move pieces around without gestures?\n\nFortunately, the package provides the possibility of passing a React Ref to the component. \n\nThe operations granted are:\n\n### `move: ({ from: Square; to: Square; }) =\u003e Promise\u003cMove | undefined\u003e | undefined;`\n\nVery useful if you want to move the pieces on the chessboard programmatically.\n\n```jsx\nimport Chessboard, { ChessboardRef } from 'react-native-chessboard';\n\nconst App = () =\u003e {\n  const chessboardRef = useRef\u003cChessboardRef\u003e(null);\n\n  useEffect(() =\u003e {\n    (async () =\u003e {\n      await chessboardRef.current?.move({ from: 'e2', to: 'e4' });\n      await chessboardRef.current?.move({ from: 'e7', to: 'e5' });\n      await chessboardRef.current?.move({ from: 'd1', to: 'f3' });\n      await chessboardRef.current?.move({ from: 'a7', to: 'a6' });\n      await chessboardRef.current?.move({ from: 'f1', to: 'c4' });\n      await chessboardRef.current?.move({ from: 'a6', to: 'a5' });\n      await chessboardRef.current?.move({ from: 'f3', to: 'f7' });\n    })();\n  }, []);\n\n  return (\n      \u003cView\n        style={{\n            flex: 1, \n            alignItems: 'center',\n            justifyContent: 'center'\n        }}\n    \u003e\n        \u003cChessboard\n            ref={chessboardRef}\n            durations={{ move: 1000 }}\n        /\u003e\n    \u003c/View\u003e\n  )\n};\n```\n\n---\n\n### `undo: () =\u003e void;`\n\nUndoes the last made move on the board. Can be done multiple times in a row as long as resetBoard is not called.\n\n---\n\n### `highlight: (_: { square: Square; color?: string }) =\u003e void;`\n\nHighlight a square on the chessboard. The default color is `'rgba(255,255,0, 0.5)'`. \n\n---\n\n### `resetAllHighlightedSquares: () =\u003e void;`\n\n---\n\n### `resetBoard: (fen?: string) =\u003e void;`\n\nResets the chessboard from a fen position. \n\n---\n\n### `getState: () =\u003e ChessboardState;`\n\nReturns the current state of the chessboard (which can also be retrieved using the onMove callback).\n\n---\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzomanuelmangano%2Freact-native-chessboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenzomanuelmangano%2Freact-native-chessboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzomanuelmangano%2Freact-native-chessboard/lists"}