Software systems to innovate and grow

Native App Development with React Native

By Engineering Team July 23, 2018 10 mins read

The moment Facebook announced React Native in March 2015, web developers worldwide collectively jumped for joy. React was already gaining serious steam in the JavaScript community, and the prospect of leveraging those skills for cross-platform mobile development had many champing at the bit to get their hands on this shiny new toy.

Native App Development with React Native

The novelties didn’t stop there, though. React Native also offered something completely different from other cross-platform frameworks like PhoneGap, Ionic, et al.

Something revolutionary.

A New Mobile Paradigm

The central criticism of hybrid mobile app frameworks is their use of WebViews to mimic native apps. WebViews are mini-web browsers used by mobile devices to display apps built with web technologies (HTML, CSS, JavaScript, etc.) as if they were built in native languages (Objective-C, Swift & Java).

Before React Native, essentially all hybrid frameworks leveraged WebViews to drive their apps and leverage native APIs. This allowed web developers to tap their HTML, CSS, and JavaScript skills to build native-looking apps that could run on all major mobile operating systems.

These frameworks, while innovative, come with a couple of nontrivial costs:

Performance

Performance is the classic complaint with WebViews, since they are constantly communicating across a bridge (the framework) to the mobile device.

This makes some app components slower than they would be if they were built natively, which limits the types of apps you can build with them. Anything requiring a moderate amount of hardware resources or more runs the risk of lagging when in use.

Updates

Also, any time a new device or new version of iOS/Android comes out that breaks a WebView API in the framework, hybrid app developers have to wait for the authors to update the framework before they can update their apps, which could take weeks or longer.

Performance can be optimized to a degree with some ingenuity, but there is no way to optimize waiting for an open source team to patch breaking changes.

Enter React Native

So, performance and updating can suffer with WebView-based hybrid frameworks, that we know. What makes React Native different, then?

In a word: JavaScriptCore.

JavaScriptCore is the JavaScript engine that ships with Safari, but React Native uses it to render apps natively in both iOS and Android using React Native components as true native components in the background, as opposed to a WebView.

This is one of the big reasons React Native is the number one mobile technology JavaScript developers are keen to learn in 2018.

Native App Development with React Native

Being able to access native components directly is a huge advantage over hybrid apps and sets React Native apart as a serious contender to traditional native development.

Getting Started with React Native

So, now that we know React Native is the way to go for mobile JavaScript development, let’s take a look at getting started with a greenfield app.

Your First Big Decision

This being the wild world of JS, right off the bat, you have to make a critical decision on how to start your app.

The two most popular choices for initiating a new React Native project are:

Each one has it’s pros and cons, but your decision will ultimately depend on your project needs.

The main differentiator between the two is create-react-native-app leverages Expo, a third-party framework that takes some of the upfront pains out of getting a React Native project started.

Expo is great for beginners and relatively uncomplicated projects. If you end up having to build your own custom native components at any point, however, you will have to eject your project from Expo and continue as a standalone app, which can be pretty painful.

The CLI, on the other hand, does require more work to get started, since you have to install Xcode and Android Studio in order to begin. Once finished, though, you are all set for React Native development, and you won’t have to worry about outgrowing a limited framework down the road.

Since we want to make sure we have room to grow our app, let’s go with the CLI.

React Native CLI

Before installing the CLI itself, we should cover a few dependencies and caveats.

First, the elephant in the room. Technically, iOS development is only permitted on Macs (there are ways around this, but we won’t get into that). Since we want to cover both platforms, this post will be limited to working in OSX and MacOS.

Second, in order to use the React Native CLI, we need to install a few items:

  • Node*
  • Watchman*
  • Xcode
  • Java Development Kit (JDK)
  • Android Studio
    • The Android installation is notoriously tricky and can take some time. Just make sure you have these items installed for React Native development:
      • Google APIs, Android 23
      • Android SDK Platform 23
      • Intel x86 Atom_64 System Image
      • Google APIs Intel x86 Atom_64 System Image

*Note: We highly recommend using Homebrew to install Node and Watchman.

Once we have those dependencies installed, the CLI tool can be installed via npm or yarn from the terminal.

And then, to start a new React Native app:

At this point, you should see a directory structure like this:

Native App Development with React Native

*Note: If you use Visual Studio Code as your IDE, you may see two errors in your App.js file. These are ESLint issues in VS Code that can be ignored.

React Native Basics

As you might have guessed, there is a lot of overlap between React Native and React. In fact, conceptually, they are nearly identical. You are still building components with props, state, and JSX, but instead of web components, you build native components.

The App.js file in our new project contains the starter app, so let’s take a look at what we have there:

Imports

In case you were wondering how closely React and React Native overlap, the first import should answer that question. React Native actually imports and uses the React library in every project.

The other imports are some of the most often-used standard React Native components:

  • Platform
    • Module that detects the type of device the app is running on
    • Can be used to implement platform-specific code
  • Stylesheet
    • Module that abstracts and manages component styles
    • Nearly identical to CSS
  • Text
    • A React component that displays text
    • Supports nesting, styling, and touch handling
  • View
    • The component that displays and controls the UI
    • Designed to work with Stylesheet

The Component

The single component in App.js is App. Like React, React Native components are usually initiated with this syntax:

Notice the Props variable that is passed into the App component (mentioned above). The previous line reveals Props as an empty object that is instantiated using Flow syntax.

The syntax inside the component is mostly the same as it would be in React, with a render() function returning JSX (the HTML-like JS syntax extension used in all React and React Native projects).

The only difference are the components being used in the JSX, which are the React Native modules we imported.

The Variables

There are two variables declared in our sample app, instructions and styles. The instructions variable is being used with the Platform module to abstract the platform-specific text from our component.

It is then used as a method for the styles variable in the App component text.

Stylesheet

The styles variable contains the StyleSheet object for our component. The three objects are used to style the JSX tags.

Starting Up

To start the project and see how it looks, you have to start the Xcode iOS or Android emulator.

iOS

To see it in iOS, head back to the command line and type:

If all goes well, you should see this in the emulator:

Native App Development with React Native

*Note: See the platform-specific text displayed? Compare against our Android version when we run it.

Android

As you might have guessed, it is a little more complicated to run a React Native project in the Android emulator. In order to see your project on Android, you have to start the emulator first (see this post if you are having trouble), and then run the project.

Once you have Android up, go back to the command line and type:

Barring any gotchas, you should see this in Android emulator:

Native App Development with React Native

Third-Party Libraries

There are a ton of third-party native and JavaScript libraries for React Native, but there are a few very useful ones that should be considered for most new projects.

react-navigation

Navigation used to be pretty difficult in React Native, but react-navigation has simplified things quite a bit. It has its pros and cons, it can save a lot of time by providing a ready-made navigation menu.

react-native-elements

The main objective of react-native-elements is to provide a comprehensive UI kit for React Native. With components for nearly all of your UI needs, definitely give this one a look.

react-native-vector-icons

The react-native-vector-icons is a dependency when using react-native-elements, but it can be used solo as well. The selection of icons in this library is extensive and is well worth including.

native-base

The native-base library is an alternative to the ones listed above. It’s designed to allow you to create fully cross-platform UIs for both iOS and Android using the same code. They do offer a premium upgraded library with some nice bells and whistles, but the open source option is very useful by on its own.

Wrapping Up

At this point, you have a running React Native project ready for customization and some libraries to consider for your project.

If you are looking to get a head start on your project, there are a good number of project seeds listed on the Awesome React Native repository that add libraries like Redux, MobX, TypeScript, Meteor, and many, many others.

One final plus in the React Native column is the community, which is vibrant, active, and welcoming. Contributing to the project itself is very easy, especially for folks new to open source, and help is equally easy to find as you build your first project.

Good luck, and as always, console.log(‘happy coding!’);