Board components — React Native

Drop-in native board components for Chess, Checkers, Connect 4, and Tic-tac-toe. No WebView — rendered entirely with React Native primitives.

Setup Board components Game hooks EventBus & hooks

Available components

Component	Description
ChessBoard	Chess board with move validation, clocks, promotion, AFK
CheckersBoard	Checkers board with valid move highlighting
Connect4Board	Connect 4 board with winning cell highlight
TictactoeBoard	Tic-tac-toe board with winning line highlight

Layouts

All board components default to layout="board-only" — just the board, no chrome. Pass layout="default" to get the full built-in layout: player cards, clocks, resign/draw buttons, and AFK banner.

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

// Board only — build your own layout around it
<ChessBoard style={{ width: '100%', aspectRatio: 1 }} onLeave={handleLeave} />

// Full built-in layout
<ChessBoard layout="default" onLeave={handleLeave} />

Props (all board components)

Prop	Default	Description
layout	"board-only"	"board-only" renders just the board. "default" adds player cards, clocks, and actions
style	—	ViewStyle for the outer container
showAfkWarning	true	Show built-in AFK countdown banner (layout="default" only)
showLastMove	true	Highlight the last move made
lastMoveStyle	"glow"*	"glow" — cyan border ring. "pulse" — amber border + slight scale. "dot" — small corner dot. Chess also supports "highlight" (background color change) which is its default.
game	—	Pass a useChessGame() / useCheckersGame() / etc. instance to share one socket with the board. If omitted, the board creates its own internal socket
onLeave	—	Called when player taps Leave or Play again after game over

Chess-only props

Prop	Default	Description
orientation	"auto"	"auto" flips board to match your color. "white" or "black" to force
showCoords	true	Show rank/file labels on board edges
showLastMove	true	Highlight the last move made
lastMoveStyle	"highlight"	Chess default is "highlight" (background color change). Also accepts "glow", "pulse", "dot"
showLegalMoves	true	Highlight legal squares when a piece is selected

The `game` prop — socket sharing

By default each board component calls its game hook internally, creating its own socket. If you also need access to the game state or socket outside the board (e.g. to show a custom overlay or emit events), call the hook yourself and pass the instance via game. The board will use your instance instead of creating a duplicate.

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

function GameUI() {
  const game = useChessGame();

  // Access anything: game.isMyTurn, game.players, game.fen, game.socket, etc.
  console.log('my turn?', game.isMyTurn);

  return (
    <ChessBoard
      game={game}          // board uses your hook — no duplicate socket
      layout="board-only"
      onLeave={handleLeave}
    />
  );
}

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

When to use the game prop vs not:

Just want the board → omit game, board handles everything
Need to read game state (turn, players, result) → pass game
Need to listen to events → use EventBus instead — no game prop needed
Building a fully custom board UI → use the game hook directly, skip the board component