Expo is a platform and framework that allows you to write cross-platform code using React Native, taking advantage of the APIs native to each platform. It makes it extremely simple to develop and deploy apps to a variety of platforms, and it allows the apps to make use of the native components of whatever platform they are deployed to.
This post first reviews the different features of Expo and how they can be used to rapidly develop and deploy software. Then, we’ll talk through the steps you’ll need to take to get up and running with the tool.
What Is Expo?
Expo is both a platform and a framework for developing cross-platform, React-based mobile applications. Expo is built around React Native leverages native platforms to provide a set of tools and services for developers.
The Advantages of Expo
The React Native framework includes a basic set of features that are implemented in every environment and leaves implementing any additional features up to the developer. This process generally involves going through XCode and/or Android Studio and linking to additional native libraries for each feature needed in each environment needed. As a result, the project increases in complexity, and development time is extended.
Expo offers a solution. Out of the box, it includes many additional commonly used features already implemented on multiple platforms, so it can greatly simplify the development process. In this way, Expo is able to give developers access to native APIs when needed and abstract away platform-specific concerns when not.
Similarly, it also handles a number of other platform-specific concerns. It can manage assets, handle cross-platform push notifications, and publish updates to app stores. Expo allows you to do all this in a unified way, without needing to specify platform-specific details.
UIView, a <div>, an
android.view, or whatever else is appropriate for the target environment.
This allows Expo to create apps that behave like a native app in every environment, taking advantage of things like gestural commands when available. Most other cross-platform apps instead try to implement their own UI components, and then look and act non-native on every platform.
If you need to specify how something should be done on a specific platform, there are two ways to handle it. Both are pretty straightforward. If you just need some small part of a code file to change its behavior, you can import
Platform from the react-native library. Then, either check it against the
Platform.OS value or call
Platform.select to let it select an appropriate value given the current platform.
The other option is to override a whole file based on the platform using platform-specific extensions. So, instead of a
PlatformScreen.js file, you might have a
PlatformScreen.ios.js file and a
PlatformScreen.android.js, which would be substituted for the
PlatformScreen.js file when appropriate. You could even use
*.native.* to specify that iOS and Android should use one override file, but the Web platform should not.
Getting Up and Running
Expo has intentionally made it extremely easy to get up and running with React Native. You’ll want to have NodeJS installed if you don’t have it. It greatly simplifies package management – get it here.
There are four commands to enter in a terminal to get a Hello World app with Expo. It’s faster to get started than it is to read this post!
First, open a terminal or command prompt in your preferred directory.
npm install --global exp-cli
Next, install the Expo command-line tools.
npm install --global exp-cli
NodeJS will fetch the components needed to set up the Expo tools. It should be done in a few seconds.
Once that’s finished, tell Expo to set up a new project.
expo init HelloWorld
This will prompt you to indicate the kind of project you’d like to work on.
To jump in and start experimenting with what’s available, arrow down to the
tabs (TypeScript) option. This will include a tabbed implementation, some action hooks, and other already-configured goodies.
It will take a few moments to pull in more dependencies and configure the program. When it’s ready, switch to the new project directory and use
expo start to start Expo!
This will automatically launch a page with the same options as presented above, with a few more control options.
From here, you can kick off an instance of the app in a web browser, on an Android emulator, or on an iOS simulator – or any combination of all of them!
The emulator options attempt to connect to an existing, running instance, so you’ll want Android Studio or XCode to have already launched an emulator before using these options.
Expo is designed to make the process for creating and deploying cross-platform mobile apps with React Native extremely fast and flexible. As you can see from the steps outlined above, if you’ve already set up an emulator (or are content to start with just the Web platform), getting a basic Hello World implementation up and running is quick and easy.
You can start developing cross-platform apps in just a few minutes – allowing you to rapidly prototype a new idea, take advantage of the rich React ecosystem in a very user-friendly way, or even just dip your toe in this Mobile App thing everybody’s been talking about!
To learn more about starting out with and using Expo, take a look at this post!