@pspatel/react-native-boilerplate

React Native boilerplate

This project is a React Native boilerplate that can be used to kickstart a mobile application with a cleaner architecture.

The boilerplate provides an optimized architecture for building solid cross-platform mobile applications through separation of concerns between the UI and business logic.

Requirements

Node 10 or greater is required. Development for iOS requires a Mac and Xcode 9.4 or up, and will target iOS 9 and up.

You also need to install the dependencies required by React Native.
Go to the React Native environment setup, then select React Native CLI Quickstart tab.
Follow instructions for your given development OS and target OS.

Boilerplate Highlights

Some of the key highlights of this boilerplate is as below:

Core

• React Native for views.
• React Navigation handles in-app navigation.
• TypeScript for adding types to JS files.
• Redux manages application state.
• React Redux to use React-Redux bindings.

Utilities

• Axios for API calls.
• HTTP Service Base service class for API calls.
• Navigation Service Navigation Service class to navigate without navigation props.

Developer Experience

• Prettier for linting.
• Flipper for debugging.

Directory Structure

.
├── __tests__                       # Test cases container folder
├── android                         # Android specific files container folder
├── ios                             # iOS specific files container folder
├── node_modules                    # Node Packages.
├── resources                       # Font files that are copied to native folder when building.
├── src                             # Source code.
|   ├── assets                      # Container folder for asset files.
│   │ ├── images                    # Container folder for image files.
│   ├── components                  # Container folder for reusable components through out the app.
│   ├── navigation                  # Navigation components and wrappers.
│   ├── redux                       # Container for redux files.
│   │ ├── slice                     # Container folder specific redux.
│   │   ├── x.slice.ts              # Slice file container action,reducer and initial state.
│   │ ├── store.ts                  # store creation function and related files
│   │ ├── root.reducer.ts           # container file for combined reducers
│   ├── screens                     # page like screens containers .
│   ├── services                    # API call related files and general services related files.
│   ├── themes                      # Colors,Fonts,Pixel related calculations and constants.
│   ├── utils                       # Container folder for helper functions.
├── .gitignore                      # Tells git which files to ignore.
├── .prettierrc                     # Rules for prettier linter.
├── App.tsx                         # Container file for all layouts.
├── index.js                        # Initial file to run the app.
├── package.json                    # Package configuration.
├── tsconfig.json                   # TypeScript transpiler configuration.

Start

To create a new project using the boilerplate simply run :

$ npx react-native init MyApp --template @pspatel/react-native-boilerplate

Assuming you have all the requirements installed, you can run the project by running:

• yarn start to start the metro bundler, in a dedicated terminal
• yarn <platform> to run the platform application (remember to start a simulator or connect a device)

Roadmap

• Open for next suggestions