Tic-tac-toe — React Native SDK

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

TictactoeBoard

Renders the Tic-tac-toe grid 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 grid. default = player rows, AFK banner, resign button, game-over modal.
`style`	ViewStyle	—	Style applied to the outer container View.
`showAfkWarning`	boolean	true	Show the built-in AFK countdown banner. Only applies when layout="default".
`game`	TictactoeGameState	—	Pass a useTictactoeGame() instance to share one socket with the board.
`onLeave`	() => void	—	Called when the player taps Leave or exits the game-over modal.

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

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

useTictactoeGame()

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

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

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

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

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

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

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

Custom UI (no TictactoeBoard)

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

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

function MyTictactoeUI() {
  const { board, myMark, isMyTurn, handleCellPress, winningLine, gameOver, gameResult } = useTictactoeGame();
  // render your own grid
}

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

Step-by-step setup → React Native guide · Socket events → Tic-tac-toe events

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