This guide encompasses best practices and recommended architecture for building robust, high-quality apps
This sample demonstrates how one can
- Setup base architecture of React Native app using Clean Architecture
- Use dependency injection for layers separation
- Make api calls using Axios plugin.
├── common
| └── helper
├── data
| ├── config
| ├── datasources
| ├── gateway
| ├── helper
| ├── models
| └── repositories
├── di (dependency injection)
├── domain
| ├── entities
| ├── repositories
| └── usecases
└── presentation
├── assests
├── components
├── contants
├── features
├── localizations
├── navigations
└── utils
- Axios : http client
- Styled-components : styled-components
- Inversify : dependency injection
There are 3 main modules to help separate the code. They are Data, Domain, and Presentaion.
-
Data contains Local Storage, APIs, Data objects (Request/Response object, DB objects), and the repository implementation.
-
Domain contains UseCases, Domain Objects/Models, and Repository Interfaces
-
Presentaion contains UI, View Objects, Widgets, etc. Can be split into separate modules itself if needed. For example, we could have a module called Device handling things like camera, location, etc.
- Using modular architecture to architect the app per feature to be easier and more readable and isolate the feature from each other
- Bridge between Data layer and Domain layer
- Connects to data sources and returns mapped data
- Data sources include DB and Api
- Responsible for connecting to repository to retrieve necessary data. returns a Stream that will emit each update.
- This is where the business logic takes place.
- Returns data downstream.
- Single use.
- Lives in Domain (No Platform dependencies. Very testable).
- Organizes data and holds View state.
- Talks to use cases.
- View,updates UI