Chess — React Native SDK

The React Native chess integration is fully native — no WebView. This page is the complete API reference. For a step-by-step setup walkthrough see the React Native guide.

ChessBoard

Renders the chess board using native React Native views. By default it renders the board only — you control the surrounding layout. Pass layout="default" to get the built-in full layout (player rows, clocks, AFK banner, resign/draw buttons, game-over modal).

The board manages its own socket internally. Pass connectSocket={false} to BetaGamerProvider to avoid a duplicate connection.

Prop	Type	Default	Description
`layout`	"board-only" \| "default"	"board-only"	board-only = just the board. default = player rows, clocks, AFK banner, resign/draw buttons, game-over modal.
`style`	ViewStyle	—	Style applied to the outer container View.
`orientation`	"white" \| "black" \| "auto"	"auto"	Which color is at the bottom. auto uses the color assigned in game:started.
`showCoords`	boolean	true	Show rank (1–8) and file (a–h) labels around the board.
`showLastMove`	boolean	true	Highlight the from/to squares of the last move played.
`showLegalMoves`	boolean	true	Show dots on squares where the selected piece can legally move.
`showAfkWarning`	boolean	true	Show the built-in AFK countdown banner. Only applies when layout="default".
`game`	ChessGameState	—	Pass a useChessGame() instance to share one socket with the board. If omitted, the board creates its own socket.
`onLeave`	() => void	—	Called when the player taps Leave or the exit button on the game-over modal.

import { BetaGamerProvider, ChessBoard } from '@beta-gamer/react-native';

<BetaGamerProvider token={sessionToken} connectSocket={false}>
  {/* Board only — build your own layout */}
  <ChessBoard style={{ flex: 1 }} onLeave={handleLeave} />

  {/* Or full built-in layout */}
  {/* <ChessBoard layout="default" style={{ flex: 1 }} onLeave={handleLeave} /> */}
</BetaGamerProvider>

useChessGame()

The hook that powers ChessBoard internally. Use it when you need direct access to the socket or game state — for a custom UI, listening to events, or building your own layout around the board.

Pass the returned instance to ChessBoard via the game prop so the board reuses your socket instead of creating a second one.

import { BetaGamerProvider, ChessBoard, useChessGame } from '@beta-gamer/react-native';

function GameUI() {
  const game = useChessGame(); // one socket — shared with the board

  useEffect(() => {
    if (!game.socket) return;
    game.socket.on('game:over', ({ winner }) => { /* your logic */ });
    return () => { game.socket?.off('game:over'); };
  }, [game.socket]);

  return <ChessBoard game={game} layout="board-only" onLeave={handleLeave} />;
}

export function GameScreen({ sessionToken }) {
  return (
    <BetaGamerProvider token={sessionToken} connectSocket={false}>
      <GameUI />
    </BetaGamerProvider>
  );
}

Return value:

Field	Type	Description
`socket`	Socket \| null	Socket.IO socket connected to /chess
`roomId`	string \| null	Current game room ID
`myPlayerId`	string	Your player ID assigned by the server
`myColor`	"white" \| "black"	Your assigned color
`fen`	string	Current board position in FEN notation
`players`	any[]	Both players in turn order
`clocks`	{ self: number; opponent: number }	Remaining time in seconds for each player
`isMyTurn`	boolean	Whether it is currently your turn
`selected`	string \| null	Currently selected square (e.g. "e2")
`legalMoves`	string[]	Legal destination squares for the selected piece
`lastMove`	{ from, to } \| null	The last move played
`moveHistory`	{ san: string }[]	Full move history in algebraic notation
`gameOver`	boolean	Whether the game has ended
`gameResult`	{ winner, reason } \| null	Game result once over
`handleSquarePress`	(square: string) => void	Call on square tap — handles selection and move emission
`emitMove`	(from, to, promotion?) => void	Emit a move directly to the server

Custom UI (no ChessBoard)

If you don't want to use ChessBoard at all and prefer to render everything yourself, use useChessGame() directly. Keep connectSocket={true} (the default) on the provider — or omit it entirely.

import { BetaGamerProvider, useChessGame } from '@beta-gamer/react-native';

function MyCustomChessUI() {
  const { chess, selected, legalMoves, isMyTurn, handleSquarePress, gameOver, gameResult } = useChessGame();

  // render your own board, clocks, player rows, etc.
  return ( /* ... */ );
}

export function GameScreen({ sessionToken }) {
  return (
    // connectSocket={true} is the default — no need to pass it
    <BetaGamerProvider token={sessionToken}>
      <MyCustomChessUI />
    </BetaGamerProvider>
  );
}

Only use connectSocket={false} when using ChessBoard (or any board component) — they open their own socket. Using both creates a duplicate connection.

ChessMoveHistory

Scrollable move list in algebraic notation. Works alongside ChessBoard or useChessGame().

Prop	Type	Default	Description
`style`	ViewStyle	—	Style for the scroll container
`textStyle`	TextStyle	—	Style for each move text
`rowStyle`	ViewStyle	—	Style for each move row

Step-by-step setup → React Native guide · Socket events → Chess events

Beta Gamer GaaS API — questions? support@beta-gamer.com