Say goodbye to time-consuming setup tasks like restructuring files, installing libraries, and crafting reusable components. Our project boilerplate is your solution to eliminate redundant work when starting from scratch. It includes only the most commonly-used libraries, so you can hit the ground running with a fully configured setup.
- Node: 20.x
- Download zip or click "Use this template"
- Update
app.json
"name": "{your-project-name}",
"slug": "{your-project-name}",
...
# 👇 Please comment out the following lines or replace them with your project ID
"extra": {
"eas": {
"projectId": "{your-expo-project-id}"
}
},
"updates": {
"url": "https://u.expo.dev/{your-expo-project-id}"
},
- Install packages with
npm installoryarn install - Spin up dev environment with
npm run startoryarn run start
By default, you'll find 3 types of navigation in the project: stack, tab, and drawer. These navigation types have their corresponding files organized in the project structure. If, for instance, you don't require drawer navigation, you can simply remove the drawer file. Additionally, you can easily make the necessary adjustment by replacing the navigation type here with either tab or stack navigation.
If your app requires authorization, it's essential to implement login and signup functionality. The navigation flow should vary based on the user's login or logout status. In the navigator, you can configure distinct navigation routes depending on the user's login status.
We've simplified the Redux configuration in this project using Redux Toolkit, which efficiently manages the global state of the app. All Redux modules can be found in the module folder. Each module file contains actions, reducers, and hooks. For a practical example of how to use a module, you can refer to the app module file.
If you need to create a new module, start by duplicating the app module and giving it a new name in the module directory. After that, import the module in the store file—simple as that.
For more detailed instructions, you can follow the quick start tutorials, which provide guidance on setting up the store and utilizing Redux state and actions within React components.
Assets such as images, icons, and fonts are centrally managed in the theme section of the project. When you introduce new assets, it's important to import them into the respective files where you intend to use them, enabling easy access to these resources through the theme.
Additionally, we've implemented asset preloading in the boilerplate to enhance performance. Furthermore, you have the flexibility to utilize SVG files in your project. All assets are readily available for use by importing them from the theme.
Managing complex project structures with nested folders can often lead to issues with relative paths. However, in this boilerplate, we've simplified things by enabling the use of absolute paths. Now, instead of writing lengthy and error-prone relative paths like '../../../components/Button', you can simply use 'components/Button' in your import statements.
This configuration is set up in both babel.config.js and tsconfig.json, making it easy to work with absolute paths throughout your project.
To switch between different development environments, such as adding a 'dev' environment, follow these steps:
-
Add a new script in your package.json with the command
APP_ENV=dev npx expo start -c. -
In the app.config.ts file, create a 'dev' configuration as an example.
-
Populate the environment variables specific to each environment in the config.ts file.
For more details on dynamic configuration, you can refer to the Expo documentation page.
Maintaining clean code is crucial for readability and productivity. In this boilerplate, we've set up configurations for Eslint, Prettier, and Jest to help you achieve just that. Here's how it works:
-
While you're coding, these tools continuously check and format your code. You can enable the 'Format on Save' option to automatically format your code after saving changes.
-
When you submit changes, a pre-commit script runs, which checks and formats your code and runs tests.
-
If all three steps (code checking, formatting, and testing) pass successfully, you'll be able to push your changes with confidence, knowing that your code is clean and reliable.
When you've completed your work and need to share a preview with the QA team, our boilerplate automates the distribution process for you. Here's how it works:
-
Whenever you create a pull request (PR) or merge changes into the main branch, it automatically generates a preview channel in your Expo account.
-
You don't need to run 'eas' commands every time you create a PR; the process is streamlined for you.
-
The continuous delivery (CD) process is managed through the preview.yml configuration file, which utilizes expo-github-action.
To set up the CD workflow, follow these steps:
-
Create an
EXPO_TOKENin your Expo account. You can do this by visiting this link. -
In your GitHub repository, go to Settings, then navigate to Secrets and variables -> Actions -> Add new repository secret. Make sure to name the secret as
EXPO_TOKEN. -
After you push changes to the main branch, a new preview will be created automatically.
To generate iOS and Android native code, you can run npx expo prebuild in the project's root directory. For more details and specific instructions, please refer to the Expo documentation page.
- expo v49
- expo-asset
- expo-font
- expo-image
- expo-splash-screen
- expo-status-bar
- react-navigation 6.x
- redux-toolkit
- redux-logger
Expo provides a popular set of vector icons. Please search icons from here
This project is available under the MIT license. See the LICENSE file for more info.