React Native Income, Expense & Subscription Tracker with Tamagui UI & AdMob. Zero-backend, Expo SDK 57, local storage, charts, notifications, and PDF/CSV export.
npx expo (no global install required)npm i -g eas-clinpm install --legacy-peer-deps npx expo start
Run these commands from the project root (the SpendpathApp folder after unzipping).
Scan the QR code with Expo Go, or press a / use a USB or wireless
Android device with ADB. For AdMob native ads, create a development or EAS build
(see below).
| Feature | Expo Go | Dev / EAS build |
|---|---|---|
| UI, income, expenses, subscriptions, charts | Yes | Yes |
| Local persistence (AsyncStorage) | Yes | Yes |
| PDF / CSV export (incl. income) | Yes | Yes |
| Notifications (permission + schedule) | Limited | Full |
| AdMob banners / interstitials | Placeholder only | Real ads |
Income is a separate module from expenses. Use the Income tab or Dashboard quick action to add money-in entries.
incomes in Zustand / AsyncStorageIncomeScreen, IncomeFormScreen, IncomeCard/(tabs)/income, /income/new, /income/[id]app.json → expo.name and expo.slug.src/config/appConfig.ts → appName.assets/icon.png (1024×1024 recommended).assets/logo-mark.png / assets/logo-mark.svg and splash assets.assets/.backgroundColor in app.json (default #0F1C2E).| Platform | Field |
|---|---|
| Android | expo.android.package in app.json |
| iOS | expo.ios.bundleIdentifier in app.json |
Default: com.codecanyon.spendpath
Theme tokens live in tamagui.config.ts. Primary brand color is
coral (#FF5C4D) on ink navy (#0F1C2E).
// tamagui.config.ts ink: '#0F1C2E', coral: '#FF5C4D', sage: '#6F9B86', mist: '#EEF3F8',
Light / Dark / System mode is toggled in Settings and stored in Zustand.
Runtime theme resolves system using the device color scheme.
Open src/config/appConfig.ts:
adsEnabled: true,
admob: {
android: {
banner: 'ca-app-pub-xxxxxxxx/yyyyyyyyyy',
interstitial: 'ca-app-pub-xxxxxxxx/yyyyyyyyyy',
},
ios: {
banner: 'ca-app-pub-xxxxxxxx/yyyyyyyyyy',
interstitial: 'ca-app-pub-xxxxxxxx/yyyyyyyyyy',
},
},
Also replace the App IDs in app.json under the
react-native-google-mobile-ads plugin.
The project ships with Google test unit IDs so development works safely. Users can also toggle ads at runtime in Settings. Real ads require an EAS / development build (not Expo Go). The SDK is probed automatically when the native module is present.
react-native-google-mobile-ads@16.0.0 (already in
package.json). Newer minor versions can pull Play Services Ads
that clash with Expo SDK 57 / Kotlin. The project also sets
expo-build-properties kotlinVersion to
2.1.20 in app.json — keep that when you reskin.
npm i -g eas-cli eas login eas build:configure # Android APK (preview) eas build -p android --profile preview # Android AAB (Play Store) eas build -p android --profile production # iOS IPA eas build -p ios --profile production
Profiles are defined in eas.json. After the build finishes,
download the artifact from the Expo dashboard. Install with
npm install --legacy-peer-deps (a .npmrc with
legacy-peer-deps=true is included for EAS).
app/ Expo Router screens src/components/ Tamagui UI primitives, cards, AppLogo, IncomeCard src/screens/ Feature screens (incl. IncomeScreen) src/store/ Zustand + AsyncStorage src/services/ Notifications, Export, Ads src/config/ Buyer configuration src/types/ TypeScript models src/utils/ Currency, date & category helpers tamagui.config.ts Theme tokens __tests__/ Jest unit tests documentation/ Buyer HTML docs
demoMode: true on first launch.src/utils/currency.ts are offline approximations.npm run typecheck and npm test before publishing your reskin.@tamagui/lucide-icons-2 (must match Tamagui v2).