Connect 4 — React Native integration guide

The Connect4Board component is fully native — no WebView. It manages its own socket, handles column drops, winning cell detection, AFK, and game-over automatically.

Install the SDK

npm install @beta-gamer/react-native

No react-native-webview needed — 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 binary and is trivially extractable from any APK or IPA.

📄 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

📄 src/screens/Connect4LobbyScreen.tsx

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

export function Connect4LobbyScreen() {
  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: 'connect4', matchType }),
    });
    const { sessionToken } = await res.json();
    navigation.navigate('Connect4Game', { 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

📄 src/screens/Connect4GameScreen.tsx

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

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

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

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

Connect4Board props

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

Full event payload reference → Connect 4 socket events

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