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

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


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


Rather than bloat this answer too much, I wrote a fairly in-depth guide about this at https://dev.to/kylessg/a-sensible-approach-to-cross-platform-development-with-react-and-react-native-57pk.

To summarise though, you can get great amounts of codesharing between React and React Native but don't overreach on what you're sharing. Doing so may leave your code harder to maintain where you're trying to oversimplify valid differences between mobile and web.

For myself, this is along the lines of:

Shared:

  • Business logic
  • Communication with API
  • Polyfill possible shared functionality into an API (e.g. communication with analytics, local storage, network detection etc)
  • Stores, reducers app actions
  • HOCs

Web/Mobile specific:

  • Presentational components
  • Navigation / routing
  • Styles

Tags:

Reactjs

React Native

Recent Posts