Installation

Open the project folder using your preferred code editor and launch the terminal. To install all the required dependencies, run npm install. Once the installation is complete, you can start the development server by running npx expo start. Expo will provide you with a URL and a QR code that you can use to view the app on your device or emulator.

Starting now, you can begin customizing the template to your liking.

Please refer to the expo documentation (opens in a new tab) for more information on the system requirements and how to setup your enviroment.

Fundamental concepts

Our Expo templates are designed to fully adhere to the new routing model provided by the Expo Router (opens in a new tab). This new routing model is based on the React Navigation library, which is the most popular routing solution for React Native apps. The new routing model is more flexible and powerful than the previous one, and it allows you to create complex navigation structures with ease.

Layout

Within the app/ directory, you will find a Root Layout (_layout.tsx) that is shared across all pages in the application. This layout provides the user interface that is shared across all pages in your application.

Pages and Navigation

In Expo, navigation between screens is handled using libraries like React Navigation (opens in a new tab). Each screen is typically represented by a React component, and the routes between screens are managed within a Stack. You can define screens using Stack.Screen, or other navigators, depending on your app's design.

For example, if you create a screen component at app/(auth)/welcome.tsx, you can navigate to this screen by defining a route in your navigation configuration. The route URL in a web build (with Expo Web) would correspond to something like website.com/welcome.

Expo Router allows for nesting navigators, making it flexible to structure your routes. You can find more details on how to set up and customize navigation in the Expo Router documentation (opens in a new tab).

Folder structure

Expo projects are typically organized into several key folders:

• bites/ is the main directory that contains your project files.
  • app/ includes all the screens or views of your app. These components define what the user sees on each route.
  • components/ contains reusable UI components, which can be used across multiple screens in the app.
  • assets/ stores static files like images, fonts, and videos.
  • constants/ includes configuration files, such as theme colors, fonts, and other global settings.
  • store/ contains the global state management logic for your app.

In the root directory of every template you will also find:

• _layout.tsx, which serves as the entry point for the app. This file contains the main setup, including registering navigation, loading fonts, and initializing global configurations.
• app.json is the configuration file for your app. You can define the app's name, version, and other settings here.
• package.json contains your project's dependencies and scripts.

You can customize the folder structure based on the needs of your app, but keeping it organized like this will help maintain clarity and ease of use.

If you have any questions or need help with the template, feel free to reach out to us at capricorn.engineering@outlook.com.