What is the Expo framework and should you use it for React Native development?

Starting with React Native version 0.75, it’s recommended to use frameworks such as Expo to develop React Native applications.

If you’ve been developing React Native apps for a while, you may be asking yourself what exactly Expo is, what advantages it brings to table, and how you can get started using it. That’s exactly what we’re going to cover in this article.

So let’s dive right in!

What is Expo for React Native?

Expo is an open-source platform designed to streamline and simplify the development of React Native applications. It provides a development environment where you can quickly build and test React Native apps using a unified set of tools and APIs. Expo includes libraries and services that handle many of the most common tasks in mobile development (e.g., accessing the device camera, location services, and notifications) without needing to write native code.

Three of the most valuable tools included in the Expo framework are:

• Expo Go App: A mobile app that lets you preview and test your app instantly on your device without a full build process.
• Expo SDK: A collection of pre-built APIs for common functionality like push notifications, camera access, and location services.
• Expo CLI: A command-line tool for managing your app’s lifecycle from creation to build and publishing.

Why should you use Expo for your React Native app?

Expo is a great choice if you want to quickly prototype apps without having to first spend time setting up a complex development environment. You can also access its pre-built APIs and use its managed services like push notifications, authentication, and analytics without having to dive into native code. This makes it even easier to build cross-platform apps that work seamlessly on both iOS and Android.

That said, if your project requires custom native modules or advanced configuration, Expo might not be flexible enough, and you might eventually need to work with the React Native CLI.

Expo CLI vs. React Native CLI

Expo comes with its own command line interface for starting and managing React Native projects. Compared to the React Native CLI, it caters to different development needs.

The Expo CLI focuses on simplicity, offering a fully managed environment where you don’t need to worry about native configurations or dependencies. It is ideal for quick development, prototyping, and when you don’t need custom native modules.

On the other hand, the React Native CLI gives you full control over your React Native app and lets you customize every aspect of the development process, including adding native code for iOS and Android. This is essential for projects that require specific native features or extensive customizations.

Therefore, Expo and its CLI are the way to go if you want a quick, hassle-free setup and would like to use the APIs and features Expo provides. However, if you need full control over your app’s native functionality, want to integrate custom native modules, or need advanced native features that aren’t supported by Expo’s managed workflow, go with the React Native CLI instead.

How to build a React Native Expo app

Expo provides a range of options for developing React Native apps, catering to different levels of expertise and project requirements.

One of the simplest and fastest ways to get started is through Expo Go. By running npx expo or npx expo start, developers can quickly launch their app, scan a QR code with their mobile device, or open it in a simulator or emulator. This option comes with live reloading and debugging tools and utilizes the Expo Go client app, which is bundled with various Expo SDKs.

For those seeking a bit more customization, Expo Pre-built offers a similar experience to Expo Go but allows for the addition of custom native code and modules while still using the Expo client app.

Developers who prefer complete control over their projects can opt for local development with native tools. This approach involves using Xcode for iOS or Android Studio for Android, granting full access to native code and capabilities. Although this method requires more setup, it provides greater flexibility.

Another significant feature is Expo Application Services (EAS), a cloud service designed to simplify the process of building app binaries. This is a paid service and not mandatory for using Expo.

Additionally, developers can also engage in web development, testing their React Native apps directly in a web browser.

In this article, we’ll cover the approach for creating a development build for testing on physical devices. The only prerequisites are Node.js and a machine running either macOS, Windows (PowerShell and WSL 2), or Linux.

Installing Expo in React Native

Previously, you had to install the Expo CLI globally on your machine to use it with your React Native project. However, this approach is outdated – instead, use npx to invoke commands.

Alternatively, you can use Expo without installing it by using npx. That’s what we’ll do in this article as well.

Setting up your development environment

If this is your first time developing a React Native app with Expo, you need to configure your development environment accordingly. Since this process is bound to change in the future, please refer to the Expo documentation for up-to-date instructions.

Creating an Expo project

Once everything is ready, you can create a new Expo project using the following command:

npx create-expo-app@latest

This will initialize a new project directory with all the necessary files.

The command also generates some screens to ensure the app isn’t empty. If you prefer a clean project with any boilerplate code, you can run:

npm run reset-project

Generating the native projects

Before we can create the native Android and iOS projects, we need to install the expo-dev-client. To do that, run:

npx expo install expo-dev-client

Afterwards, generate the native projects using this command:

npx expo prebuild

How to publish your React Native Expo app

Once your app is ready, you can publish it directly to the App Store and Google Play without worrying about native build tools like Xcode or Android Studio by using the Expo Application Services (EAS). Depending on your needs, you might have to opt for a paid plan, though, so there’s always the option of publishing the app to the stores manually like a native app.

Alternatively, you can publish your app in the same way your would publish a regular React Native app by handling the platforms natively.

Generating an APK with Expo

To build an APK (Android package), you need to run the following command:

eas build --platform android

This will trigger Expo’s EAS (Expo Application Services) build system, which handles the process on its servers. After the build is complete, you’ll get a link to download the APK file.

Generating an IPA with Expo

For iOS, generating an IPA (iOS App package) is similarly easy with the command:

eas build --platform ios

Note that to build an iOS app, you’ll need an Apple Developer account and set up your app on Apple’s App Store Connect. Expo manages much of this process for you, including signing the app and handling certificates.

How to integrate an SDK into your React Native app using Expo

When integrating the Scanbot SDK into your React Native app, you can configure your project our Expo plugin. Just add the following code to your app config file:

"plugins": [
  [
    "react-native-scanbot-barcode-scanner-sdk",
    {
      "iOSCameraUsageDescription": "Barcode Camera permissions",
      "androidCameraPermission": true,
      "androidCameraFeature": true,
      "mavenURLs": true
    }
  ]
],

• iOSCameraUsageDescription: Adds NSCameraUsageDescription in Info.plist. The permission can also be added via Expo Permissions
• androidCameraPermission: Adds android.permission.CAMERA permission in AndroidManifest.xml. The permission can also be added via Expo Permissions
• androidCameraFeature: Adds android.hardware.camera feature in AndroidManifest.xml
• mavenURLs: Adds Scanbot Barcode Scanner SDK Maven urls for Android local development. These URLs are already included in our package’s build.gradle, but need to be added due to how Expo starts the Android app.

For the entire integration process, please refer to our Expo tutorial.

Conclusion

Expo for React Native offers a powerful and streamlined way to develop mobile applications quickly and efficiently. Whether you’re prototyping, building cross-platform apps, or looking for an easier development workflow, Expo provides a range of tools and services to simplify your process. This makes it an excellent choice for developers looking to accelerate their mobile app development while maintaining flexibility as their project grows.