A lightweight, simple, and high-performing chessboard for React Native with orientation support.

Deeply inspired by the Chess Youtube Episode from the series "Can it be done in React Native?" made by William Candillon.

Disclaimer

If you want this package in production, use it with caution.

You can use this package to make a multiplayer game with sockets background i have example here

Installation

You need to have already installed the following packages:

• react-native-reanimated (>= 2.3.0)
• react-native-gesture-handler (>= 2.0.0)

Open a Terminal in your project's folder and install the library using yarn:

yarn add expo-chessboard

or with npm:

npm install expo-chessboard

Usage

import Chessboard from 'expo-chessboard';

const App = () => (
  <View
    style={{
        flex: 1, 
        alignItems: 'center',
        justifyContent: 'center'
    }}
  >
    <Chessboard/>
  </View>
);

Properties

orientation?: 'white' | 'black'

Determines which side is at the bottom of the board. If set to 'black', the board will be rotated so that Black pieces start at the bottom.

Default: 'white'

player?: 'white' | 'black' | 'both'

Restricts which side can interact with the board.
• 'white' – only White pieces can be moved and only on White's turn.
• 'black' – only Black pieces can be moved and only on Black's turn.
• 'both' – both sides can be moved (legacy behaviour).

Default: 'both'

gestureEnabled?: boolean

Enables gestures for chess pieces.

Default: true

fen?: string

Indicates the initial fen position of the chessboard.

withLetters?: boolean

Decides whether or not to show the letters on the bottom horizontal axis of the chessboard.

Default: true

withNumbers?: boolean

Decides whether or not to show the numbers on the left vertical axis of the chessboard.

Default: true

boardSize?: number

Indicates the chessboard width and height.

Default: Math.floor(SCREEN_WIDTH / 8) * 8

renderPiece?: (piece: PieceType) => React.ReactElement | null

It gives the possibility to customise the chessboard pieces.

In detail, it takes a PieceType as input, which is constructed as follows:

type Player = 'b' | 'w';
type Type = 'q' | 'r' | 'n' | 'b' | 'k' | 'p';
type PieceType = `${Player}${Type}`;

onMove?: (info: ChessMoveInfo) => void;

It's a particularly useful callback if you want to execute an instruction after a move.

import Chessboard from 'expo-chessboard';

const App = () => (
  <View
    style={{
        flex: 1, 
        alignItems: 'center',
        justifyContent: 'center'
    }}
  >
    <Chessboard
        onMove={({ state }) => {
          if (state.in_checkmate) {
            console.log('Life goes on.');
          }
        }}
      />
  </View>
);

In detail, you can access these parameters:

• in_check: boolean
• in_checkmate: boolean
• in_draw: boolean
• in_stalemate: boolean
• in_threefold_repetition: boolean
• insufficient_material: boolean
• game_over: boolean
• fen: boolean

P.S: These parameters are the outputs given by the respective functions used by chess.js (on which the package is built).

colors?: ChessboardColorsType

Useful if you want to customise the default colors used in the chessboard.

Default:

• black: '#62B1A8'
• white: '#D9FDF8'
• lastMoveHighlight: 'rgba(255,255,0, 0.5)'
• checkmateHighlight: '#E84855'
• promotionPieceButton: '#FF9B71'

durations?: { move?: number }

Useful if you want to customise the default durations used in the chessboard (in milliseconds).

Default:

• move: 150

What if I want to move pieces around without gestures?

Fortunately, the package provides the possibility of passing a React Ref to the component.

The operations granted are:

move: ({ from: Square; to: Square; }) => Promise<Move | undefined> | undefined;

Very useful if you want to move the pieces on the chessboard programmatically.

import Chessboard, { ChessboardRef } from 'expo-chessboard';

const App = () => {
  const chessboardRef = useRef<ChessboardRef>(null);

  useEffect(() => {
    (async () => {
      await chessboardRef.current?.move({ from: 'e2', to: 'e4' });
      await chessboardRef.current?.move({ from: 'e7', to: 'e5' });
      await chessboardRef.current?.move({ from: 'd1', to: 'f3' });
      await chessboardRef.current?.move({ from: 'a7', to: 'a6' });
      await chessboardRef.current?.move({ from: 'f1', to: 'c4' });
      await chessboardRef.current?.move({ from: 'a6', to: 'a5' });
      await chessboardRef.current?.move({ from: 'f3', to: 'f7' });
    })();
  }, []);

  return (
      <View
        style={{
            flex: 1, 
            alignItems: 'center',
            justifyContent: 'center'
        }}
    >
        <Chessboard
            ref={chessboardRef}
            durations={{ move: 1000 }}
        />
    </View>
  )
};

undo: () => void;

Undoes the last made move on the board. Can be done multiple times in a row as long as resetBoard is not called.

highlight: (_: { square: Square; color?: string }) => void;

Highlight a square on the chessboard. The default color is 'rgba(255,255,0, 0.5)'.

resetAllHighlightedSquares: () => void;

resetBoard: (fen?: string) => void;

Resets the chessboard from a fen position.

getState: () => ChessboardState;

Returns the current state of the chessboard (which can also be retrieved using the onMove callback).

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT