This is the mobile frontend for the BillSplit application — a group expense sharing app.
The backend is built with Spring Boot and lives in a separate repository: BillSplit Backend.
- Welcome/Login → Authenticate via Google or email/password
- Add Expense → Add group/individual expenses, split equally or by shares
- Activity Feed → View all transactions and settlements
- Groups → Manage groups, view balances, and settle up
- Profile → Manage account, notifications, and logout
| Login | Add Expense | Activity Feed | Groups |
|---|---|---|---|
 |
 |
 |
 |
- Authentication (JWT-based, Google Sign-In integration)
- Expense management: Add, edit, delete, and view expenses
- Groups: Create and manage groups with members
- Friends system: Add, remove, and manage friends + friend requests
- Activity feed: Track all expense activity with filtering and search
- Profile management: Update profile, change password, manage notifications
- Secure storage of JWT using
expo-secure-store - Auto-logout when JWT is expired or unauthorized
- React Native (via Expo)
- NativeWind for styling (Tailwind in RN)
- React Navigation + Expo Router
- Zustand for global state
- React Native Paper for UI components
- Lucide Icons for vector icons
- Secure storage via
expo-secure-store - API communication with
fetch(JWT attached automatically)
app/
_layout.tsx # Root layout, handles auth redirects
index.tsx # Welcome / login screen
(tabs)/ # Main navigation (profile, activity, add expense, etc.)
expense-detail/ # Expense detail screens
group-detail/ # Group detail screens
create-group/ # Group creation
hooks/
Auth.ts # Zustand auth store
api/
axios.ts # Axios instance with JWT + interceptors
auth/
logout.ts # Global logout utility
global.css # Tailwind styles
git clone https://github.com/soham04/billsplit-frontend.git
cd billsplit-frontendnpm install
# or
yarn install
Create a .env file at the root:
API_URL=http://localhost:8080 # Spring Boot backend
GOOGLE_WEB_CLIENT_ID=xxx.apps.googleusercontent.com
Load them with react-native-config.
Start Metro bundler:
npm start
Run on iOS:
npm run ios
Run on Android:
npm run android
-
Uses JWT stored securely in expo-secure-store.
-
On login, JWT is saved; on logout it is cleared.
-
Auto logout occurs if an API call returns 401 Unauthorized.
-
RootLayout checks for token on app launch and redirects to (tabs) or index.
This project requires the BillSplit Backend running locally or remotely.
cd billsplit-backend
./mvnw spring-boot:run
The backend runs on http://localhost:8080 by default.
-
Welcome/Login → Authenticate via Google or email/password
-
Add Expense → Add group/individual expenses, split equally or by shares
-
Activity Feed → View all transactions and settlements
-
Expense Detail → Drill down into expense info (payer, participants, notes, attachments)
-
Profile → Manage account, notifications, and logout
For backend API testing:
-
Swagger UI is available at: http://localhost:8080/swagger-ui.html
-
You can use Postman collections (see backend repo).
For frontend testing:
- Use Expo Go app on device or iOS Simulator / Android Emulator.
-
Fork this repo
-
Create a feature branch (git checkout -b feature/awesome-feature)
-
Commit your changes (git commit -m "feat: add awesome feature")
-
Push to branch (git push origin feature/awesome-feature)
-
Create a Pull Request