DEV Community

Cover image for React Native - Clean Architecture
Celiz Matias
Celiz Matias

Posted on

11 3

React Native - Clean Architecture

Hi everyone the last time that I worked in a startup with React Native I found a lot of problems with the scalability and encapsulation of different modules and layers.

The problem

React Native is a framework that you can use to development hybrid mobile applications, so as we know we need a API maybe.. and if this is your case and you have the experience working with this framework. I'm sure that you found problems like this:

crash style

This is a nightmare in big applications because is really difficult to debug, the only way is find in all the code where is the object property that is (undefined | null | any not compatible with the component or styles).

Or in this other case:

crash text

The problem here maybe was a render without the correct data, or some change in the API contract.

 The proposed solution

I study how apply something like Clean Architecture to a react native project and started to build a boilerplate to share with the community.

But this apply to different cases.

  1. If you have a stable backend | api maybe you wanna keep the frontend more easier or lightweight I use something like that:

basic architecture

  1. If you wanna get a stable application, with hard safety layers, testeable and easy to scale but a bigger cost in time.

Clean architecture

data-flow

https://github.com/G33N/rn-clean-architecture

  1. For a really big application I recommended separate the app in independiente modules or small applications, like chat, feed, stories... This is more efficient in bigger teams +2 squads or +10 developers. This help to the organization to give more autonomy and as plus more velocity.

Something like that: https://github.com/G33N/rn-mma-app repo in progress Sorry!

Main resources:
https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html

Thanks for reading! all comments all welcome and help me to build betters things to share with you, so pls leave me your comment!

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more