[001.1] Why React Native

A brief introduction to react native and why it is different from hybrid apps.

Subscribe now

Why React Native [11.17.2016]

React Native lets you build mobile apps for Android and iOS apps using Javascript. A lot of people are talking about React these days. Also, there's a lot of discussion about React Native. Here are some things I've heard people saying:

  • Hybrid apps don't work
  • React Native works only because it was made by Facebook
  • There are no real apps in production; Facebook app is an outlier

As we can see, there's a lot of discussions about it, and it's easy to feel lost. This isn't surprising, because when people say hybrid app, they mean different things.

Here are three distinct types of mobile applications:

  1. Native. You write code using the native language for the platform -- Java for Android and Swift or Objective-C for iOS.
  2. Hybrid based on WebViews. These are apps where you might use HTML/CSS/JS and have them ultimately run in a WebView via Cordova, for example.
  3. Hybrid converting JS → Native Components. This is what React Native does.

With React Native, you can write JavaScript and it will generate native Android and iOS apps for you. No need to use Java/Objective-C/Swift.

React Native is not based on Cordova. It uses a Javascript runtime, the UI is not HTML, and it doesn't use a WebView. You can use Cordova and add React inside, but this is not React Native.

React Native invokes Objective-C/Swift and Java to render iOS and Android components. This is a huge difference from other hybrid apps, which often end up only rendering web-based views. Everything is possible because React Native has a bridge between the React Native code and the iOS/Android part. Talking about that bridge, another important aspect is that we can use some native libraries, just writing a bit of code to provide an interface to it from React Native. If you search on github, you will see that there are a lot of libraries like this. Basically, you don't need to write native code, but if you want to, you can. You are using the best of the two worlds: the native and the hybrid.

Summary

We are not saying Write once, run anywhere. In React Native you can share your code, it's up to you. You may want to be platform specific; with this you can take advantages and improve the user experience, for example, if you are using an iPhone 6+ (with a bigger screen). There are also some generic components, those you write once and they generate specific components for each platform. For example, the RefreshControl for iOS and Android.

If you are familiar with React, you know React has a Virtual DOM: a lightweight representation of DOM elements. React Native also has the same rules as React. The difference here is we have an element like <View> becoming an iOS/Android specific element and not a <div>. We are not abandoning all of the web development knowledge you have, either. For instance, you can use CSS Flexbox to lay out your views. React Native aims to keep some of the best parts about web development.

It makes high quality apps written in JS possible.

Resources