Checkers — React Native SDK

Fully native checkers — no WebView. Complete API reference. For a step-by-step walkthrough see the React Native guide.

CheckersBoard

Renders the checkers board natively. Defaults to board-only. Pass layout="default" for the full built-in layout. Pass connectSocket={false} to the provider to avoid a duplicate socket.

Prop	Type	Default	Description
`layout`	"board-only" \| "default"	"board-only"	board-only = just the board. default = player rows, AFK banner, resign button, game-over modal.
`style`	ViewStyle	—	Style applied to the outer container View.
`orientation`	"red" \| "black" \| "auto"	"auto"	Which color is at the bottom. auto uses the color assigned in game:started.
`showLastMove`	boolean	true	Highlight the from/to squares of the last move.
`showAfkWarning`	boolean	true	Show the built-in AFK countdown banner. Only applies when layout="default".
`game`	CheckersGameState	—	Pass a useCheckersGame() instance to share one socket with the board.
`onLeave`	() => void	—	Called when the player taps Leave or exits the game-over modal.

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

<BetaGamerProvider token={sessionToken} connectSocket={false}>
  <CheckersBoard style={{ flex: 1 }} onLeave={handleLeave} />
  {/* <CheckersBoard layout="default" style={{ flex: 1 }} onLeave={handleLeave} /> */}
</BetaGamerProvider>

useCheckersGame()

The hook powering CheckersBoard. Use it directly for custom UIs or to access the socket alongside the board component.

Pass the instance to CheckersBoard via game to share one socket. Without it, the board creates its own.

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

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

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

  return <CheckersBoard game={game} onLeave={handleLeave} />;
}

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

Custom UI (no CheckersBoard)

Use useCheckersGame() alone to render everything yourself. Leave connectSocket at its default (true).

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

function MyCheckersUI() {
  const { board, myColor, isMyTurn, selectedPiece, validMoves, handleCellPress, gameOver, gameResult } = useCheckersGame();
  // render your own board
}

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

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

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