mokkenstorm.dev / react-native-demo
ICS React Native App
fork atom
react-native-demo / app /
at main 7 folders 9 files
app
assets
components
constants
hooks
providers
services
.gitignore
README.md
app.json
eslint.config.js
navigation_flow.png
openapi-ts.config.ts
package-lock.json
package.json
tsconfig.json
README.md

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 for fast development, simple build tooling, and easy testing on iOS, Android, and web.
  • Language: TypeScript for strong typing and maintainability.
  • Navigation: React Navigation for stack + tab navigation.
  • Styling: Basic React Native styles with the Catppuccin 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 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 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 v18 or higher

  • Expo CLI:

    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:

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

  2. Install dependencies:

    npm install

  3. Generate API bindings from the OpenAPI spec:

    npm run generate

▶️ Running the App#

Run with Expo:

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:

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