File Layout

Root directory

The root directory contains some files and folders that are automatically created to configure the project. Only a few of the files in the root directory are relevant, including:

tsconfig.json

You don’t need to touch this for the most part, but it does contain configuration for path aliases, which are very useful.

Path Aliases

Path aliases allow you to create universal ‘shortcuts’ for file paths rather than using relative file paths. For instance, if you want to access src/components/Themed.tsx from within the (tabs) folder, you can type ‘@components/themed’ rather than ‘../../components/themed’. To create a path alias, add an entry to the paths field in the tsconfig.json. Keep in mind that the file paths within this folder are relative to the root folder.

---

src/

All of the source code for the project. Just about everything you write should go in here.

src/app

Contains all pages for the app.

src/app/(protected)

The contents of this folder are ‘protected’ and cannot be accessed until the user is authenticated. Most pages not related to authentication should be placed in here.

---

src/Components/

Place any reusable code components in here.

---

assets/

Fonts go in assets/Fonts, any images go in assets/images

---

node_modules/

When using npm install, any external packages are placed here. Do not upload this folder to GitHub as it is automatically created by npm and takes up a lot of space.