An Introduction to React Native for Mobile App Development

An Introduction to React Native for Mobile App Development

By Sergio Morales, March 10, 2016      Categories: Mobile Apps , Programming Language & Frameworks      Tags: , , , ,

Keeping up to date on new tools and practices is a must for developers. Having new tools under your development belt helps keep the rust off. You don’t want to be checking Wikipedia or Github under the table when the related new hot terms come up in conversation.

An Introduction to React Native for Mobile Development

React Native for mobile development is creating quite a buzz. With its “write once, run anywhere” potential, it’s no wonder it’s gaining wide popularity.

One term that has become especially fashionable in mobile development is “React Native.” At this point the dream of “write once, run anywhere” code still feels like an experiment with mixed results at best, but React Native has achieved some impressive results so far. It’s not difficult to see why: Backed by Facebook, React has had explosive success as a web library, and was picked up by heavy hitters such as Netflix, Instagram, Imgur and Airbnb.

Popularity Rapidly Growing

React quickly shot to the top in popularity on Github – no small feat for a library released only a couple of years ago. React Native, its mobile sibling, has nothing to envy, especially since it now occupies the second position in the Github popularity list. It has enjoyed a warm welcome from both mobile and web veterans.

React is an open-source JavaScript library, which focuses on providing a view for data rendered as HTML. React Native leverages some of React’s biggest features and architecture, so a brief overview of these is in order. A basic understanding of JavaScript is assumed for this part, and the same goes for component-based architectures such as the ones employed by Ember or Angular. Component philosophy breaks down applications into smaller sections in an attempt to make them interoperable with other frameworks and facilitate easy maintenance.

React components are modeled to assume you’ll be throwing them away and re-rendering them whenever the DOM (Document Object Model) changes, even in subtle ways. This is attractive because of its simplicity: Event and data-driven approaches rely on callbacks and timing handling, which requires having to keep track of multiple secondary effects.

Simplicity – Easy to Use, Easy to Deploy

This simplicity is backed by another major feature of React, the Virtual DOM. As already mentioned, React avoids data synchronization by maintaining a minimal state and re-rendering its components constantly. But to achieve good rendering performance, React generates a virtual description of every requested DOM, diffing it with the description of a previous one and emitting changes for only those components that need updating. This ensures smoothness behind the scenes.

A simple React Hello World might look like this:

var HelloWorld = React.createClass({   
  render: function() {     
  return <div>{'Hello ' + this.props.name}</div>;   } 
});
ReactDOM.render(, mountNode);

The example demonstrates the simplistic approach to state management that it supports through “props” (component properties), as well as its in-line declaration of visual elements. For mobile devices, HTML components such as the divs seen above are replaced by generic components shared between Android and iOS for elements such as text, inputs, checkboxes and others – or platform-specific components such as tabbed views on Android.

A simple hello world component may look like this:

var Hello = React.createClass({
  getInitialState: function() {
      return {
          name: 'World'
      };
  },
  greetMe: function() {
      alert('Hello ' + this.state.name + '!');
  },
  render: function() {
      var layout =
          <React.View>
              <React.Text>
                  What's your name?
              </React.Text>
               this.setState({name: e})}
                  text = { this.state.name }
              />
              <Button
                onPress={this.greetMe.bind(this)}>
                Press Me!
              </Button>
          </React.View>;
      return layout;
  },
});

When creating a new React Native project through its setup tool, Android Studio and xCode projects are generated automatically, along with index files into which JavaScript modules are declared. React Native leverages the JavaScript engine of the mobile environment, executing JavaScript code that follows the previously mentioned convention there.

This sets it apart from “single code” solutions like HaXe, which depend on transforming that codebase into each platform’s native language before executing it. This JavaScript code runs in a distinct thread from the UI thread, avoiding blocking issues that would otherwise threaten the smoothness of UI changes and animations.

Attractive “Learn Once, Write Anywhere”

Developers call React Native a “learn once, write anywhere” framework, distancing themselves from the cross-platform “dream” that other libraries are chasing. In the frameworks’ official (and very well documented) site, Android and iOS guides stand apart. Guides for writing full React Native apps and integrating them with existing applications are readily available. Each platform has its share of exclusive features and APIs. For mobile developers, React Native should be an attractive proposition as an entry point to the web development stack. For web developers with mobile ambitions, it should no doubt be appealing as well.

After toying around with examples and doing some coding of my own, I began to see why React Native is becoming a favorite tool. Having access to native mobile UI components through a unified JavaScript framework that enables web development practices seems to work well, even if it’s still in its early stages. Let me know your experience with React Native in the comments below.

The following two tabs change content below.

Sergio Morales

Sergio Morales is an Analytics Development Specialist at GAP. Throughout his career, he's worked on a wide variety of areas such as bioinformatics, embedded computing, multimedia streaming, cloud computing and others; knowledge that he now leverages to design and implement robust and innovative solutions as a technical lead for analytics projects. He has a B.Sc. in Computer Engineering and a M.Sc. in Computer Science from the Costa Rican Institute of Technology.

1 Comment


  • […] React and other JavaScript Frameworks, see my previous blog JavaScript comparison and learn how React Native can be used for mobile applications.  In this article, I’ll explore React JavaScript library for building user […]

Leave a Comment

Your email address will not be published Required fields are marked *

Subscribe to our Newsletter