React Native in 2026: Building TravelMate Across iOS, Android, and Web

// app.json
{
  "expo": {
    "name": "TravelMate",
    "plugins": [
      "expo-router",
      "expo-location",
      "expo-camera",
      "expo-notifications",
      [
        "expo-maps",
        { "apiKey": process.env.GOOGLE_MAPS_KEY }
      ]
    ],
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

import { GoogleGenerativeAI } from '@google/generative-ai';

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

export async function getAIRecommendations(
  destination: string,
  interests: string[],
  budget: 'budget' | 'moderate' | 'luxury',
  duration: number
): Promise<TravelRecommendation[]> {
  const model = genAI.getGenerativeModel({ model: 'gemini-1.5-pro' });
  
  const prompt = `
    You are a travel expert. Generate recommendations for:
    Destination: ${destination}
    Interests: ${interests.join(', ')}
    Budget: ${budget}
    Duration: ${duration} days
    
    Return a JSON array of recommendations with:
    - name, description, category, estimatedCost, duration, location
  `;
  
  const result = await model.generateContent(prompt);
  return JSON.parse(result.response.text());
}

import * as FileSystem from 'expo-file-system';

export async function downloadMapRegion(
  bounds: LatLngBounds,
  zoomLevels: number[] = [10, 12, 14, 16]
): Promise<void> {
  const tiles = calculateTilesForBounds(bounds, zoomLevels);
  const downloadDir = FileSystem.documentDirectory + 'map_tiles/';
  
  await FileSystem.makeDirectoryAsync(downloadDir, { intermediates: true });
  
  for (const tile of tiles) {
    const url = `https://tile.openstreetmap.org/${tile.z}/${tile.x}/${tile.y}.png`;
    const localPath = `${downloadDir}${tile.z}_${tile.x}_${tile.y}.png`;
    
    await FileSystem.downloadAsync(url, localPath);
  }
}