Need help with react-native-feature-boilerplate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

victorkvarghese
162 Stars 60 Forks MIT License 30 Commits 10 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 46,439
React
TypeScr...
Objecti...
redux-p...
24 commits
# 364,746
Java
Objecti...
reselec...
React N...
1 commit
# 145,807
React
Redux
CSS
Shell
1 commit

🚀 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 
  2. Go to project's root directory,
    cd 
  3. Remove
    .git
    folder,
    rm -rf .git
  4. Use React Native Rename to update project name
    $ npx react-native-rename 
  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
  1. Enjoy!!!

Contributing

PRs are welcome

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.