10 min read
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
This was taken from the expo.io site:
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:
- 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.
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:
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.
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:
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.
Ruby is required for CocoaPods to run. Run the command at the command line to verify Ruby is already installed:
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)"
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:
- 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:
- 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:
And the Andriod app can be started with this:
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:
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:
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.