We spend a large amount of time to setup a project; changing file structure, installing libraries, creating reusable components, and so on. The purpose of using the project is to minimize the redundant effort to setup a project from scratch. In the boilerplate, it contains only commonly-used libraries and the all setup is done for you.
- Node: 16.x
At default, you can see 3 types of navigation; stack, tab, and drawer. The files are separated by the navigation types. If you don't need drawer navigation for example, you can remove the drawer file and replace here with tab or stack navigator.
If your app requires authorization, you need to implement login, signup function. After the user login or logout, the navigation flow should be different. In this case, the route should be switched by the login status. In the navigator, you can set the different navigation changed by login status.
We are using redux toolkit to simplify redux configuration. Redux can contain the global state of the app. In the boilerplate, all of the redux modules are placed in the module folder. The module file contain actions, reducers and hook. You can check in the app module file. Here is a example how to use the module.
If you want to add a new module, copy and paste the app module in the module directory first. Rename it. Then import the module in the store file, that't it. If you need more instruction, please follow the quick start tutorials to see how store is setup; and how to use Redux state and actions in React Components.
Images, icons and fonts are controlled under theme. If you add new assets, you need to import the new assets in each file to access the assets from the theme. Also, assets preloading is implemented as well. You can also use svg file in the boilerplate. All the assets are ready to use by importing the theme.
If your project structure becomes complicated and has a lot of nested folders, you will have problems with relative paths. In the boilerplate, you can use absolute paths. You write a simple import statement i.e. 'components/Button'. No more ../../../components/Button. The configuration is written in babel.config.js and tsconfig.json.
You may want to switch environment variables based on the development stage. If you want to add dev environment for example,
- Add a new script
APP_ENV=dev npx expo start -cin scripts - Add dev configuration in app.config.ts (example)
- Populate the environment variables in config.ts
If you'd like to know more about dynamic configuration, please check the page.
It's very important to keep code clean to maintain readability and productivity. In the boilerplate, Eslint, Prettier and Jest configurations are done. It's continuously checking and formatting your code while you coding (Please enable "Format on Save" option if you prefer to format code after saving change). After you submit changes, pre-commit script will run to handle checking and formatting your code, run test. If the 3 steps are passed, you will be able to push the change.
Once you complete your work, you may want to share the preview with the QA team. The boilerplate automate the distribution process. When you create PR or merged in the main branch, it create preview channel in your expo account. You do not need to run eas command everytime PR created. You can check the CD configuration here. For the CD process, we use expo-github-action.
To spin up CD workflow, you'll need to create EXPO_TOKEN in expo account and add it in your github repo Settings > Secrets > Actions. Please read the readme page for more instructions.
You can run npx expo prebuild in the project root to generate ios and android native code. Please check the page for more details.
- 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
- Download zip or click "Use this template"
- Update
app.json
"name": "{your-project-name}",
"slug": "{your-project-name}",
...
# 👇 replace with yours project id or comment out
"extra": {
"eas": {
"projectId": "{your-expo-project-id}"
}
},
"updates": {
"url": "https://u.expo.dev/{your-expo-project-id}"
},
npm installoryarn install- In the terminal,
npm run startoryarn run start
This project is available under the MIT license. See the LICENSE file for more info.