🚀 Project using Clean Architecture recommend by Google Developer

This guide encompasses best practices and recommended architecture for building robust, high-quality apps

• Guide to app architecture (Gooogle Developers)

Medium

• Read Medium about my article

Introduction

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

Dependencies

• Axios : http client
• Styled-components : styled-components
• Inversify : dependency injection

Module Structure

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.

Package structure

• Using modular architecture to architect the app per feature to be easier and more readable and isolate the feature from each other

Repository

• Bridge between Data layer and Domain layer
• Connects to data sources and returns mapped data
• Data sources include DB and Api

UseCase

• 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).

Presentation (Holder)

• Organizes data and holds View state.
• Talks to use cases.

Presentation (View)

• View,updates UI