chessboard-rn
Basic, but flexible Chessboard component for React Native apps, suited to mobile devices.
The package is essentially react-chessboard refactored to work with React Native, albeit with fewer features. If your chess application is browser-based, consider using react-chessboard.
Installation
npm install chessboard-rn
Usage
chessboard-rn integrates with the brilliant chess.js; leverage chess.js functions via the onSquarePress
prop to create unique (or bog-standard) chess applications. For example:
import React, { Component } from 'react';
import { View } from 'react-native';
import { ChessBoard } from 'chessboard-rn';
import { Chess } from 'chess.js'
class BasicExample extends Component {
state = {
fen: 'start',
pieceSquare: '',
square: '',
history: [],
};
componentDidMount() {
this.game = new Chess();
this.setState({ history: this.game.history({ verbose: true }) });
}
onSquarePress = (square) => {
let move = this.game.move({
from: this.state.pieceSquare,
to: square,
});
if (move === null) return;
this.setState({
fen: this.game.fen(),
history: this.game.history({ verbose: true }),
pieceSquare: '',
});
};
render() {
const { fen } = this.state;
return (
<View style={container}>
<Chessboard
position={fen}
onSquarePress={this.onSquarePress}
/>
</View>
);
}
}
const container = {
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
flexWrap: 'wrap',
width: '100%',
aspectRatio: 1,
};
export default BasicExample;
Props
Prop | Default Value | Options | Description |
---|---|---|---|
animationDuration | number: 300 | Time in milliseconds for piece to slide to target square. Only used when the position is programmatically changed. If a new position is set before the animation is complete, the board will cancel the current animation and snap to the new position. | |
arePremovesAllowed | boolean: false | [true, false] | Whether or not premoves are allowed. |
boardOrientation | string: 'white' | ['white', 'black'] | The orientation of the board, the chosen colour will be at the bottom of the board. |
boardWidth | number: 375 | The width of the board in pixels. Default value won't match device; pass Dimensions.get('screen').width | |
customBoardStyle | object: {} | inline CSS styling | Custom board style object e.g. { borderRadius: 5, shadowColor: "#000", shadowOffset: { width: 5, height: 5 } } |
customDarkSquareStyle | object: { backgroundColor: '#B58863' } | inline CSS styling | Custom dark square style object. |
customLightSquareStyle | object: { backgroundColor: '#F0D9B5' } | inline CSS styling | Custom light square style object. |
customPieces | object: {} | Custom pieces object where each key must match a corresponding chess piece (wP, wB, wN, wR, wQ, wK, bP, bB, bN, bR, bQ, bK). The value of each piece is a function that takes in some optional arguments to use and must return JSX to render. e.g. { wK: ({ squareWidth: number, targetSquare: string, sourceSquare: string }) => jsx }. | |
customPremoveDarkSquareStyle | object: { backgroundColor: '#A42323' } | inline CSS styling | Custom premove dark square style object. |
customPremoveLightSquareStyle | object: { backgroundColor: '#BD2828' } | inline CSS styling | Custom premove light square style object. |
customSquareStyles | object: {} | inline CSS styling | Custom styles for all squares. |
id | number: 0 | [string, number] | Board identifier, necessary if more than one board is mounted. |
getPositionObject | function: (currentPosition) => {} | User function that receives current position object when position changes. | |
moveHighlightColours | array: [] | Custom colours for circular movehighlight markers. Multiple array elements display in a linear gradient (bottom to top). | |
moveHighlightSize | number: 0 | Defines the diameter of move highlight makers, as a fraction of square width. | |
moveHighlightSquares | array: [] | The specific squares (e.g., ['a4', 'a5']) subject to move highlight styling. | |
onSquarePress | function: (square) => {} | Function that performs user-specified actions related to the square. NOTE: chess.js can ascertain the piece on the square. | |
position | string: 'start' | ['start', FEN string, { e5: 'wK', e4: 'wP', ... }] | FEN string or position object notating where the chess pieces are on the board. Start position can also be notated with the string: 'start'. |
showBoardNotation | boolean: true | [true, false] | Whether or not to show the file and rank co-ordinates (a..h, 1..8). |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT