Split Cash Mobile App

React Native + Expo application for expense sharing.

Quick Start

npm install
cp .env.example .env  # Configure API_URL and GOOGLE_CLIENT_ID
npx expo start
# Press 'a' for Android emulator

Documentation

See the main README for:

• Complete setup guide
• Environment variable configuration
• API endpoints
• Testing instructions
• Building for production
• Deployment guides

Project Structure

mobile/
├── src/
│   ├── components/        # Snackbar
│   ├── contexts/          # AuthContext (auto-logout)
│   ├── hooks/             # useSnackbar, useDeepLinking
│   ├── navigation/        # AppNavigator
│   ├── screens/           # 10 screens
│   ├── services/          # API client
│   └── types/             # TypeScript definitions
├── .env                   # API_URL, GOOGLE_CLIENT_ID
└── app.json               # Expo config (scheme: splitcash)

Key Features

• Auto-logout when token expires
• Snackbar toast notifications
• Deep linking for email invitations
• Axios interceptors for token injection

For complete documentation, see ../README.md and ../CHANGELOG.md.

• Android Emulator: http://10.0.2.2:3000/api (default)
• iOS Simulator: http://localhost:3000/api
• Physical Device: http://YOUR_COMPUTER_IP:3000/api

Find your IP:

• Windows: ipconfig
• Mac/Linux: ifconfig or ip addr

Available Scripts

• npm start - Start Expo development server
• npm run android - Run on Android emulator
• npm run ios - Run on iOS simulator
• npm run web - Run on web browser
• npm run lint - Run TypeScript type checking

Features Breakdown

Authentication

• Google OAuth integration
• JWT token storage with AsyncStorage
• Automatic token refresh
• Persistent login sessions

Groups

• Create groups with categories (Trip, Home, Food, etc.)
• Invite members via email
• View group details and members
• Admin permissions for group management

Expenses

• Add expenses with description, amount, category
• Multiple split types: Equal, Unequal, Percentage
• Select which members to split with
• Date selection and notes

Balances

• View overall balances across all groups
• View group-specific balances
• See who owes whom
• Optimized settlement suggestions

Settlements

• Record payments received
• Update balances automatically
• Add notes to settlements

Profile

• View account information
• Edit name, phone, currency preference
• Logout functionality

Development Notes

API Response Handling

All API calls return a standardized response:

{
  success: boolean;
  data: any;
  message?: string;
}

Authentication Flow

1. User logs in with Google
2. Backend verifies Google token
3. JWT token returned and stored
4. Token added to all API requests via interceptor
5. Auto-logout on 401 responses

State Management

• Global auth state via AuthContext
• Screen-level state with useState
• Data fetching in useEffect
• Pull-to-refresh on list screens

Troubleshooting

Cannot connect to backend

• Ensure backend is running on http://localhost:3000
• Check API URL in src/services/api.ts
• For physical devices, use your computer's IP address
• Ensure firewall allows connections on port 3000

Google OAuth not working

• Verify GOOGLE_CLIENT_ID is set correctly
• Check Google OAuth is enabled in backend
• Ensure redirect URIs are configured in Google Console

TypeScript errors

• Run npm install to ensure all dependencies are installed
• Check tsconfig.json configuration
• Some import errors may resolve after first build

Next Steps

1. ✅ All core screens implemented
2. 🚧 Add loading states and error handling
3. 🚧 Implement push notifications
4. 🚧 Add expense editing/deletion
5. 🚧 Add group images and user avatars
6. 🚧 Implement activity feed
7. 🚧 Add expense filtering and search
8. 🚧 Build iOS and Android releases

Building for Production

Android APK:

eas build --platform android

iOS IPA:

eas build --platform ios

Refer to Expo EAS Build documentation for detailed instructions.

License

This project is part of the Split Cash application.