victorkvarghese/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

react-native-feature-boilerplate's Issues

Any thoughts on adding storybook to this boilerplate?

Storybook

unable to run the project.

My environment is perfectly set up and I tried to run other projects they are running perfectly fine. Please find the error below.

error Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:

Using reduxsauce

Hi @victorkvarghese
Don't you think we should use reduxsauce now? Very nice addon to shorten our actions.

You can find a great reference example here.

App crashes on initial start

it shows open app again then close app

Can't Launch the default app in android

I did all the steps mentioned but the apps keep crashing in android emulator. I am using Windows OS.

Seems outdated and not active project anymore?

Hi @victorkvarghese
Quite an impressive project this looks to be.
But seems outdated and not an active project anymore? Do you have any further plans? Can you please update it to v0.62 RN.

This has the potential of becoming as big as this masterpiece (25.1K stars)