x302502 / react-native-boilerplate

Expo + Redux + React Navigation Pre-setup Template (expo SDK 44)

• Expo link

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

• eslint
• prettier
• jest
• pre commit

How to Use

1. Download zip or click "Use this template"
2. Update app.json

 "name": "your-app-name",
 "slug": "your-app-name",

3. yarn install or npm install
4. If you haven't setup expo, please follow the instruction to complete setup
5. In terminal, expo start

Licence

This project is available under the MIT license. See the LICENSE file for more info.