Tinder Clone (Expo + React Native)

A simple Tinder-style UI built with Expo Router and React Native. Includes a splash animation, swipeable opponent cards, and a liked list.

Prerequisites

• Node.js 18+ and pnpm installed (npm i -g pnpm)
• iOS: Xcode with Simulator
• Android: Android Studio with an emulator or a device in developer mode
• Optional: Expo Go for on-device testing

Install

pnpm install

Start the app

• Start the dev server and choose a platform in the terminal UI:

pnpm start

• Or start directly on a platform:

# Android (emulator or device)
pnpm android

# iOS (simulator)
pnpm ios

# Web
pnpm web

When the dev server starts, you can scan the QR code with Expo Go on your device, or let it automatically open the emulator/simulator.

Useful scripts

# Lint source code
pnpm lint

# TypeScript diagnostics
pnpm typecheck

# Run tests (Vitest)
pnpm test

# Reset to a fresh project scaffold
pnpm run reset-project

Mock data toggle

This project can switch between mock and real API modules via app.json:

• File: app.json
• Key: expo.extra.useMockData
• Behavior: true = mock API, false = real API

Internally, this is read in lib/config.ts and used by lib/api/index.ts to select the implementation.

Project structure

• app/ — screens and routing using Expo Router (typed routes enabled)
• components/ — UI atoms/molecules/organisms including splash screen and cards
• assets/ — images and Lottie animation
• lib/ — API, config, store, and types

Learn more

• Expo docs: https://docs.expo.dev
• Expo Router: https://docs.expo.dev/router/introduction/
• iOS Simulator setup: https://docs.expo.dev/workflow/ios-simulator/
• Android Emulator setup: https://docs.expo.dev/workflow/android-studio-emulator/