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.
Since it is a React framework, it operates entirely in Javascript, which allows developers to continue to use their current experience and favored tools with it. Using Expo, developers can quickly create, deploy, and iterate Android, iOS, and web apps from a common code base.
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.
Another important aspect of Expo projects is that they are written entirely in Javascript. This allows the developer to lean on the vast Javascript ecosystem, taking advantage of everything from NodeJS to React Native Paper to Teaset. Another handy detail: it supports using TypeScript instead of Javascript out of the box.
Programs written with Expo can be updated Over The Air (OTA), without involving app stores at all. This feature is limited to Javascript and asset changes, which can be fetched from the Expo servers at run-time. SDK updates, certain platform-specific changes, and other low-level updates are the only aspects that need to be deployed via traditional channels. This allows you to skip the slow process of updating each app store, which means that Expo enables very rapid prototyping and testing.
As mentioned earlier, Expo translates components originally defined in Javascript into whatever components are native to the platform you’re using. For instance, the <div> tag from React Native is used to define a container for other objects. When deployed, this may become a 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.
Wrapping Up
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!
