10

Just happened to see React-Native-Web(RNW) , my thought was what? Why do we need another React for Web version? We have already had ReactJS(RJS).

So I went to its website and saw the document saying it allows you to use Native component by using React DOM, high quality etc.

I am still not quite clear about the differences and benefits of using RNW.

Could someone enlighten me with some concrete examples and performance data etc. please?

I know Twitter and a few other apps are using it, but by just telling me "Twitter is using it" is good enough but not clear enough to state the differences.

Thanks

Franva
  • 5,410
  • 16
  • 62
  • 122

3 Answers3

10

To be honest the reasoning for using react-native-web are somewhat aesthetic, take this for example:

React Native is a pure UI language. It defines some base components that define UI primitives, and those are thought to be independent of the platform that runs them. All the components we can create in React Native is based on primitives like View, Text, or Image, which are basic elements that make sense to any visual interface, no matter where it is run.

On the other hand, React’s primitives are just DOM nodes — HTML tags like div, p, or a, which are not pure UI. They weren’t created to define a visual language; rather, they’re meant to structure and make sense of the hypertext. React’s primitives have meaning beyond the interface, and that meaning doesn’t make much sense outside of browsers.

which is taken from here. I developed both ReactJs and RN applications and websites and the only true benefit that I can see is the unified coding language. Since I started with RN and then added ReactJS to my resume, I found it a pain in the butt to find the equivalent of RN components in ReactJs, oh I should use p and span instead of Text?, oh shoot it is 'input type="text"' not 'TextInput' etc etc. I think you get my point. Probably it is same for React developers who came into RN world. But it comes with its cons too and unfortunately using react-native-web need some hassles and you have to PREPARE your project for it.

thanks for your explanation. Could you please be more specific and provide more details or examples for the "some hassles"? thanks!

For example React-Native (and some its libraries) are based upon Promise framework which is not normal JS, or Object.assign is added ES6, in order to use them you have to modify webpack.config.js and .bael-rc files add multiple lines inside those files. If you are using other helper tools like Flow or Jest or etc they had to be configured too. It sure slows you down at start but if you dedicate the time to set things up it pays of in long run.

Community
  • 1
  • 1
DNA.h
  • 643
  • 7
  • 16
  • thanks for your explanation. Could you please be more specific and provide more details or examples for the "some hassles"? thanks! – Franva Jun 12 '19 at 15:03
  • apologize for missing this answer. Well explained. Thanks~! – Franva Dec 20 '19 at 23:32
  • When you add react native web to your project will you actually be adding more code? Or will it just be configuring? If I understand correctly 85% it react native is shared code for Android iOS and web, I don't quite understand how this is possible given that the page on a computer usually just looks different than a phone app or is it perhaps only useful for mobile browsers? If so, would you still use react native mobile and just use for example 'TextInput' and not 'input type="text"' but have different components for web? So at the end you have one set of components for web and 1 for mobile? – Chagai Friedlander Jun 17 '20 at 06:18
  • @ChagaiFriedlander You will need to add more code and a lot of changes! – Amir Fo Jun 17 '20 at 08:28
  • @AmirFo would you do it in a separate project? Separate file? In the same file? What changes? Could you point me to good examples? – Chagai Friedlander Jun 17 '20 at 11:01
  • 1
    @ChagaiFriedlander I posted an answer to this question, You can read it. – Amir Fo Jun 17 '20 at 12:44
2

If you need to port a react-native app to the web use RNW. If you need to create a web-app only, use react with a ui library like e.g. material-ui (my favorite ui library).

axlider
  • 29
  • 1
  • Some components of react-native are not available in react-native-web to port them to the web, This causes a big problem! You will need a lot of changes to do this kind of job. – Amir Fo Jun 17 '20 at 08:26
2

The problem

Some components like react-navigation, pickler, contacts accessor components and etc. are not fully supported by react-native-web and you will get module/component not resolved error when building the web output! To handle this problem the best approach is to divide code (components) into 4 parts (folders):

   project-folder/
       android/
       ios/
       web/
       common/

You will write components that are supported by all of the platforms in the common folder and some components that are platform-specific in their own folders.

As a developer, you will use a lot of conditions and codes in rendering as my opinion and the code base will be big enough to be confusing!

The other problem will be the responsiveness of web app, Many years ago, We were trying to make desktop made websites to be rendered responsively in mobile screens. These days we are trying to make mobile websites to be responsive in desktop screens and not having a lot of space-between in desktop screens!

Other approches

  1. You can use react-native for developing apps for ios and android only and use HTML, JS, or reactjs for developing websites.

  2. You can develop PWA websites that are installable by browsers for android and ios and can store data for offline usages.

Amir Fo
  • 3,044
  • 1
  • 25
  • 36