Skip to content

Sample Pixabay API with React Native. 🍭 Clean Architecture - 🌸 Reactive Programming (Rxjs) - 🤟SOLID - 🔆 Inversify (DI)

Notifications You must be signed in to change notification settings

LamNguyen17/rn_clean_architecture

Repository files navigation

🚀 Project using Clean Architecture recommend by Google Developer

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

Medium

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

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

About

Sample Pixabay API with React Native. 🍭 Clean Architecture - 🌸 Reactive Programming (Rxjs) - 🤟SOLID - 🔆 Inversify (DI)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published