Chessboard-rn NPM

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).