@gocodingnow/rn-native-base-boilerplate/template/README.md

React Native + Native Base Boilerplate

# Welcome to Project!

## Explanation of folder structure

```bash
Boilerplate
├── lib
├── patches
├── src
|   ├── assets
|   ├────────/fonts
|   ├────────/svg
|   ├────────/images
│   ├── components
│   ├── constant
│   ├── i18n
│   ├── navigation
|   ├────────/navigators
|   ├────────/params
│   ├── screens
│   ├── services
|   ├────────/api
│   ├── state
│   ├── styles
│   ├── types
│   ├── utils
│   ├── app-wrapper.tsx
│   └── app.tsx
├── README.md
├── android
├── ios
├── index.js
└── package.json
```

**lib**  
This folder contains reusable/customize outside packages.
In this template, we use `react-native-size-matters`, because it's in progress and will be merged soon, but not sure when, so we fork and maintain it inside this template.  
The main benefit of this package, it will have responsive across of devices.  
All credits to <https://github.com/nirsky/react-native-size-matters>

**patches**  
This is automatically generated by patch-package. It will help us to modify node_module package easily in case you have hotfix but hotfix will be very small.

**_SRC_**  
**assets**  
The assets folder include 3 main folders: fonts, icons and images.

- `fonts` folder will contain the custom fonts you use in the project  
  After add custom fonts in fonts folder, thanks for `react-native.config.js`
  you can link fonts into the project by running this command line

```bash
  npx react-native link
```

- `icons` folder will contain svg icon or even image icon.
  It will use and import in component/icon, check it to see its usage.
  Note: for naming convention, the file should have name with dash, such as: name-with-dash.svg

- `icons` folder will contain images
  Note: for naming convention, the file should have name with underscore, such as: name_with_underscore.png

**components**  
This contains common components.

**i18n**  
This is where your translations will live if you are using `i18n-js`.

**navigation**  
This contains routing structure with react-navigation v5. There are 2 main folders: navigators and params.

**screens**  
This follows file per screen, each screen will be a folder.
The structure suggests:

```bash
example-screen
  components
    - only-use-inside-this-screen1.tsx
    - only-use-inside-this-screen2.tsx
  example-screen.tsx
  index.ts
```

**state**  
This folder can contain Redux or MST for state management.

**services**  
Any services that interface with the outside world will live here (think REST APIs, Push Notifications, etc.).

**styles**  
This folder includes theme configuration including spacing, colors, and typography.

**utils**  
This is a great place to put miscellaneous helpers and utilities. Things like date helpers, formatters, etc. are often found here. However, it should only be used for things that are truly shared across your application. If a helper or utility is only used by a specific component or model, consider co-locating your helper with that component or model.

**app.tsx**  
This is the entry point to the app containing main component.

**app-wrapper.tsx**  
This is a another layer to avoid making app.tsx so messy and complex.

## Some notes

- react-native-config

This project is using react-native-config to share environment variables through JS and native.
To use, copy .env.example content and create 2 files:

```bash
cp .env.example .env.development
cp .env.example .env.production
```

IMPORTANT NOTE: When try to change .env during the development time, you have to reset cache/rebuild project.
if the variables are only used for JS, you only need to reset cache

Turn of terminal

```bash
yarn start --reset-cache
```

if the variables are using for native, you have to rebuild project

```bash
yarn ios
or
yarn android
```