React Native vs React

Recently I came across a sentence: 

“React Native is React, but React isn’t React Native.” 

It reminds me of:

“Every square is a rectangle, but not every rectangle is a square.” 

This is the most meaningful short comparison of these technologies.

Most importantly, React Native is targeting mobile devices and React applications are present within web browsers. Both technologies are being used to create frontends of applications, but there are key similarities and differences which I’m going to describe.

Similarities:

Writing the actual code is pretty similar, both platforms benefit from tools such as ESLint, package.json, debuggers etc. React native by default uses a metro bundler which is similar to React’s Webpack, however more complex solutions might be challenging to share.

• Both React Native and React use the same programming language, which is Javascript. This is great because developers are able to migrate freely from one environment to another. Sharing programming language is a huge benefit, the community is actively helping each other and solving programming problems might affect both Frameworks positively.

• State management in frontend applications is one of the most crucial points to address. Fortunately, both Frameworks use solutions such as React Context and popular libraries

  Mobx State Tree or Redux. Don’t underestimate the fact that in more complex systems developers will come upon framework specific implementation involving persistence of the data, for example, mobile applications often target offline usage.

• Both technologies are able to provide applications runnable on mobile devices. Within the web browser for React and Natively for React Native. Recently Progressive Web Applications are more and more popular. These kinds of applications are developed in React and are able to be installed on the home screen. This isn't a flawless approach but certainly extends web application capabilities.

Differences:

I highly advise being patient and planning everything ahead when it comes to mobile applications.

• The biggest difference that comes with each ecosystem is distribution and every process around it. Web application distribution is straightforward, bundled JS code is being pushed to web browsers. Mobile application distribution involves much more complexity. First and foremost each mobile application is being reviewed by automated systems that look for any incompatibility with the store's requirements, and then the application is manually tested by humans. This process often takes a few days and must be addressed at the planning functionalities phase. The store’s rules are strict and adjusting application functionalities just to comply with store policy is going to affect the product negatively.

• Web applications are meant to be clicked, while mobile applications are often operated with gestures. This is a great challenge because while aiming for the best user experience the whole UI system should be different.

• Even though web applications are using hardware permissions for microphone or camera usage, mobile applications are much more complex in this area. These kinds of permissions are needed to be addressed in the product planning phase and prepared within developer agreements compliance. For example, applications targeting kids can’t process users’ data which is associated with restrictions on using notifications systems and many libraries.

I have been working with applications using both technologies and generally speaking React Native applications require more work, but especially much better product planning. As I have mentioned before, developers are able to migrate between both frameworks, but lead developers should be experts in selected technology to be able to advise and choose the best solution.