Skip to content

Feature based Architecture for developing Scalable React Native Apps πŸš€ using react, redux, sagas and hooks

License

Notifications You must be signed in to change notification settings

victorkvarghese/react-native-feature-boilerplate

Repository files navigation

πŸš€ React Native Feature Boilerplate - April 2020

React Native React Navigation V5

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)

Redux Logo

Redux Logo

Redux Logo

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

Prerequisites

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
  1. Start the packager with npm start
  2. Connect a mobile device to your development machine
  3. 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
  1. Enjoy!!!

Contributing

PRs are welcome