Can we share code between react webapp and react native app and is react-native production ready

Question

We have a stable version of a widget developed with reactjs. We would like to develop mobile version of the same. Is it better to develop with react native and share the code ac

Answer 1

You can certainly share the storage and the network layer b/w the web and mobile react code base.
Although, in practice you would be only able to share a part of the storage layer, because you might want to fetch data differently in case of a mobile app and a web app.

Answer 2

As of today the philosophy still remains as learn once write everywhere. As stated very correctly in other posts, both react and react-native being JavaScript based, with an architectural design approach you can share your business logic.

On the other hand, because of the nature of the hardwares, it is completely normal to have different presentation layers for web (mostly on your desktop/laptop browsers) and mobile (native).

The question asks for a tool that can speed up the development process. For this purpose this github repo named react-spa-jwt-authentication-boilerplate (*) can be used as an example. It shares the "business logic" between web and native versions via a folder named common-logic by keeping exact copies of *.js files. On the other hand navigation and presentation layer differs. It implements a sample authentication process which itself can also be used as a baseline for new projects.

(*) Disclimer: I am the implementer of the repo. We needed to implement the repo for the exact same need of reducing development time between mobile and web applications.

Answer 3

It can be shared among mobile app and web app. You'll certainly have to write your components again for mobile app. But you can always reuse the business logic.

If you have used React in your web application, then the work becomes even easier. One of the major hazards in React native is State Management. Now the complexity depends upon your application. Usually it is advisable to use Redux along with React Native.

The real question arises is how much code you will be able to share. Hope this helped.

Answer 4

Instagram, Tesla, AirBnB, Discord, Bloomberg all have production apps written in React Native. I'll let you decide for yourself whether it's production-ready in your opinion.

While React Native enables you a significant code reuse between iOS and Android (we are currently building an app for client which - appart from external libraries - reuses over 99% code between iOS and Android), it is not designed to share code with React webapps.

The Facebook's philosophy with React Native, instead of write once, run anywhere is rather learn once, write anywhere.

You can definitely use your designs and architecture, but you would need to rewrite most of the code. It might still be more efficient than developing two separate Java and Obj-C/Swift apps, though.

Update: In 2018 Airbnb decided to sunset React Native in their production apps. They wrote an insightful article about their experience and reasoning. It is very relevant for anyone thinking about using React Native. https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c

Answer 5

Nowadays there is a tool called react-native-web which lets you share code between web and mobile.

Read more: https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

Repo: https://github.com/necolas/react-native-web

Answer 6

You could check out ReactXP (https://microsoft.github.io/reactxp/) which uses reactjs and react native to build cross platform apps.