ICS React Native App
1# React Native Demo App
2
3A simple **mobile banking application** built with **React Native** and **Expo**, powered by the provided API (`react-native-demo`).
4This app demonstrates clean architecture, modular code, and mobile development best practices.
5
6---
7
8## 📱 Features
9
10The app implements the core requirements from the assignment:
11
121. **Authentication** — Login with credentials (`test@test.test` / `password@123` by default).
132. **Accounts Overview** — List of accounts (checking, savings, etc.).
143. **Transactions** — View transactions for a selected account, with:
15 - search
16 - sort
17 - pagination
18 - infinite scroll
194. **Cards Overview** — List of stored cards.
20
21---
22
23## 🏗️ Architecture Decisions
24
25- **Framework**: [Expo](https://expo.dev/) for fast development, simple build tooling, and easy testing on iOS, Android, and web.
26- **Language**: [TypeScript](https://www.typescriptlang.org/) for strong typing and maintainability.
27- **Navigation**: [React Navigation](https://reactnavigation.org/) for stack + tab navigation.
28- **Styling**: Basic **React Native styles** with the [Catppuccin](https://catppuccin.com/) color palette.
29 - In a real-world project, a UI component library (React Native Paper, Tamagui, NativeBase) would be added for consistency and scalability.
30- **Lists**: [FlashList](https://shopify.github.io/flash-list/) by Shopify for efficient rendering of large lists (transactions).
31 - FlashList provides smoother scrolling and better performance compared to FlatList.
32- **Data Fetching & State Management**: [TanStack Query](https://tanstack.com/query) for server-state management.
33 - Handles caching, background refetching, and pagination logic cleanly.
34 - Used together with FlashList to implement **infinite scroll** on transactions.
35- **Auth & App State**: Context + hooks for lightweight client state.
36
37---
38
39## 🔧 Prerequisites
40
41- [Node.js](https://nodejs.org/) **v18 or higher**
42- [Expo CLI](https://docs.expo.dev/get-started/installation/):
43
44 ```bash
45 npm install -g expo
46 ```
47
48- The API server (`react-native-demo`) running locally at `http://localhost:3001`.
49
50---
51
52## 🚀 Installation
53
541. Clone the repository and navigate to the app folder:
55
56 ```bash
57 git clone git@tangled.sh:mokkenstorm.dev/react-native-demo
58 cd react-native-demo/app
59 ```
60
612. Install dependencies:
62
63 ```bash
64 npm install
65 ```
66
673. Generate API bindings from the OpenAPI spec:
68
69 ```bash
70 npm run generate
71 ```
72
73---
74
75## ▶️ Running the App
76
77Run with Expo:
78
79```bash
80npm run ios # iOS simulator
81npm run android # Android emulator
82npm run web # Web browser
83```
84
85Expo will guide you to open the app on your device or emulator.
86
87⚠️ **Note:** The API server **must be running** on `http://localhost:3001` for login and data fetching to work.
88
89---
90
91## 🧪 Testing
92
93Unit tests are written with **Jest** and **React Native Testing Library**.
94Run tests with:
95
96```bash
97npm test
98```
99
100---
101
102## 📦 Node & NPM Versions
103
104- **Node.js**: v18+
105- **npm**: v9+
106
107(Verified using `nvm` for version consistency.)
108
109---
110
111## ✨ Bonus Features
112
113- ✅ Refresh token handling to keep the user logged in.
114- ✅ Pull-to-refresh on accounts/transactions.
115- ✅ Loading indicators on API calls.
116- ✅ Infinite scroll for transactions (FlashList + TanStack Query).
117- 🔲 Accessibility improvements (VoiceOver, keyboard navigation).
118- 🔲 CI/CD setup for Expo builds.
119
120---
121
122## 🗺️ Navigation Flow
123
124