Chess — React Native integration guide

The ChessBoard component is fully native — no WebView, no iframe. It manages its own socket connection, renders with React Native primitives, and handles AFK, clocks, promotion, and game-over automatically.

Install the SDK

npm install @beta-gamer/react-native

No react-native-webview needed for chess — the board is fully native.

Create a session on your backend

⚠️ Never call the Beta Gamer API directly from your app. Your API key would be bundled into the app binary and is trivially extractable from any APK or IPA — even if stored in .env. Always create sessions from a server you control.

📄 server/routes/game.js

app.post('/api/game/start', async (req, res) => {
  const { userId, userName, game, matchType } = req.body;
  const resp = await fetch('https://api.beta-gamer.com/v1/sessions', {
    method: 'POST',
    headers: { 'Authorization': 'Bearer bg_live_xxxx', 'Content-Type': 'application/json' },
    body: JSON.stringify({
      game, matchType, players: [{ id: userId, displayName: userName }],
    }),
  });
  const { sessionToken, sessionId } = await resp.json();
  res.json({ sessionToken, sessionId });
});

Create a lobby screen

Call your backend, get the token, then navigate to the game screen.

📄 src/screens/ChessLobbyScreen.tsx

import { useState } from 'react';
import { View, Button, ActivityIndicator } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export function ChessLobbyScreen() {
  const navigation = useNavigation<any>();
  const [loading, setLoading] = useState(false);

  const startGame = async (matchType: 'matchmaking' | 'bot') => {
    setLoading(true);
    const res = await fetch('https://your-api.com/api/game/start', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ game: 'chess', matchType }),
    });
    const { sessionToken } = await res.json();
    navigation.navigate('ChessGame', { sessionToken });
  };

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Button title="Find opponent" onPress={() => startGame('matchmaking')} />
      <Button title="vs Bot"        onPress={() => startGame('bot')} />
    </View>
  );
}

Create the game screen

Wrap with BetaGamerProvider and drop in ChessBoard. Pass connectSocket={false} — the board manages its own socket internally.

📄 src/screens/ChessGameScreen.tsx

import { View, StyleSheet } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';
import { BetaGamerProvider, ChessBoard } from '@beta-gamer/react-native';

export function ChessGameScreen() {
  const { sessionToken } = useRoute<any>().params;
  const navigation = useNavigation();

  return (
    <BetaGamerProvider
      token={sessionToken}
      serverUrl="https://api.beta-gamer.com"
      connectSocket={false}
    >
      <View style={styles.screen}>
        <ChessBoard
          style={styles.board}
          onLeave={() => navigation.goBack()}
        />
      </View>
    </BetaGamerProvider>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#0a0a0f' },
  board:  { flex: 1 },
});

Register screens in your navigator

📄 src/navigation/AppNavigator.tsx

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { ChessLobbyScreen } from '../screens/ChessLobbyScreen';
import { ChessGameScreen }  from '../screens/ChessGameScreen';

const Stack = createNativeStackNavigator();

export function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ChessLobby" component={ChessLobbyScreen} />
      <Stack.Screen name="ChessGame"  component={ChessGameScreen} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}

ChessBoard props

Prop	Type	Description
style	ViewStyle	Style applied to the outer container
showAfkWarning	boolean	Show built-in AFK countdown banner (default true). Set false to implement your own.
onLeave	() => void	Called when the player taps Leave or Play again after game over

Full event payload reference → Chess socket events

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