Clean Architecture in React Native

Hi,

I recently started using react-native to develop cross-platform mobile applications and as I finished learning the basics like JSX, components, states, and props I wanted to dive into the bigger picture.

By bigger picture, I mean how do we handle the architecture, dependency injection, and testing in any project because if you want to write testable and maintainable code, you need to focus on these things.

In Native Android Development, I use Clean+MVVM architecture, Dagger2(also Dagger-Android in some projects) for DI although I want to shift everything to Hilt now, and I use JUnit4/5, Mockito, and Espresso for testing.

So, the bigger picture in native development is somewhat clear but when it came to using these techniques in the react-native project which is totally a different ballgame as it uses JS which is more of a functional language as compared to Java/Kotlin which are more inclined towards the object-oriented paradigm but somehow I was able to solve the testing and architecture part and would be working on dependency injection part(if it can be implemented properly without breaking any of the fundamental design patterns)

This blog will be on Architecture part and I will try to write another blog for the testing part.

So, I have tried to implement the Clean architecture here which is very famous and widely used in almost all kinds of development and if you want to use Clean in your react-native project, this blog can definitely help you get started with it.

If you have used Clean in any of your projects, you must be knowing that in Clean, we like to have a layered structure to keep things decoupled from each other. In our setup, we will have the following layers,

Flow: Every component we will have a presenter and the presenter will have the instance of a relevant use-case(from domain layer) which in turn will have the instance of repository and repository will have our network/DB/cache calls to provide the data to upper layers(Component →Presenter → UseCase →Repository)

NOTE: One of the most basic principles of Clean Architecture is to have clean architectural boundaries between the layers and communication between these layers should be done via interfaces and not via concrete implementations so that the implementations of these interfaces can be changed and that should not affect the other layers.

Enough talks, let us see some code, and since I am a complete newbie to all this, I might have made some mistakes and it would be great if you could point those out in the comment section.

This is the folder structure for clean architecture in react-native, data layer has the Book entity, and the implementation of the BookRepository, domain layer has the use-case and repository interface(I have used typescript to achieve interface functionality) and presentation layer has the component and its presenter. Simple, isn’t it? It is.

Now, let us look at these files to get a better idea of the flow.

Book entity is a simple data class so nothing there,

Next up is our BookRespository and its implementation,

Have a look at the BookUseCase from domain layer,

Let us see the presentation layer files and that should complete the flow,

Well, we just implemented the clean architecture in the react-native project and I know this is a very very basic setup and a lot of things are to be done but at least now we know where to put what.

Also, testing this setup would be easier as we can simply mock our dependencies and test the basic behaviors of our components, I will write another blog for testing in react-native using Jest(for unit testing), react-native-testing-library(for component testing), and Detox(for end to end testing) in details.

That is it for now. Thanks!

Related posts:

I find my self inclined to compare these two formulas because they can become the same in one single case which I will explain below. The first thing I would like to clear out is that the Expected…

Based in New York City with the private equity firm New 2ND Capital, George Mabry holds an MBA from the Kenan-Flagler Business School of the University of North Carolina (UNC). While in North…

No one can argue that 2020 has been a year we didn’t see coming. Living through a pandemic is impacting nearly every area of life and work is no exception. Many of the talent predictions we thought…