React Native - El Taller de Mi Amigo's App

In this project we present a multiplatform app for iOS and Android for a car workshop, whose main goal is to facilitate users to ask for usual and recurrent tasks, like requesting to have a mechanic over to carry the car to the workshop; or general repairs for wheels, replacements, other faults...

This project is cored by Expo (Router) and React Native. The former is a tool that simplifies DevOps and takes care of most gritty details from ios and android folders you'd have to manually configure when using Flutter; also, the Router extension makes navigation a matter of URLs, making it way easier to manage and organize the project. The latter is self-explanatory and quite famous, so it doesn't need any further explanation.

Expo

How to install

If it's your first time cloning the project, apply these commands first:

1. Run npm i -g expo-cli
2. Run npm i
3. (Optional) Run npx expo install --fix, if you got any dependency errors.

How to run in a device

Just run the command npx expo start --tunnel. It will create a local server hosting the app.

Then, after a QR code appears on the Terminal, you'll have to install the Expo Go app and then scan the QR with your phone's camera. A link will pop up. If you click on it, it redirects you to Expo Go and installs the app, making use of your phone as an emulator in a physical device.

How to update Expo

To update the Expo SDK, just run:

1. npm install expo@latest

If you also wish to upgrade its dependencies, or make them compatible with one another, you should run:

2. npx expo install --fix

General folder structure

All code files will be written in TypeScript (.ts files for sheer logic and .tsx whenever JSX [aka, UI in code] is involved).

1. In app/ you have all views (pages and layouts) for the project. Each page's root is defined by its folder structure. For example, a file in app/home/index.tsx will have the route /home. Also, a file in app/home.tsx will also have the same route, so make sure not to cause any compatibility problems this way.
2. In components/ appear those widgets that do not occupy a whole screen and are part of a page.
3. In hooks/ we include all custom hooks we have created.
4. In styles/ we list all files that has something to do with styling and/or standardizing metrics.
5. In assets/ we include all resources we may use within the app, like icons, images, audios, sound effects, etc.
6. In constants/ are all other files that include all other types of constant values.