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.
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.
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 route, you can set the different navigation changed by login status.
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 module file which contains actions, reducer and store in a file. To connect with actions and state from component, you need to call connector. You can use actions and state from props. Here is an example. To combine reducer, first you can add another module file then import in connector like this code. Lastly import module in store as well.
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.
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.
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.
- expo
- react-navigation 4.x
- redux
- redux-logger
- redux-thunk
- moment
- axios
- react-native-vector-icons
- react-native-svg
- 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
This project is available under the MIT license. See the LICENSE file for more info.