Settle-Aid-Frontend

Frontend project for SettleAid

👉 Frontend Dev Doc

User Manual

Test Run The App

Run the development server using

• When using iOS, scan the QR code with camera app
• When using Android, scan the QR code with Expo Go App

npm start

and then scan the QR code in the terminal (you may need to scroll up to see them)

Development Overview

Tech Stack

Frontend Tech stack we use:

• React Native - Fundamental Framework to build native app for Android and iOS in React
• React Native Paper - UI component and theme library for UI consistency accross devices
• React Native Dates - Date selector component for React Native Paper
• Expo Router - Routing between screens
• Axios - API request library
• Redux - Global state management for React app
• Redux Persist - Data persistance for Redux
• React i18next - Internalization for React
• Expo Location - Providing access to Geolocation
• React Native Maps - Cross-platform map component

🆕 New In Iteration 2

• Expo Calendar - Provides an API for interacting with the device's system calendars
• Expo KeepAwake - A React component that prevents the screen from sleeping when rendered.
• Expo Localization - A library that provides an interface for native user localization information.
• Expo Print - A library that provides printing functionality for Android and iOS (AirPrint).
• React Native Share - Provide access to system share API
• Socket.io Client - For realtime messaging

Custom Hooks

• useAppTheme() - get a theme object that provides custom app theme colors

Directory Descrioption

• api - fetch method wrapper for api requests
• app - router root directory, all pages sits here
• assets - static assets like images and fonts
• components - components that could be used across pages
• hooks - custom hooks
• store - UI data store, all ui data resides here, based on Redux
• theme - ui theme related code
• translation - translation files
• types - object type that could be used accross pages
• constants - const that might be used accross pages

Additional Resources

Deployment

• Official Doc: https://docs.expo.dev/build-reference/apk/

Login:

expo login

If console throw "verify that the path is correct and try again" when using the commands, add "npx" before each command except "npm" one would help.

Install EAS Cli:

npm install --global eas-cli

Link the code base to project:

eas init --id 714abc65-7237-4be7-8349-feffeae9f93d

Build:

eas build -p android --profile preview

Icons

• Material Design Icons - Material Community Icons Search Engine, could be used to find the names of certain icon
• React Native Paper Icons Page

Routers

• Expo Router - Create Page - Create page manual of Expo Router
• Expo Router - Navigate between pages - How to navigate between pages both component and imperative