A good template for expo user , base on Ignite 
Tags: expo, reactnative
Published: 2021-06-10 08:30:36

## A well done boiletplate for expo

https://github.com/timeturnback/react-native-rc-expo-boiletplate

- [`App`](#App)
  - [`Assets`](#Assets)
  - [`Components`](#Components)
  - [`Config`](#Config)
  - [`i18n`](#i18n)
  - [`Navigation`](#Navigation)
  - [`ReduxSaga`](#ReduxSaga)
  - [`Services`](#Services)
  - [`Themes`](#Themes)
  - [`Utilities`](#Utilities)
  - [`index.js`](#index.js)
- [`.vscode/settings.json`](#.vscode/settings.json)
- [`.eslintignore`](#.eslintignore)
- [`.eslintrc.json`](#.eslintrc.json)
- [`.gitignore`](#.gitignore)
- [`.prettierrc.js`](#.prettierrc.js)
- [`babel.config.js`](#babel.config.js)
- [`jsconfig.json`](#jsconfig.json)
- [`package.json`](#package.json)

---

### `App`

Application structure . All FE running code will be here . I use index.js to represent the App.js in the expo init.

- `Assets`

Put your font and image here

- `Components`

For global component

- `Config`

App config

- `i18n`

For internation ( translate ) text

- `Navigation`

Navigation setting and route name and style

- `ReduxSaga`

ReduxSaga folder . I place it together for the easy find and work.

- `Themes`
All the global themes should be put here .

- `Utilities`
All the support code , like unit convert and other data function . 

- `index.js`

Replacement for App.js by default 

---

### `.vscode/settings.json` `babel.config.js`  `jsconfig.json`

Setting for using @app static directory

---


### Package

| Package                                 | Purpose                                                            |
| --------------------------------------- | ------------------------------------------------------------------ |
| @react-native-community/async-storage   | For using async-storage , require for redux persist                |
| expo-app-loading                        | Apploading                                                         |
| expo-status-bar                         | Status bas                                                         |
| i18n-js                                 | For international                                                  |
| moment                                  | Time formating                                                     |
| react-native-modal                      | Modal use in app                                                   |
| react-native-size-matters               | Size matter for consistent UI android and ios                      |
| **OPTIONAL**                            |
| react-native-keyboard-aware-scroll-view | For scrollview not date time picker ( optional )                   |
| react-native-picker-select              | Picker select date time picker ( optional )                        |
| react-native-root-toast                 | For showing toast ( optional )                                     |
| @react-native-community/datetimepicker  | date time picker ( optional )                                      |
| **NAVIGATION**                          |
| react-navigation                        | For navigation                                                     |
| react-navigation-stack                  | For navigation                                                     |
| react-native-gesture-handler            | For navigation                                                     |
| react-native-reanimated                 | For navigation                                                     |
| @react-native-community/masked-view     | For navigation                                                     |
| react-native-screens                    | For navigation                                                     |
| **REDUX**                               |
| react-redux                             | React Redux                                                        |
| redux                                   | Redux                                                              |
| redux-persist                           | Redux persist ( for saving state when app go background or killed) |
| redux-saga                              | Redux saga                                                         |
| reduxsauce                              | Redux sauce                                                        |
| seamless-immutable                      | For redux state manage                                             |

### Dev package

| Package                               | Purpose |
| ------------------------------------- | ------- |
| @babel/core                           |         |
| @babel/runtime                        |         |
| @react-native-community/eslint-config |         |
| metro-react-native-babel-preset       |         |
| **ESLINT**                            |
| babel-eslint                          |         |
| babel-plugin-ignite-ignore-reactotron |         |
| eslint                                |         |
| eslint-config-standard                |         |
| eslint-config-standard-react          |         |
| eslint-plugin-import                  |         |
| eslint-plugin-node                    |         |
| eslint-plugin-promise                 |         |
| eslint-plugin-react                   |         |
| eslint-plugin-react-native            |         |
| eslint-plugin-standard                |         |
| **JEST**                              |
| jest                                  |         |
| react-test-renderer                   |         |
| **REACTOTRON**                        |
| reactotron-react-native               |         |
| reactotron-redux                      |         |
| reactotron-redux-saga                 |         |