Expo Finance App

Personal finance tracker built with Expo and React Native. Tracks multi-currency income/expenses, manages savings goals, and works offline with SQLite.

Tech Stack

• Expo SDK 53 (managed)
• React 19, React Native 0.79
• TypeScript
• Navigation: @react-navigation/native (Bottom Tabs + Native Stack)
• Database: expo-sqlite (async API)
• UI: React Native Elements (@rneui/themed)
• Charts: react-native-chart-kit + react-native-svg
• Date picker: @react-native-community/datetimepicker (used elsewhere); Reports uses a custom in-app calendar modal for date ranges
• File export: expo-file-system, expo-sharing

Features

• Multi-Currency Support: Per-item currency for both transactions and savings goals (USD, EUR, IDR, JPY, etc.) with per-currency balance tracking
• Transactions: add income/expense with currency selection, multi-currency balances on Home, recent list, paginated history
• Savings (Multi-Currency): create goals in a chosen currency; progress and all deposits/withdrawals are tracked and formatted in the goal’s currency; completion flag when target reached
• Theming: light/dark mode follows system
• Reports:
  • Currency selector (All or a specific currency)
  • Time ranges: Weekly, Monthly, Quarterly, Yearly, Custom
  • Custom range picker: modal calendar with range highlight + Apply/Cancel
  • Charts auto-switch by horizon: Bar (short), Line trend (long), Pie/Stacked Bar for categories
  • CSV export
  • Drill-down: tap chart points/slices to view matching transactions

UI/UX

• Add Transaction and Add Savings use compact, touch-friendly "select" rows that open modal pickers (currency, category, account, date)
• Reports header is compact and responsive (currency chip, date range chip, Export, range control below)
• Custom calendar modal for picking start/end with range highlight
• Consistent spacing, KeyboardAvoidingView + ScrollView for responsive layouts
• Dark-friendly theme with high-contrast text and inputs

Project Structure

src/ contains components, constants, context, database, navigation, screens, utils

How It Works

• App boot: App.tsx -> AppProvider runs DB migrations then loads navigator
• Navigation: Tabs (Home, Transactions, Savings, Reports) + Stack for modals/details
• Database: openDatabaseAsync cached in dbConfig.ts; migrations ensure schema + seed categories
• Data access: queries.ts exposes CRUD and aggregates using prepared statements
  • Savings goals store a currency per goal; savings transactions implicitly use the goal’s currency

Database Schema (SQLite)

Tables: categories, transactions (with currency column), savings (with currency column), savings_transactions with foreign keys and timestamps.

Migrations (highlight):

• 006_add_transaction_currency: adds currency to transactions and backfills from settings
• 007_add_savings_currency: adds currency to savings and backfills from settings

Key Modules

• src/database/dbConfig.ts: open DB, run migrations and seeding (async API)
• src/database/queries.ts: transactions and savings helpers + reporting helpers
• src/constants/currencies.ts: ISO 4217 currency definitions
• screens: Home, Transactions, AddTransaction, Savings, SavingsDetail, AddSavings, Reports

Run

1. npm install
2. npm run android (or ios on macOS, or web) If web shows missing deps, run: npx expo install react-native-web @expo/metro-runtime

Usage:

• Add transactions with currency selection (defaults to your preferred currency from Settings)
• View multi-currency balances on the Home screen
• Create savings goals in different currencies; deposits/withdrawals and progress all reflect the goal’s currency
• Reports: pick a time range (Weekly, Monthly, Quarterly, Yearly, or Custom via calendar modal), filter by currency, and export CSV
• Drill into charts to see the list of matching transactions

Development

• Type-check: npx tsc --noEmit
• Use openDatabaseAsync with db.runAsync/getFirstAsync/getAllAsync
• Multi-currency: transactions store currency per transaction; savings store currency per goal; balances and progress computed per currency
• Reports: range-based queries (totals, categories, multi-currency) + time-series helpers

Roadmap

• Multi-Currency Balance Conversion: Add exchange rates and convert balances to a base currency
• Transactions search/filter + swipe actions: Global search with date range, category, type filters + swipe to edit/delete
• Enhanced Reports: Multi-currency analytics, spending patterns by currency, more drill-downs
• Category management UI: Swipe actions, search/filter, bottom sheets
• Advanced Features: Notifications, onboarding, biometrics, recurring transactions, budgets

License

MIT