blackbeardo / expo-router-typescript

Quickstart Expo Application with Typescript and Expo Router Baked In.

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 config folder is where you can place constants for your application.

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

• The types folder is where your global and local types will live.

• The utils folder is a place to put all your reusable functions.

3. Getting Started

a. Clone this repo to your local machine:

git clone [email protected]:thedevenvironment/expo-router-typescript.git

b. Install dependencies:

npm run setup

c. Start the dev server:

npm run dev

d. Press s to switch to expo Go

e. Choose your platform

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

4. Further Reading:

• Expo Router Docs

• React Navigation Docs

• Expo Docs