React Native development tools: Expo, React Native CLI, CocoaPods [Tutorial]

There are a large number of React Native development tools. Expo, React Native CLI, CocoaPods being the more popular ones. As with any development tools, there is going to be a trade-off between flexibility and ease of use. I encourage you start by using Expo for your React Native development workflow unless you’re sure you’ll need access to the native code.

This article is taken from the book React Native Cookbook, Second Edition by Dan Ward. In this book, you will improve your React Native mobile development skills or transition from web development to mobile development.

In this article, we will learn about the various React Native development tools- Expo, React Native CLI, CocoaPods. We will also learn how to setup Expo and React Native CLI

Expo

This was taken from the expo.io site:

"Expo is a free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React."

Expo is becoming an ecosystem of its own, and is made up of five interconnected tools:

Expo CLI: The command-line interface for Expo. We'll be using the Expo CLI to create, build, and serve apps. A list of all the commands supported by the CLI can be found in the official documentation at the following link:

https://docs.expo.io/versions/latest/workflow/expo-cli

Expo developer tools: This is a browser-based tool that automatically runs whenever an Expo app is started from the Terminal via the expo start command. It provides active logs for your in-development app, and quick access to running the app locally and sharing the app with other developers.

Expo Client: An app for Android and iOS. This app allows you to run your React Native project within the Expo app on the device, without the need for installing it. This allows developers to hot reload on a real device, or share development code with anyone else without the need for installing it.

Expo Snack: Hosted at https://snack.expo.io, this web app allows you to work on a React Native app in the browser, with a live preview of the code you’re working on. If you've ever used CodePen or JSFiddle, Snack is the same concept applied to React Native applications.

Expo SDK: This is the SDK that houses a wonderful collection of JavaScript APIs that provide Native functionality not found in the base React Native package, including working with the device's accelerometer, camera, notifications, geolocation, and many others. This SDK comes baked in with every new project created with Expo.

These tools together make up the Expo workflow. With the Expo CLI, you can create and build new applications with Expo SDK support baked in. The XDE/CLI also provides a simple way to serve your in-development app by automatically pushing your code to Amazon S3 and generating a URL for the project. From there, the CLI generates a QR code linked to the hosted code. Open the Expo Client app on your iPhone or Android device, scan the QR code, and BOOM there’s your app, equipped with live/hot reload! And since the app is hosted on Amazon S3, you can even share the in-development app with other developers in real time.

React Native CLI

The original bootstrapping method for creating a new React Native app using the command is as follows:

react-native init

This is provided by the React Native CLI. You'll likely only be using this method of bootstrapping a new app if you're sure you'll need access to the native layer of the app.

In the React Native community, an app created with this method is said to be a pure React Native app, since all of the development and Native code files are exposed to the developer. While this provides the most freedom, it also forces the developer to maintain the native code. If you’re a JavaScript developer that’s jumped onto the React Native bandwagon because you intend on writing native applications solely with JavaScript, having to maintain the native code in a React Native project is probably the biggest disadvantage of this method.

On the other hand, you'll have access to third-party plugins when working on an app that's been bootstrapped with the following command:

 react-native init

Get direct access to the native portion of the code base. You'll also be able to sidestep a few of the limitations in Expo currently, particularly the inability to use background audio or background GPS services.

CocoaPods

Once you begin working with apps that have components that use native code, you're going to be using CocoaPods in your development as well. CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. It works nearly the same as npm, but manages open source dependencies for native iOS code instead of JavaScript code.

We won't be using CocoaPods much in this book, but React Native makes use of CocoaPods for some of its iOS integration, so having a basic understanding of the manager can be helpful. Just as the package.json file houses all of the packages for a JavaScript project managed with npm, CocoaPods uses a Podfile for listing a project's iOS dependencies. Likewise, these dependencies can be installed using the command:

 pod install

Ruby is required for CocoaPods to run. Run the command at the command line to verify Ruby is already installed:

 ruby -v

If not, it can be installed with Homebrew with the command:

 brew install ruby

Once Ruby has been installed, CocoaPods can be installed via the command:

sudo gem install cocoapods

If you encounter any issues while installing, you can read the official CocoaPods Getting Started guide at https://guides.cocoapods.org/using/getting-started.html.

Planning your app and choosing your workflow

When trying to choose which development workflow best fits your app's needs, here are a few things you should consider:

Will I need access to the native portion of the code base?

Will I need any third-party packages in my app that are not supported by Expo?

Will my app need to play audio while it is not in the foreground?

Will my app need location services while it is not in the foreground?

Will I need push notification support?

Am I comfortable working, at least nominally, in Xcode and Android Studio?

In my experience, Expo usually serves as the best starting place. It provides a lot of benefits to the development process, and gives you an escape hatch in the eject process if your app grows beyond the original requirements. I would recommend only starting development with the React Native CLI if you're sure your app needs something that cannot be provided by an Expo app, or if you're sure you will need to work on the Native code.

I also recommend browsing the Native Directory hosted at http://native.directory. This site has a very large catalog of the third-party packages available for React Native development. Each package listed on the site has an estimated stability, popularity, and links to documentation. Arguably the best feature of the Native Directory, however, is the ability to filter packages by what kind of device/development they support, including iOS, Android, Expo, and web. This will help you narrow down your package choices and better indicate which workflow should be adopted for a given app.

React Native CLI setup

We'll begin with the React Native CLI setup of our app, which will create a new pure React Native app, giving us access to all of the Native code, but also requiring that Xcode and Android Studio are installed.

First, we'll install all the dependencies needed for working with a pure React Native app, starting with the Homebrew (https://brew.sh/) package manager for macOS. As stated on the project's home page, Homebrew can be easily installed from the Terminal via the following command:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once Homebrew is installed, it can be used to install the dependencies needed for React Native development: Node.js and nodemon. If you're a JavaScript developer, you've likely already got Node.js installed. You can check it's installed via the following command:

node -v

This command will list the version of Node.js that's installed, if any. Note that you will need Node.js version 8 or higher for React Native development. If Node.js is not already installed, you can install it with Hombrew via the following command:

brew install node

We also need the nodemon package, which React Native uses behind the scenes to enable things like live reload during development. Install nodemon with Homebrew via the following command:

brew install watchman

We'll also of course need the React Native CLI for running the commands that bootstrap the React Native app. This can be installed globally with npm via the following command:

npm install -g react-native-cli

With the CLI installed, all it takes to create a new pure React Native app is the following:

react-native init name-of-project

This will create a new project in a new name-of-project directory. This project has all Native code exposed, and requires Xcode for running the iOS app and Android Studio for running the Android app. Luckily, installing Xcode for supporting iOS React Native development is a simple process. The first step is to download Xcode from the App Store and install it. The second step is to install the Xcode command-line tools. To do this, open Xcode, choose Preferences... from the Xcode menu, open the Locations panel, and install the most recent version from the Command Line Tools dropdown:

react-native-development-tools-expo-react-native-cli-cocoapods-tutorial-img-0

Unfortunately, setting up Android Studio for supporting Android React Native development is not as cut and dry, and requires some very specific steps for installing it. Since this process is particularly involved, and since there is some likelihood that the process will have changed by the time you read this chapter, I recommend referring to the official documentation for in-depth, up-to-date instructions on installing all Android development dependencies. These instructions are hosted at the following URL:

https://facebook.github.io/react-native/docs/getting-started.html#java-development-kit

Now that all dependencies have been installed, we're able to run our pure React Native project via the command line. The iOS app can be executed via the following:

react-native run-ios

And the Andriod app can be started with this:

react-native run-android

Each of these commands should start up the associated emulator for the correct platform, install our new app, and run the app within the emulator. If you have any trouble with either of these commands not behaving as expected, you might be able to find an answer in the React Native troubleshooting docs, hosted here:

https://facebook.github.io/react-native/docs/troubleshooting.html#content

Expo CLI setup

The Expo CLI can be installed using the Terminal with npm via the following command:

npm install -g expo

The Expo CLI can be used to do all the great things the Expo GUI client can do. For all the commands that can be run with the CLI, check out the docs here:

https://docs.expo.io/versions/latest/workflow/expo-cli

If you liked this post, support the author by reading the book React Native Cookbook, Second Edition for enhancing your React Native mobile development skills.

React Native 0.59 is now out with React Hooks, updated JavaScriptCore, and more!

React Native community announce March updates, post sharing the roadmap for Q4

How to create a native mobile app with React Native [Tutorial]