Using (more or less) same codebase for React Native and web app?

When using React Native, can you use arbitrary components (ie. the same as you use for your web app) along with standard HTML/CSS layout, so that you can have more or less the same codebase as your web app? Or can you only use the React Native components, and thus have to build an entirely new UI?

There are some frameworks trying to do a 1-for-1 web to react-native, but I’m not sure it has taken on yet. Here’s one example:

https://carbon-ui.com/
https://mobile.ant.design/

But I find most libs that went for cross platform are not being actively maintained. My personal take is you wont really save that much time. You’ll end up trying to build a website that will fit on an iphone screen. And you get a ton of re-use even with an separate RN project:

  • you can re-use 90% of your helper functions/basic javascript (moment.js, etc)
  • if youre anal about copypasta, you could package your helper functions into an npm package and just install it in your web react project and RN project
  • your react-native components will have similar lifecycle events, etc. to their analogous web ones
  • in some cases, you’re just swapping divs for <View /> tags and wrapping text in <Text />
  • your react-native app will most likely get to use the same API/server as your webapp

I know some routers (like react-router) are trying to be cross platform, but that seems like the wild west still (even by react ecosystem standards).

The biggest time save for me is using apollo-client in my webapps and then in their react-native counterparts. You can copypaste 99.9% of your query and mutation code. Then you are literally just writing some view code and routing (use react-navigation for RN).

The biggest RN pain point for me is forms. There’s just nothing that great out and I hate redux-forms.

Overall, I think you’ll waste more time trying to figure out how to keep everything in one react project than you would just building the react client and a separate react-native client.

Bottom line: dont’ trust anything I say because I’m one guy on the internet.

1 Like

Ah, I see. I’ve been trying to decide between React and Vue, and React Native was the reason I might go with React over Vue. But if I can’t use the same codebase for React Native, I think I will just stick to Cordova, and then I think I prefer Vue. My app (which currently uses Blaze) currently consists of 158 templates, and I’m a single person team, so I really don’t feel like maintaining two separate code bases.

If you got the Vue route you may want to have a look at Weex which is more or less to Vue what React Native is to React.

EDIT: I first replied to @a.com instead of you :smiley:

As @a.com already pointed put you will find yourself doubling your work anyway.

The promise ‘write once, deploy everywhere’ is actually more a ‘learn once, write everywhere’. That’s the case with React/RN and would be also with Vue/Weex.

But if you go down the Cordova route as you said then http://quasar-framework.org might make you achieve your initial goal.

1 Like

Hmm, I don’t really care about having a native look-and-feel, I was just interested in React Native because of the performance benefits. I’m happy having the same UI on all platforms. So in that case, Quasar wouldn’t provide anything more than what a component library like Element does, right?

Also, Quasar seems to want to be your main framework/build tool, how does that work with Meteor?

Quasar has also a starter kit for Meteor:

1 Like