patrickleemsantos/react-native-feature-boilerplate

Feature based Architecture for developing Scalable React Native Apps 🚀 using react, redux, sagas and hooks

🚀 React Native Feature Boilerplate - April 2020

React NativeFeature Boilerplate is a starting point for React Native application. This project is configured with redux, redux saga and redux persist. Uses latest version of react-navigation (v5)

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

• React Hooks
• React Navigation with Authentication flow baked in.
• React Native Gesture Handler
• React Native Paper
• React Native Vector Icons
• Redux with hooks support
• Redux Saga
• Redux Persist
• Reselect
• Jest
• Eslint (Airbnb config)

Prerequisites

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

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 stuff including helpers functions and navigation stack
    • NavigationService.js - Service class for navigation - can be used without using props
    • 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

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. Use React Native Rename to update project name $ npx react-native-rename <newName>
5. Run yarn or npm install to install dependencies

6. Start the packager with npm start
7. Connect a mobile device to your development machine
8. Run the test application:

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

9. Enjoy!!!

Contributing

PRs are welcome