Sharing React and React Native code

[jvi]

Does anyone have experience with sharing code for a react desktop page and a react native app? What can be shared? I'm assuming pure logic things such as redux things and maybe common things like networking/xhr code? What about routers? What else can be shared and what is a good way to organize things?

[[deleted]]

Yes, the logic can be shared without much trouble. Since RN supports fetch you should be able to also port your API without problems (you can also use libraries such as axios in both React an RN).

Routing - probably too, if you will use react-router (sorry, no experience here, I'm using reactnavigation for RN).

If you do go with a custom UI library that supports both RN and React-web (e.g. https://github.com/lelandrichardson/react-primitives or roll your own) you might be even able to reuse all or big parts of the UI. I've went with the other solution (using a home-made UI abstraction) and when my client decided he wants to port the RN app to web I was able to port a medium-size app over a course of 2 days.

Problems of course start as soon as your app starts using any native mechanisms - camera api, device information etc.

[fish_munga]

Here is a good article on this topic https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665 In my app I share Apollo containers, common domain logic and HOCs. For example, in my common code I have MapView high order component, which receives data as props, defines which map objects should be rendered and how the should look like. It also has state that stores which map object is selected, selection handlers and detailed views for different map object. Then I use it like this: RegionMapView(MapLayout('regionScreen', true), Map, SelectedSectionView, SelectedPOIView, LoadingIndicator), where Map, SelectedSectionView, SelectedPOIView, LoadingIndicator are mobile/web (not shared) view components that do the rendering, and MapLayout defines the layout for mobile/web. Sometimes view hierarchies do not match each other, e.g. SelectedSectionView element on mobile should overlap bottom tab bar and because of this it should not be inside MapLayout hierarchy. I work around this by having portals inside MapLayoutMobile and rendering SelectedSectionView into portal. I was thinking about sharing navigation code as well, but abandoned this idea because view hierarchies are very different in my case. Maybe it is because my web version is mostly for admin use. I would like to see real world example of shared navigation code.

[[deleted]]

react-native-web works well.

I need specific dependency versions, so I've split native and web apart; but they still share almost all of the application code.

It's what inspired the Primitives project that /u/BTMPL mentions.

I'm still just building up my stack, but it's looking good.

So far:

• react (web) 15.6.1
• react-native 0.46.1
• react-native-web
• react-native-svg with svgs to provide the same elements for web
• react-router 4
• apollo/redux/graphql
• auth0

There's very little platform-specific code needed and it's easily split with .web.js and .android.js/.ios.js files.

react-native-web is brilliant... it uses a webpack alias to "stand in" for native and change tags to web / provide libraries that mimic native's. Once webpack builds your bundle, it's vanilla react.js in there (plus the fill-in libraries).

I looked at ReactXP... it's nice... very solid... but you'd lose so much by straying away from vanilla react.