# React Native Demo App

A simple **mobile banking application** built with **React Native** and **Expo**, powered by the provided API (`react-native-demo`).  
This app demonstrates clean architecture, modular code, and mobile development best practices.

---

## 📱 Features

The app implements the core requirements from the assignment:

1. **Authentication** — Login with credentials (`test@test.test` / `password@123` by default).
2. **Accounts Overview** — List of accounts (checking, savings, etc.).
3. **Transactions** — View transactions for a selected account, with:
   - search
   - sort
   - pagination
   - infinite scroll
4. **Cards Overview** — List of stored cards.

---

## 🏗️ Architecture Decisions

- **Framework**: [Expo](https://expo.dev/) for fast development, simple build tooling, and easy testing on iOS, Android, and web.
- **Language**: [TypeScript](https://www.typescriptlang.org/) for strong typing and maintainability.
- **Navigation**: [React Navigation](https://reactnavigation.org/) for stack + tab navigation.
- **Styling**: Basic **React Native styles** with the [Catppuccin](https://catppuccin.com/) color palette.
  - In a real-world project, a UI component library (React Native Paper, Tamagui, NativeBase) would be added for consistency and scalability.
- **Lists**: [FlashList](https://shopify.github.io/flash-list/) by Shopify for efficient rendering of large lists (transactions).
  - FlashList provides smoother scrolling and better performance compared to FlatList.
- **Data Fetching & State Management**: [TanStack Query](https://tanstack.com/query) for server-state management.
  - Handles caching, background refetching, and pagination logic cleanly.
  - Used together with FlashList to implement **infinite scroll** on transactions.
- **Auth & App State**: Context + hooks for lightweight client state.

---

## 🔧 Prerequisites

- [Node.js](https://nodejs.org/) **v18 or higher**
- [Expo CLI](https://docs.expo.dev/get-started/installation/):

  ```bash
  npm install -g expo
  ```

- The API server (`react-native-demo`) running locally at `http://localhost:3001`.

---

## 🚀 Installation

1. Clone the repository and navigate to the app folder:

   ```bash
   git clone git@tangled.sh:mokkenstorm.dev/react-native-demo
   cd react-native-demo/app
   ```

2. Install dependencies:

   ```bash
   npm install
   ```

3. Generate API bindings from the OpenAPI spec:

   ```bash
   npm run generate
   ```

---

## ▶️ Running the App

Run with Expo:

```bash
npm run ios     # iOS simulator
npm run android # Android emulator
npm run web     # Web browser
```

Expo will guide you to open the app on your device or emulator.

⚠️ **Note:** The API server **must be running** on `http://localhost:3001` for login and data fetching to work.

---

## 🧪 Testing

Unit tests are written with **Jest** and **React Native Testing Library**.  
Run tests with:

```bash
npm test
```

---

## 📦 Node & NPM Versions

- **Node.js**: v18+
- **npm**: v9+

(Verified using `nvm` for version consistency.)

---

## ✨ Bonus Features

- ✅ Refresh token handling to keep the user logged in.
- ✅ Pull-to-refresh on accounts/transactions.
- ✅ Loading indicators on API calls.
- ✅ Infinite scroll for transactions (FlashList + TanStack Query).
- 🔲 Accessibility improvements (VoiceOver, keyboard navigation).
- 🔲 CI/CD setup for Expo builds.

---

## 🗺️ Navigation Flow

![App Navigation Flow](./navigation_flow.png)