nyway } } initialize(); }, []); if (!isReady) { return ( ); } return ( <> ); } ``` --- ### **STEP 3: Create Constants File** **File: `src/utils/constants.js`** ```javascript export const COLORS = { primary: '#6c5ce7', background: '#0a0e27', card: '#151b3d', border: '#2d3561', text: '#ffffff', textSecondary: '#8395a7', success: '#00b894', warning: '#f39c12', error: '#d63031', }; export const API_CONFIG = { BASE_URL: 'https://api.yourracing.com', // Replace with real API CACHE_DURATION: 5 * 60 * 1000, // 5 minutes SYNC_INTERVAL: 5 * 60 * 1000, // 5 minutes }; export const SIMULATION_CONFIG = { MIN_SIMULATIONS: 100, MAX_SIMULATIONS: 10000, DEFAULT_SIMULATIONS: 1000, }; ``` --- ### **STEP 4: Create API Service (Mock Data Included)** **File: `src/services/api.js`**

Click to expand full code (294 lines)

```javascript import axios from 'axios'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { API_CONFIG } from '../utils/constants'; const api = axios.create({ baseURL: API_CONFIG.BASE_URL, timeout: 10000, headers: { 'Content-Type': 'application/json' }, }); // ============================================ // CACHE MANAGEMENT // ============================================ async function getCachedData(key) { try { const cached = await AsyncStorage.getItem(key); if (cached) { const { data, timestamp } = JSON.parse(cached); if (Date.now() - timestamp < API_CONFIG.CACHE_DURATION) { return data; } } } catch (error) { console.error('Cache error:', error); } return null; } async function setCachedData(key, data) { try { await AsyncStorage.setItem(key, JSON.stringify({ data, timestamp: Date.now(), })); } catch (error) { console.error('Cache set error:', error); } } // ============================================ // API FUNCTIONS // ============================================ export async function fetchUpcomingRaces() { const cacheKey = 'upcoming_races'; const cached = await getCachedData(cacheKey); if (cached) return cached; try { // TODO: Replace with real API call // const response = await api.get('/races/upcoming'); // const races = response.data; const races = generateMockRaces(); await setCachedData(cacheKey, races); return races; } catch (error) { console.error('Error fetching races:', error); return []; } } export async function fetchRaceDetails(raceId) { const cacheKey = `race_${raceId}`; const cached = await getCachedData(cacheKey); if (cached) return cached; try { const details = generateMockRaceDetails(raceId); await setCachedData(cacheKey, details); return details; } catch (error) { console.error('Error fetching race details:', error); throw error; } } export async function fetchHorseProfile(horseId) { const cacheKey = `horse_${horseId}`; const cached = await getCachedData(cacheKey); if (cached) return cached; try { const profile = generateMockHorseProfile(horseId); await setCachedData(cacheKey, profile); return profile; } catch (error) { console.error('Error fetching horse profile:', error); throw error; } } export async function fetchJockeyProfile(jockeyId) { const cacheKey = `jockey_${jockeyId}`; const cached = await getCachedData(cacheKey); if (cached) return cached; try { const profile = generateMockJockeyProfile(jockeyId); await setCachedData(cacheKey, profile); return profile; } catch (error) { console.error('Error fetching jockey profile:', error); throw error; } } // ============================================ // MOCK DATA GENERATORS (Replace with real API) // =======================

RaceEdge