Architecture for white-label mobile apps with React Native

52 Views Asked by At

We have a mobile application that we scale as the white label, so we develop and release more and more mobile apps with similar features.

We are faced with the fact that we need more and more effort to support applications. Application functionality may differ slightly, i.e. they are not identical.

How can you “assemble” applications from modules to spend a minimum of time on support? We now have one repository, and each project has a separate branch. It becomes a nightmare to move features across branches (the functionality is 70% similar, but there are differences, so we can’t just apply new colors, logo, images and release).

Advise on what approach to development and scaling to take. We are thinking towards a mono repository.

1

There are 1 best solutions below

0
ko100v.d On

There is not a simple answer to this question. Think of how Tailwind or Nativewind works, take a look at atomic design patterns, and build a UI layer where React and React-Native are kings, only components/screens.

Separate the logic into a dedicated layer, let's call it domain (check Clean Architecture). Use dependency injection -> Let's call a piece of your logic with the term use-case.

Now imagine if you have a pure UI layer that gets injected via props with different use-cases. In that way, your UI layer can stay out of your different application's logic, and it can globally change its fonts/colors/dimensions.

On a different layer, you can build the logic this app needs (Factory pattern is particularly useful in this scenario).

It might sound confusing but it is not an easy task to build apps like a conveyor machine.