About
We spend a large amount of time to setup a project; changing file structure, installing libraries, create 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 done for you.
Environment
- Node: 16.x
- Yarn: 1.22.x
- expo/expo-cli: 5.0.3
What's included
Navigation
At the default, you can see 3 types of navigation; stack, tab, and drawer. Here in the code, files are separated by the navigation types. If you don't need drawer navigation for example, you can the remove drawer file and replace the import status here to tab or stack navigator.
Authentication
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.
Redux
We are using Redux Toolkit to simplify the redux setup and minimize boilerplates. Redux can contain global state of the app. This is very useful but on the other hand, it takes time to setup if you are not familiar with it. In the boilerplate, you see slices file which contains actions and reducers in a file. Please follow the quick start tutorials to see how store is setup; and how to use Redux state and actions in React Components.
Assets
Images, icons and fonts are controlled under theme. If you add new assets, you need to import the new assets in each files to access the assets from 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 theme.
Absolute path
If your project structure become complicated and has a lot of nested folders, you will have problem with relative paths. In the boilerplate, you can use absolute paths. You can write simple import statement i.e 'components/Button'. No more ../../../components/Button. The configuration is written in babel.config.js.
Code formatting, fixing and testing on pre commit
It's very important to keep code clean to maintain readability and productivity. In the boilerplate, Eslint, Prettier and Jest configuration are done. It's continuously checking and format your code while you coding (Please enable "Format on Save" option if you prefer to format code after save 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.
Automated-deployment with github action
Once you complete your implementation, you may need to publish your package to share to the QA team. The boilerplate already setup automated deployment with expo-github-action. Once you push changes to the main branch, github action handle deployment; publish the package to your expo account. You can check the deployment configuration here.
To connect to your expo account, Read the readme page for instruction. You'll need to generate a token. Then setup token in your github repo Settings > Secrets > Actions. Add action secret named "EXPO_TOKEN". That's it!
Libraries
- expo
- react-navigation 5.x
- redux
- redux-toolkit
- redux-logger
- moment
- axios
- react-native-vector-icons
- react-native-svg
Libraries for development
How to Use
- Download zip or click "Use this template"
- Update
app.json
"name": "your-app-name",
"slug": "your-app-name",
yarn installornpm install- If you haven't setup expo, please follow the instruction to complete setup
- In terminal,
expo start
Licence
This project is available under the MIT license. See the LICENSE file for more info.