React Native app

[amrmelsayed]

This PR covers the remaining Ansari’s React Native app core tasks.

Let’s go through the commits:

Replace local storage, refactor token management implementation

The main objective behind this commit is to replace local storage (web specific storage implementation) with RN Async Storage which supports both web and native storage, session storage for guest users has been removed (has no equivalent in RN but the tokens are stored in the redux store for the duration of the session anyway).

One of the issues I have had to deal with is the storage of user details (first name, last name, etc.) in local storage which has been completely removed and replaced with a /me API call on application startup.

I have also refactored a lot of the logic surrounding token management, refreshing, loading and saving as the existing implementation was all over the place.

Update localization for React Native compatibility
This commit replaces the DOM language detection logic with an RN equivalent (expo-localization) and refactors as needed.

React Native configuration / package updates / linting
These commits add/update the core RN app configuration files (eas.json, app.json), updates Expo and other dependencies and deals with a few linting issues.

Remove Yarn
This commit removes Yarn and reverts back to standard npm. The codebase currently uses Yarn Classic which has been deprecated a while back and is currently causing compatibility issues with new packages, I have removed it, replaced yarn.lock with package-lock.json, and I have also updated the workflow files.

I didn't update the existing Google Bucket deployment scripts as I assume that we will be using Vercel for staging and production, but I can update it if you would like to retain the current production environment.

Replace avatar component
This commits replaces the avatar component which has been using a package that hasn't been updated in a few years and is no longer supported.

React Native core updates
This commit deals with a series of refactoring tasks that focus on updating the codebase to be React Native compatible while retaining web-specific elements like css in web mode.

Replace React Native CheckBox
The standard CheckBox is no longer part of the core React Native library, I have replaced it.

Update layout styles
A few foundational styling updates.

What is the current status of the project?
Ansari is currently working within a React Native app environment and no longer through a Capacitor webview bridge.

The Capacitor projects will be removed in the next PR.

The final step which I will work on next is to go through each page and review / update its style for React Native compatibility and make sure the app version renders similar to the web version, then we we will be ready to go live.

Stay tuned for more details.

[waleedkadous]

What a momentous achievement. Thank you for all your hard work. I really think this is a special day in the history of Ansari.

[waleedkadous]

Longer term, what do you think the right solution will be for the equivalent for CORS on mobile?

[amrmelsayed]

There is no CORS equivalent for native apps, this header doesn't offer any real protection as anyone with access to the header can access the APIs especially that is just a plain text value.

Initially I would suggest that we add a rate limiting middleware which I would say is essential as the services used by the APIs are quite expensive and should be restricted by user / IP etc.

If someone hits your APIs excessively, it can cause a major billing problem for you, have you considered / addressed this scenario already?

[waleedkadous]

:-). Thanks for doing this.