Swip

A React Native + Expo app for reporting civic issues (potholes, broken streetlights, graffiti, flooding, etc.) with AI-powered photo analysis via Groq.

Built on Expo SDK 54 with Expo Router, React Native Maps, and Groq (Llama 4 Scout vision + Llama 3.3 70B).

---

Prerequisites

• Node.js 20.x or later — https://nodejs.org
• npm (ships with Node)
• Expo Go app on your phone (for development on a real device):
  • iOS: App Store → "Expo Go"
  • Android: Play Store → "Expo Go"
• Groq API key — sign up at https://console.groq.com and create a key

---

First-time setup

1. Clone / download the project

cd C:\Users\Aldi\Desktop
git clone <repo-url> swip
cd swip

If you already have the folder, just cd into it.

2. Install dependencies

npm install --legacy-peer-deps

The --legacy-peer-deps flag is required because expo-router's web support pulls in react-dom@19.2.6 which wants react@^19.2.6, while React Native 0.81 pins react@19.1.0. The flag tells npm to ignore that conflict — it's safe for a mobile-first Expo app.

This installs ~700 packages and takes 2–3 minutes.

3. Create your .env file

Create a file called .env in the project root with this content:

EXPO_PUBLIC_GROQ_API_KEY=your_groq_api_key_here

Replace your_groq_api_key_here with the key you got from https://console.groq.com. The EXPO_PUBLIC_ prefix is required — Expo only exposes vars with that prefix to the app at runtime.

Do not commit .env — it's already in .gitignore.

4. Start the dev server

npx expo start

Then:

• On phone: scan the QR code with the Expo Go app (Android) or the iOS Camera app (iOS will open Expo Go automatically)
• On web: press w in the terminal, or open http://localhost:8081
• On Android emulator: press a
• On iOS simulator (Mac only): press i

---

Common commands

Command	What it does
npx expo start	Start the dev server
npx expo start --clear	Start with cleared Metro/babel cache (use after dependency changes)
npx expo start --tunnel	Use an ngrok tunnel if your phone can't see your laptop over LAN
npm run android	Start and launch Android emulator
npm run ios	Start and launch iOS simulator
npm run web	Start and open in the browser

---

Project structure

swip/
├── app/                    # Expo Router routes (file-based routing)
│   ├── _layout.tsx         # Root layout
│   ├── (tabs)/             # Tab navigator
│   │   ├── _layout.tsx
│   │   ├── index.tsx       # Home tab
│   │   ├── feed.tsx
│   │   ├── map.tsx
│   │   └── profile.tsx
│   ├── issue/[id].tsx      # Issue detail (dynamic route)
│   ├── submit.tsx          # Submit a new issue
│   └── rewards.tsx
├── components/             # Reusable UI components
│   ├── AreaPicker.tsx
│   ├── CategoryBadge.tsx
│   ├── IssueCard.tsx
│   └── RoutesModal.tsx
├── lib/                    # Business logic
│   ├── groq.ts             # Groq AI client (vision + text)
│   ├── geo.ts              # Geolocation helpers
│   └── fixEta.ts           # Fix-time estimation
├── store/                  # State management
├── types/                  # Shared TypeScript types
├── assets/                 # Images, splash screens, seed data
├── app.json                # Expo config (permissions, plugins, icons)
├── babel.config.js         # Babel preset + reanimated plugin
├── metro.config.js         # Metro bundler config
├── tsconfig.json           # TypeScript config (extends expo/tsconfig.base)
└── .env                    # Your secrets (not committed)

---

Troubleshooting

Cannot find module 'babel-preset-expo'

Your node_modules is out of sync with package.json. Fix:

npm install --legacy-peer-deps
npx expo start --clear

Version warning: react-native-maps@X.Y.Z - expected version: 1.20.1

Expo SDK 54 requires the exact react-native-maps@1.20.1. If npm hoisted a newer version:

npm install react-native-maps@1.20.1 --save-exact --legacy-peer-deps

Metro errors after pulling new changes or switching branches

Stale cache. Always restart with --clear:

npx expo start --clear

Error: Unable to deserialize cloned data due to invalid or unsupported version

Metro's disk cache is corrupt. Clear it:

Remove-Item -Recurse -Force $env:TEMP\metro-* -ErrorAction SilentlyContinue
npx expo start --clear

Random Cannot find module ... errors deep inside node_modules/

Often happens after VSCode "Discard All Changes" deleted files inside node_modules/. npm install won't fix it because package folders still look intact. Nuclear option:

Remove-Item node_modules -Recurse -Force
Remove-Item package-lock.json -Force
npm install --legacy-peer-deps
npx expo start --clear

Port 8081 already in use

Some old Metro process is still running. Find and kill it:

Get-NetTCPConnection -State Listen -LocalPort 8081 | ForEach-Object {
  Stop-Process -Id $_.OwningProcess -Force
}

Phone can't connect to the dev server

Your phone and laptop must be on the same Wi-Fi network. If they are but it still won't connect (corporate Wi-Fi, VPN, etc.), use tunnel mode:

npx expo start --tunnel

---

Permissions used

The app requests these device permissions (declared in app.json):

• Camera — to photograph civic issues
• Photo library — to attach existing photos to reports
• Location (fine + coarse) — to tag issue reports with where they happened

---

Tech stack

• Expo SDK 54 + Expo Router 6 (file-based routing)
• React Native 0.81 + React 19.1
• TypeScript (strict, with typed routes enabled)
• react-native-maps 1.20.1 — map view
• react-native-reanimated 4.x + react-native-worklets — animations
• expo-camera, expo-image-picker, expo-location, expo-file-system
• @react-native-async-storage/async-storage — local persistence
• Groq SDK (via openai npm package, pointed at Groq's OpenAI-compatible endpoint)
  • Vision: meta-llama/llama-4-scout-17b-16e-instruct
  • Text: llama-3.3-70b-versatile