React Native Boilerplate

A React Native Boilerplate built to Scale

Key Features • How To Use • How To Use • Application Structure • License

Key Features

• 🔥 Built with react-native-cli with hermes engine enabled

  • Built with the native cli for very low package size
  • Hermes enabled for small size bundles and optimized development and builds

• 📈 Redux and Redux Thunk but with less boilerplate. See store

• 👮 Eslint and Prettier configured with git hooks

  • Eslint and prettier configured together for auto save format and error checks
  • No git commit allowed if errors and warnings are present

• 🙌 Global HTTP error and auth handler. See services

• 🎉 Huge SVG Icon library and more!

  • React Native Vector Icons loaded which covers a huge collections of svg icons
  • Need a custom SVG to load? SVG loader configured, just import the svg and you're good to go.

  import SVG Icon from './icon.svg';

• 💅 Many Custom Styled component framework for fast development styles

• 🔠 Multilingual. See config

• 🚀 Develepment scope based App config file for deployment. See config

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. Recommended to use Yarn for the project.

Setup the environtment based on your OS following instruactions from here

From your command line:

# Clone this repository
$ git clone repo-link

# Go into the repository
$ cd react-native-boilerplate

# Install dependencies
$ yarn install or npm i

# Run the app for android
$ yarn android

# Run the app for ios
$ yarn ios

Application structure

The directory layout of this boilerplate

.
├── .vscode                 # Vscode config, for autoformat on save.
├── android                 # All Android related files and config goes here
├── ios                     # All iOS related files and config goes here
├── node_modules            # NPM dependency folder
├── public                  # Reacts public folder for the html and static assets
├── src                     # Source directory for the React Application
│   │
│   ├── api                   # API async functions folder.
│   ├── assets                # Static assets folder for the global scope. Example: images, icons, fonts etc.
│   ├── components            # Typical React component folder but only for global components.
│   ├── config                # App config (More details inside the folder)
│   ├── features              # Features pattern folder for Application features (More details inside the folder)
│   ├── lib                   # Global helper functions and custom hooks folder
│   ├── screens               # Screen component folder
│   ├── navigator             # Application navigation/routing config (More details inside the folder)
│   ├── services              # Folder for services like custom axios instance, analytics etc.
│   ├── store                 # Application Redux store
│   ├── styles                # Custom Styled Components
│   └── App.js                # Entry component for the React App.
│
├── jsconfig.json           # Adjust file paths to use absolute file path for React
├── package.json            # The NPM config file for all the packages installed and scripts and more
├── .env.json               # Cause .env is a hassle on React native
├── .eslintrc               # Configure Eslint
├── .eslinignore            # ignore certain files for Eslint
├── .gitignore              # ignore certain files for git (example: .env)
├── .prettierrc             # Configure prettier (example: .env)
└── .prettierignore         # ignore certain files for Prettier

Credits

This software uses the following open source packages:

• React
• Styled Components
• React Redux
• Redux Thunk
• @reduxjs/toolkit
• redux-logger
• redux-persist
• i18next
• React Navigation
• React Native Vector Icons
• Axios
• eslint
• prettier
• husky
• And more..

License

MIT