yusufcodes / workout-app

Expo Router Typescript

@thedevenviroment

1. Introduction

2. Folder Structure

3. Getting Started

4. Further Reading

---

1. Introduction

This repo is a scaffolding of an Expo application that uses Expo Router and it's file based routing capibilities. It has all the necessary packages needed to just start the application and begin adding routes.

The reason it exists is to mitigate the amount of work needed to add typescript, jest, absolute imports and eslint into the traditional quickstart that the create-expo-app CLI command provides.

Two sample screens have been created, so everything will run out of the box. Also a number of useful scripts have been created in the package.json that allow the ability to run, build, test, lint and serve the application.

2. Folder Structure

a. App Directory:

• This folder is used at the file based router. Any file that lives here will be converted to a route for the application. Learn More

b. Src Directory:

• This is where the application logic will live.

• The assets folder hosts images, fonts and base styles.

• The components folder is where reusable react components will live.

• The hooks folder has a useAppLoading hook that handles the logic of loading assets and displaying the spinner.

• The layouts folder is where the view wrapper logic lives.

• The screens Folder maps 1:1 with the routes in the app directory. The / path points to the Home.tsx screen, and then /second points to the Second.tsx screen. If you don't like this structure, you can move the component logic directly into the .tsx files in the app directly, however this provides a more robust solution.

3. Getting Started

a. Clone this repo to your local machine:

git clone [e-mail]:thedevenvironment/expo-router-typescript.git

b. Install dependencies:

npm ci

c. Start the dev server:

npm run dev

d. When prompted, choose which platform to run on:

• a - android
• i - ios
• w - web

4. Further Reading:

• Expo Router Docs

• React Navigation Docs

• Expo Docs