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