Connect 4 — React Native SDK

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

Connect4Board

Renders the Connect 4 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`	Connect4GameState	—	Pass a useConnect4Game() instance to share one socket with the board.
`onLeave`	() => void	—	Called when the player taps Leave or exits the game-over modal.

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

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

useConnect4Game()

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

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

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

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

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

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

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

Custom UI (no Connect4Board)

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

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

function MyConnect4UI() {
  const { board, myColor, isMyTurn, handleColumnPress, winningCells, gameOver, gameResult } = useConnect4Game();
  // render your own grid
}

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

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

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