dalalsunil1986 / react-native-feature-boilerplate

Feature based Architecture for developing Scalable React Native Apps

🚀 React Native Feature Based Boilerplate - April 2019

Feature based Architecture for developing Scalable React Native Apps (0.59.4)

React Native Boilerplate is a starting point for React Native application. This project is configured with redux, redux saga and redux persist. Latest version of react-navigation (v3.8) with NavigationService instead of Redux Integration.

Scalability Factor

This Architecture is optimised for large scale projects. If you are beginner who just started using react native, I would suggest starting with a type based architecture and slowly switching to this architecture.

React-Native-BoilerPlate for beginners.

Features

• Redux
• Redux Saga
• Redux Persist
• Redux Logger
• React Navigation
• React Native Gesture Handler
• Reselect
• Jest
• Eslint (Airbnb config)

Project Structure

• /app - Contains our React Native App codebase
  • /api - Api module class. Each file will be feature based like ProductAPI, LoginAPI etc
  • /components - universal shared components used by others.
  • /config - Universal styles,images,metrics etc..
  • /features - Config files
    • login- Each folder will be a feature like this.
      • reducers - Reducer associated with this feature [Mostly one, can be multiple]
      • sagas - Sagas related with this particular feature [can have single or muliple sagas associated]
      • selectors - selectors associated with feature
      • components - Components associated with this feature.
      • containers - Containers associated with this feature [Container - Component Structure]
  • /lib - lib helper files
  • /navigation - All naviagtion related studd including helpers functions and navigation stack
    • NavigationHelpers.js - Use this class instead of depending on props.naviagtion
    • NavigationService.js - Service class for naviagtion
    • NavigationStack.js - Stack to define naviagtion. you can split things further if needed
  • /store - Includes everything you need to set up store.
    • reducers - Combines all feature based reducers
    • sagas - Combines all feature based sagas
    • index.js - Set ups store and export things

Prerequisites

• Node v8.10 (it is recommended to install it via NVM)
• Yarn
• A development machine set up for React Native by following these instructions

Getting Started

1. Clone this repo, git clone https://github.com/victorkvarghese/react-native-boilerplate.git <your project name>

2. Go to project's root directory, cd <your project name>

3. Remove .git folder, rm -rf .git

4. Open package.json and change the name property with your project name

5. Open index.js and replace 'ReactNativeBoilerPlate' by your project name

6. Open app.json and replace 'ReactNativeBoilerPlate' by your project name

7. Run yarn or npm install to install dependencies

8. Run react-native eject to upgrade and add iOS & Android Folders.

9. Run react-native link

10. Latest versions of react-naviagtion uses gesture handler which is native module. For android you have to do some additional steps to configure them. Follow these instructions

FYI: Navigation should work fine even without these but when u need gestures or drawer navigation you need this setup

11. Start the packager with npm start
12. Connect a mobile device to your development machine
13. Run the test application:

• On Android:
  • Run react-native run-android
• On iOS:
  • Open ios/YourReactProject.xcodeproj in Xcode
  • Hit Run after selecting the desired device

14. Enjoy!!!

Contributing

This is Work in Progress [WIP]. I would love to see some PRs and suggestions from everyone Lets make this boilerplate more efficient and developer friendly.