Reuse business logic between React and React Native

React ecosystem encourages the Learn Once Write Everywhere style. Once we know the core concepts of react, we can write both web and mobile applications with ease. Even though there are small differences like types of components etc, the core of applications remains same.

React being a library, we generally need help from some state management package to develop large applications. Redux is the more preferred one. Using redux helps us define the flow, business logic and application state.

When we were developing projects for our customers, we realised that even though the view layer of web and mobile application is different, we were writing lot of duplicate code as well.
For example, both our web and mobile applications had a login screen. Now the UI layer of this is different in react and react native. But once we get past that, we need to dispatch same action, make same service call, use same reducer and many more.
So we decided to take this business logic and put it in a separate npm package. We called this npm package Core. Both mobile and web applications can load this as a dependency or link to this package via symlink.

This helped us reduce the duplication of code. We were able to reuse almost 60% of code between React and React Native application. This also helped us in better predictability and consistent error reproduction. If something worked or failed it would happen in both web and mobile applications.

So ultimately we were able to deliver a product with faster turnaround and with less budget.

I created a working repository with sample todo app built in.
Here is the link
https://github.com/spoman007/reactXstarter

What is this Repository?

1. Demo of how the code can be reused between React and React Native Application
2. Extracts the business logic to a seperate npm package
3. Uses Redux to write application business logic: Actions and Reducers are extracted to a seperate npm package.