Untangling React Native Development

November 10, 2017 0 Comments

Untangling React Native Development

 

 

In exploring three options for React Native development, I determine that Expo is the leading option.

I had heard about React Native for some time but did not have a justifiable reason to use it until recently. If you have had the “pleasure” of doing native IOS and/or Android development, the following promise is quite appealing.

Build native mobile apps using JavaScript and React

React Native

In particular there are some particularly nice features of this development architecture:

  • You get the 1-way data binding of React
  • You can use state management libraries like Redux
  • The styling and screen layout follows web CSS and flexbox respectively

It appears to be a rapidly evolving development environment with a variety of options; thought to share my experiences trying each of the options.

  • Create React Native App
  • Expo
  • React Native CLI

Create React Native App

Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code — no Xcode or Android Studio installation required (see Caveats).

React Native

Outside of having installed Node.js on your development machine and the Expo app (available at Google Play or Apple App Store) on your mobile device (Android or IOS), installation, running apps, and modifying them takes only a few minutes using their Getting Started instructions (Quick Start tab).

Using the Expo app on your mobile device (connected to the same local network as your development machine), you can easily run the application using a QR code or typing a URL I shiver thinking about the days of having to configure your device to connect to your development machine over USB.

Because Create React Native App is a collaboration between Facebook and Expo, you can use both the React Native components and APIs and the Expo SDK APIs.

Expo

Given that Create React Native App was built in collaboration with Expo, it is not unsurprising that the installation, running apps, and modifying them is similar between them; following their Quick Start you will be up in minutes.

note: While Node.js is not necessary at first, you will need it later.

Using the Expo app on your mobile device, you can easily run the application as we did with Create React Native App using a QR code. Additionally, by publishing it to the cloud, you share it with others.

You can use both the React Native components and APIs and the Expo SDK APIs.

In addition to being able to broadly share the development application, we will later learn of additional reasons for using Expo over Create React Native App.

React Native CLI

The React Native documentation has a second method of creating React Native applications: React Native CLI. Installation is substantially more complicated that the earlier options using their Getting Started instructions (Building Projects with Native Code tab).

For example, it took me up to an hour to get operational on my Linux development machine (for Android development); having to install Node.js, React Native CLI, Java Development Kit, Android Studio, Android SDK, and Watchman on my development machine. I also had to follow lengthy documentation to connect my Android device to my development machine using a USB cable.

Unlike the other options, this with this option you can only use the React Native components (not Expo).

Production Deployment

Deploying native applications involves generating the appropriate files (.apk for Android and .ipa for IOS) to be submitted to the appropriate app store.

By, far Expo offers the easiest solution that only requires the installation of a Node.js module, specifically, exp.

One particularly interesting feature of using Expo is that the application can be later updated without submitting updated files to the app stores; this is because the production JavaScript bundle is stored and served from the cloud. They provide an excellent overview in How Expo Works.

There are two ways applications created with Create React Native App can be deployed to production: one is to convert into an Expo project and following those instructions and the other is to ejecting and using Android Studio and/or Xcode to create the .apk and .ipa files.

With React Native CLI, you have to use Android Studio and/or Xcode to create the .apk and .ipa files.

In the case of Create React Native App (ejected) and React Native CLI, you will need to run the JavaScript packager with npm start in order to continue to develop the application. At the same time, unlike Expo, the JavaScript bundle needs to be embedded into the application when generating the production .apk and .ipa files; thus this solution cannot be updated without submitting new files to the stores.

Using Native Code

As your application grows, you might find that you need to write parts of your application using native code; all three options have provisions for this situation.

With Expo, you need to detatch to ExpoKit. After you do this, you will be able to add the native code using Android Studio or Xcode and create the .apk and .ipa file respectively. You will also continue to be able to edit the React Native code. During development, however, you will continue to run the Expo software to serve up the JavaScript bundle. In production, the application will use the latest published JavaScript bundle (in the cloud).

note: While the JavaScript bundle can continue be updated without submitting new files to the store, changes to native code need to be submitted.

In the case of Create React Native App (ejected) and React Native CLI, you can edit the native code as you are already using Android Studio and Xcode for the production deployment.

Conclusion

First, all the options let me use both React Native and native code to build applications.

In most situations, I gravitate towards using the simplest (least bells and whistles) tool for the job. If I followed this approach, I would have selected React Native CLI as my development option. But, not having access to the Expo SDK API is a bit of a problem.

Create React Native App does allow you to use the Expo SDK API. It, however, requires you to submit new applications to the stores for all updates.

Expo, with all the bells and whistles, is my unexpected preferred development option for React Native. In particular, the feature to update the JavaScript bundle without submitting new applications to the stores is a real winner.


Tag cloud