Build a Live Football Score App With React Native: Real-Time, Offline-Ready, App-Store Ready

npx create-expo-app football-live --template
cd football-live
npx expo install @react-navigation/native @react-navigation/bottom-tabs \
  react-native-screens react-native-safe-area-context \
  @react-native-async-storage/async-storage

## Store the key outside source control (app config / EAS secrets in prod)
## .env  ->  EXPO_PUBLIC_GOAL_API_KEY=your_key

// api/football.ts
const BASE = 'https://api.goal-api.com/v1';
const KEY  = process.env.EXPO_PUBLIC_GOAL_API_KEY!;

export type Match = {
  id: string; league: string;
  home: string; away: string;
  homeScore: number; awayScore: number;
  minute: string; status: string;
};

async function get(path: string) {
  const res = await fetch(`${BASE}${path}`, {
    headers: { Authorization: `Bearer ${KEY}` },
  });
  if (!res.ok) throw new Error(`GOAL API ${res.status}`);
  return (await res.json()).data;
}

export async function getLiveScores(): Promise<Match[]> {
  const data = await get('/fixtures/live');
  return data.map((m: any) => ({
    id: m.id, league: m.league.name,
    home: m.homeTeam.name, away: m.awayTeam.name,
    homeScore: Number(m.homeTeamScore), awayScore: Number(m.awayTeamScore),
    minute: m.matchMinute, status: m.matchStatus,
  }));
}

// screens/LiveScreen.tsx
import { FlatList, Text, View } from 'react-native';
import { useEffect, useState } from 'react';
import { getLiveScores, Match } from '../api/football';

export default function LiveScreen() {
  const [matches, setMatches] = useState<Match[]>([]);

  useEffect(() => { getLiveScores().then(setMatches); }, []);

  return (
    <FlatList
      data={matches}
      keyExtractor={(m) => String(m.id)}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.league} · {item.minute}'</Text>
          <Text style={{ fontWeight: 'bold' }}>
            {item.home} {item.homeScore}-{item.awayScore} {item.away}
          </Text>
        </View>
      )}
    />
  );
}

// hooks/useLiveUpdates.ts
import { useEffect } from 'react';
import type { Match } from '../api/football';

// getToken() returns a fresh short-lived token from POST /ws/token (ideally via your
// backend). Tokens are single-use, so every reconnect needs a new one.
export function useLiveUpdates(
  getToken: () => Promise<string>,
  matchIds: string[],
  onUpdate: (patch: Partial<Match> & { id: string }) => void,
) {
  useEffect(() => {
    let ws: WebSocket | undefined;
    let closed = false;

    const connect = async () => {
      const token = await getToken();
      ws = new WebSocket(`wss://api.goal-api.com/ws?wsToken=${token}`);

      // The first message must authenticate, with the same token
      ws.onopen = () => ws!.send(JSON.stringify({ type: 'auth', token }));

      ws.onmessage = (ev) => {
        const msg = JSON.parse(ev.data);
        if (msg.type === 'auth_success') {
          for (const matchId of matchIds) {
            ws!.send(JSON.stringify({ type: 'subscribe', resource: 'match', matchId }));
          }
        }
        if (msg.type === 'match_update') {
          const d = msg.data;  // d.id is the fixture id you subscribed with
          onUpdate({
            id: d.id,
            homeScore: Number(d.match_hometeam_score),
            awayScore: Number(d.match_awayteam_score),
            minute: d.clock.minute,
          });
        }
      };

      // Reconnect on drop — mobile networks are flaky
      ws.onclose = () => { if (!closed) setTimeout(connect, 3000); };
    };

    connect();
    return () => { closed = true; ws?.close(); };  // clean up when the screen unmounts
  }, [matchIds.join(',')]);
}

export async function getMatchDetail(fixtureId: string) {
  const [goals, cards, lineups, stats] = await Promise.all([
    get(`/fixtures/${fixtureId}/events`),      // goals, with scorer and assist
    get(`/fixtures/${fixtureId}/cards`),
    get(`/fixtures/${fixtureId}/lineups`),     // home/away startingLineups + formations
    get(`/fixtures/${fixtureId}/statistics`),  // stats.match.fullTime: [{ type, home, away }]
  ]);
  return { goals, cards, lineups, stats };
}

import AsyncStorage from '@react-native-async-storage/async-storage';

async function cachedLiveScores(): Promise<Match[]> {
  try {
    const fresh = await getLiveScores();
    await AsyncStorage.setItem('live', JSON.stringify(fresh));
    return fresh;
  } catch {
    // Offline or API error -> fall back to last cached data
    const cached = await AsyncStorage.getItem('live');
    return cached ? JSON.parse(cached) : [];
  }
}

export async function getFixtures(date: string, leagueId: string) {  // 'YYYY-MM-DD'
  // A busy date has 1,000+ fixtures, 50 per page: filter by league on the server
  return get(`/fixtures/date/${date}?leagueId=${leagueId}&limit=100`);
}
export async function getStandings(leagueId: string) {
  return get(`/standings/${leagueId}`);
}