Why React Native: Part Six

If you’re unfamiliar with React Native but you’re familiar with React, you may guess that it’s a way to use web based React inside of a mobile app wrapper. This, however, is not the case. React-Native is not React, but they do share many concepts. Understanding the differences is critical.

React Native is based on the ES6 version of JavaScript. This particular version fixed some of the biggest frustrations developers had with JavaScript in the past. In short, it makes it feel more like a standard object-oriented language with updated scoping rules and class notations. Through babel you can use ES6 with React web as well, but with React Native there is no legacy code to worry about, it’s all ES6.

The component model of React stays intact with React Native, but the css layout used on the web is replaced with a version of non-cascading FlexBox (a css library for the web). Each component is styled locally, and extra effort is needed if you want to apply global styles. This is certainly still possible, but the navigation paradigms on mobile make cascading styles less important and often more cumbersome.

Speaking of navigation, that’s another big difference between web based React and React Native. Mobile apps are not a single page with changing views and interfaces, but rather a series of screens that need to flow from one screen to the next in a way that the user expects from their mobile apps. Mobile navigation is not new to React, so it’s understandable that several solutions came about during the early days of the framework. That said, the two most popular methods today both have their pros and cons.

The first is called React Navigation. This is the officially supported library and it works by simulating all of the native components (tab bars, navigation bars, etc.) while using other React components. The second is React Native Navigation which is a wrapper around the native navigation components on each platform. Depending on your needs, either can be used. However, React Navigation matches the native styling so closely you may never notice it’s not actually native. In addition, it gives you a bit more control on how your navigation components render since you can change anything you need to on the JavaScript side of the bridge (which we’ll talk about in a later post).

The last major difference is how the global space works. In React you have access to the DOM which is used as your global space and main point of reference for the browser you’re using. In React Native there is no browser, so there is no DOM. Instead, you have a global name space like you would in most other languages. This simplifies things because you do not need to understand the DOM. Of course, it can also be confusing for those used to working with the DOM or those who are new to JavaScript in general.

In the next article we’ll take a look at how React Native really works and why it’s different from hybrid solutions that came before it.