# React Native

## Summary


Traditionally, *native mobile apps* have been developed in specific languages that call platform-specific APIs. For example, Objective-C and Swift for iOS app development; Java and Kotlin for Android app development. This means that developers who wish to release their app on multiple platforms will have to implement it in different languages.

To avoid this duplication, *hybrid apps* came along. The app was implemented using web technologies but instead of running it inside a web browser, it was wrapped and distributed as an app. But it had performance limitations.

React Native enables web developers write code once, deploy on any mobile platform and also use the platform's native API. **React Native** is a platform to build native mobile apps using JavaScript and React.

## Discussion

### As a developer, why should I adopt React Native?

Since React Native allows developers maintain a single codebase even when targeting multiple mobile platforms, development work is considerably reduced. Code can be reused across platforms. If you're a web developer new to mobile app development, there's no need to learn a new language. You can reuse your current web programming skills and apply them to the mobile app world. Your knowledge of HTML, CSS and JS will be useful, although you'll be applying them in a different form in React Native. 

React Native uses ReactJS, which is a JS library invented and later open sourced by Facebook. ReactJS itself has been gaining adoption because it's easy to learn for a JS programmer. It's performant due to the use of *virtual DOM*. The recommended syntax is ES6 and JSX. ES6 brings simplicity and readability to JS code. JSX is a combination of XML and JS to build reusable component-based UI. 


### How is React Native different from ReactJS?

React Native is a framework whereas ReactJS is a library. In ReactJS projects, we typically use a bundler such as *Webpack* to bundle necessary JS files for use in a browser. In React Native, we need only a single command to start a new project. All basic modules required for the project will be installed. We also need to install Android Studio for Android development and Xcode for iOS development. 

In ReactJS, we are allowed to use HTML tags. In React Native, we create UI components using React Native components that are specified using JSX syntax. These components are mapped to native UI components. Thus, we can't reuse any ReactJS libraries that render HTML, SVG or Canvas. 

In ReactJS, styling is done using CSS, like in any web app. In React Native, styling is done using JS objects. For component layout, React Native's *Flexbox* can be used. CSS animations are also replaced with the *Animated* API. 


### How does React Native work under the hood?

Between native and JavaScript worlds is a bridge (implemented in C++) through which data flows. Native code can call JS code and vice versa. To pass data between the two, data is serialized. 

For example, a UI event is captured as a native event but the processing for this is done in JavaScript. The result is serialized and sent over the bridge to the native world. The native world deserializes the response, does any necessary processing and updates the UI. 


### What are some useful developer features of React Native?

React Native offers the following:

    + **Hot Reloading**: Small changes to your app will be immediately visible during development. If business logic is changed, Live Reload can be used instead.
    + **Debugging**: Chrome Dev Tools can be used for debugging your app. In fact, your debugging skills from the web world can be applied here.
    + **Publishing**: Publishing your app is easy using CodePush, now part of Visual Studio App Center.
    + **Device Access**: React Native gets access to camera, sensors, contacts, geolocation, etc.
    + **Declarative**: UI components are written in a declarative manner. Component-based architecture also means that one developer need not worry about breaking another's work.
    + **Animations**: For performance, these are serialized and sent to the native driver. They run independent of the JS event loop.
    + **Native Code**: Native code and React Native code can coexist. This is important because React Native APIs may not support all native functionality.

### How does React Native compare against platforms in terms of performance?

Since React Native is regularly being improved with each release, we can except better performance than what we state below.

A comparison of React Native against iOS native programming using Swift showed comparable performance of CPU usage for list views. When resizing maps, Swift was better by 10% but React Native uses far less memory here. For GPU usage, Swift outperforms marginally except for list views. 

React Native apps can leak memory. Therefore, `FlatList`, `SectionList`, or `VirtualizedList` could be used rather than `ListView`. The communication between native and JS runtimes over the bridge is via message queues. This is also a performance bottleneck. For better performance, ReactNavigation is recommended over Navigator component. 

When comparing against Ionic platform, React Native outperforms Ionic across metrics such as CPU usage, memory usage, power consumption and list scrolling. 


### Are there real-world examples of who's using React Native?

Facebook and Instagram use React Native. Other companies or products using it include Bloomberg, Pinterest, Skype, Tesla, Uber, Walmart, Wix, Discord, Gyroscope, SoundCloud Pulse, Tencent QQ, Vogue, and many more. 

Walmart moved to React Native because it was hard to find skilled developers for native development. They used an incremental approach by migrating parts of their code to React Native. They were able to reuse 95% of their code between iOS and Android. They could reuse business logic with their web apps as well. They could deliver quick updates from their server rather than an app store. 

Bloomberg developed their app in half the time using React Native. They were also able to push updates, do A/B testing and iterate quickly. 

Airbnb engineers write code for the web, iOS and Android. With React Native, they stated, 

> It's now feasible for us to have the same engineer skilled in JavaScript and React write the feature for all three platforms.

However, in June 2018, Airbnb decided to move away from React Native and back to native development due to technical and organizational challenges. 


### What backend should I use for my React Native app?

React Native provides UI components. However, the React Native ecosystem is vast. There are frameworks/libraries for AR/VR, various editors and IDEs that support React Native, local databases (client-side storage), performance monitoring tools, CI/CD tools, authentication libraries, deep linking libraries, UI frameworks, and more. 

Specifically for backends, **Mobile Backend as a Service (MBaaS)** is now available. Some options include RN Firebase, Baqend, RN Back, Feather and Graph Cool. These services make it easy for developers to build their React Native apps. 

The more traditional approach is to build and manage your own backend. Some developers choose Node.js or Express.js because these are based on JavaScript that they're already using to build React Native UI. This can be paired with a database such as Firebase, MySQL, or MongoDB. Another option is to use Django with GraphQL. Even WordPress can be used, especially if the app is content driven. These are merely some examples. Developers can use any backend that suits their expertise and app requirements.


### Could you point me to some useful React Native developer resources?

Here are some useful resources:

    + Expo is a free and open source toolchain for your React Native projects. Expo also has a collection of apps developed and shared by others. The easiest way to create a new app is to use the create-react-native-app codebase.
    + If you wish learn by studying app code written by others, React Active News maintains a curated list of open source React Native apps.
    + React.parts is a place to find reusable components for React Native.
    + Visual Studio App Center is a useful tool to build and release your app.
    + Use React Navigation for routing and navigation in React Native apps.
    + React Native provides only the UI but here's a great selection of tools to complement React Native.


## Milestones

2011

At Facebook, Jordan Walke and his team release ReactJS, a JavaScript library that brings a new way of rendering pages with more responsive user interactions. A web page can be built from a hierarchy of UI components. 

2013

React Native starts as an internal hackathon project within Facebook. Meanwhile, ReactJS is open sourced. 

Mar  
2015

Facebook open sources React Native for iOS on GitHub. The release for Android comes in September. 

2016

Microsoft and Samsung commit to adopt React Native for Windows and Tizen. 

2017

React Native sees a number of improvements over the year: better navigation, smoother list rendering, more performant animations, and more.