Feature based Architecture for developing Scalable React Native Apps (0.57.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 (v2.18) with NavigationService instead of Redux Integration.
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.
/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 fileslogin
- 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 featurecomponents
- 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 stackNavigationHelpers.js
- Use this class instead of depending on props.naviagtionNavigationService.js
- Service class for naviagtionNavigationStack.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 reducerssagas
- Combines all feature based sagasindex.js
- Set ups store and export things
- Node v8.10 (it is recommended to install it via NVM)
- Yarn
- A development machine set up for React Native by following these instructions
-
Clone this repo,
git clone https://github.com/victorkvarghese/react-native-boilerplate.git <your project name>
-
Go to project's root directory,
cd <your project name>
-
Remove
.git
folder,rm -rf .git
-
Open
package.json
and change thename
property with your project name -
Open
index.js
and replace'ReactNativeBoilerPlate'
by your project name -
Open
app.json
and replace'ReactNativeBoilerPlate'
by your project name -
Run
yarn
ornpm install
to install dependencies -
Run
react-native upgrade
to upgrade and add iOS & Android Folders. -
Run
react-native link
-
Start the packager with
npm start
-
Connect a mobile device to your development machine
-
Run the test application:
- On Android:
- Run
react-native run-android
- Run
- On iOS:
- Open
ios/YourReactProject.xcodeproj
in Xcode - Hit
Run
after selecting the desired device
- Open
- Enjoy!!!
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.