React Native Expo versus CLI: A Detailed Overview
Choosing Your Path: Simplifying Mobile App Development with React Native Expo and CLI
React Native has changed the way we build mobile apps, powering 38% of the mobile app market, according to fireart studio. It lets us write one codebase for both Android and iOS platforms.
When I started as a React Native developer years ago, one of my biggest challenges was figuring out how to begin. Sounds funny, right?
There are two ways to set up React Native, and your choice can shape your development journey: React Native CLI or React Native Expo.
I’ll explain the key differences between these two methods, their pros and cons, and why some developers have certain opinions about "using Expo."
This opinion is outdated, and I will confidently debunk it as we go through this article.
A Look Back at React Native's Beginnings
In 2015, Facebook (now Meta) introduced React Native 1.0, a UI framework based on React that converts JavaScript code into Obj-C + Swift for iOS and Java + Kotlin for Android.
That same year, at React Rally, Charlie Cheever introduced Exponent (now known as Expo), a toolkit designed to simplify the development of React Native applications.
In the frontend tech world, it's common to have frameworks that extend other frameworks, similar to the way an Ironman suit enhances its wearer.
Expo stood out because, upon its release, it became the recommended environment for developing React Native projects, even over the React Native team's own CLI.
This preference was due to Expo's ability to bridge React Native with core native mobile app development in a structured way.
In essence, Expo established a fast and efficient standard for developing React Native apps.
However, integrating these features directly into React Native wasn't feasible, as it would restrict some developer controls, though these controls aren't always necessary.
Understanding React Native CLI
React Native CLI is the official command-line interface for React Native, representing the traditional method of developing mobile apps with this framework. It offers developers full control over project configuration and the build process.
This tool enables developers to work directly with native code, offering the flexibility needed for handling complex scenarios and allowing for detailed performance optimization of the app.
Exploring React Native Expo
On the other hand, React Native Expo is an open-source project developed by a dedicated team of developers with the goal of simplifying and streamlining the often complex process associated with using the React Native CLI.
React Native Expo is essentially a comprehensive suite of tools, libraries, and services that are built around React Native. Its main purpose is to make the development process more accessible and user-friendly for a wider range of developers, regardless of their experience level. By providing a well-curated development environment, Expo allows developers to jump-start their projects with minimal setup and configuration.
One of the standout features of Expo is its collection of pre-built components and APIs. These resources significantly ease the process of adding new functionalities to your project, as they eliminate the need for developers to write extensive amounts of boilerplate code. This means that developers can focus more on building unique features and less on the underlying infrastructure.
Moreover, Expo's ecosystem is designed to handle many of the common tasks and challenges that developers face when building mobile applications. This includes handling updates, managing dependencies, and ensuring compatibility across different devices and platforms. As a result, developers can enjoy a smoother and more efficient development experience, which can lead to faster project completion times and a more polished final product.
React Native CLI vs. Expo: A Detailed Comparison
1. The Advantage of a Ready-to-Use Environment
Setting up a React Native project for the first time using the CLI can be a lengthy process, often taking up to 4 hours. This involves several steps:
Downloading and installing dependencies separately for both Android and iOS
Installing the React Native CLI
Creating your new application
Preparing the Android and iOS devices
Running the React Native application
In contrast, setting up the same project using Expo can be completed in about 4–5 minutes with the same internet speed.
To understand the difference, it's important to know how each approach works:
React Native compiles JavaScript into native code binaries. Using the React Native CLI requires Xcode for iOS and Android Studio for Android. As of the time of writing, Xcode is about 12GB, and Android Studio is about 7GB. Even if you can download both quickly, you still need to configure your environment, which includes installing a simulator and CocoaPods, before you can start creating your application.
npx react-native@latest init [app name]
Expo simplifies these complex processes by breaking them into separate services and components. Expo is divided into four main components/services:
Expo SDK
Expo Go
Expo Dev Clients
EAS
Each component addresses different needs and use cases to help you prepare your app for the market.
To begin using the Expo SDK, simply execute the following command:
npx create-expo-app [App Name]
This command installs the essential modules required to run a basic and functional mobile application on both Android and iOS. It also provides access to specific pre-built libraries available in the Expo documentation.
You just need to install the appropriate Expo library package.
Expo Go is an open-source app available for download from app stores on Android and iOS devices. It allows you to test your mobile application during development.
2. A Wide Range of Pre-Built Components and Modules
One of the most notable advantages of using React Native Expo is its vast library of pre-built modules and components, which significantly enhances the development process. This extensive collection includes integration modules that allow seamless connectivity with various services, as well as default device capabilities like a file system explorer. Additionally, it provides connections with widely-used services such as Firebase for backend support, Stripe for payment processing, and Facebook Authentication for user login, among others.
For developers, leveraging these pre-built resources can greatly accelerate the app development process. By utilizing these modules, developers can write less code, which simplifies the overall codebase and reduces the potential for errors. Moreover, these resources can enhance user experiences by ensuring that apps are equipped with reliable and tested functionalities.
While the React Native CLI also offers similar capabilities, it provides the flexibility to configure device capabilities or service operations in a more detailed and specific manner for either iOS, Android, or both platforms. However, this level of detailed configuration can often become complex and time-consuming. Developers may encounter frequent challenges, such as dealing with Gradle issues on Android or managing CocoaPods dependencies on iOS, which can slow down the development process and require additional troubleshooting.
3. Enhanced Customization Options
React Native Expo has often been criticized for its perceived lack of customization options compared to the React Native CLI. While the CLI offers extensive flexibility, which is rarely necessary for most apps, it was believed that Expo limited customization and the use of native modules without ejecting, except for the pre-built modules available in the Expo SDK.
This perception was accurate for a time. However, with the release of Expo version 45, significant changes were introduced, including the Expo EAS services and the Expo Dev Client ecosystem.
The Expo Dev Client introduced an open-source framework that allows developers to create a customized "Expo Go"-like application without the previous limitations. Essentially, developers can now integrate nearly all native packages, build a new "dev client" app, and have it function smoothly.
This development significantly changes how Expo is used. As long as there is a React Native package available for a specific task, it can now be integrated into your Expo app.
4. Simplified Build Process
Expo EAS Service offers a streamlined approach to building applications with React Native Expo. This service is highly beneficial for developers, providing a set of freemium tools to build apps for production, staging, or development environments. Additionally, it includes a feature that allows you to submit your apps to app stores directly from the command line.
One of the standout features of Expo EAS is the Over The Air (OTA) updates. This capability enables developers to push updates directly to users' devices without needing to go through the app store first. This means that minor JavaScript-related bugs and enhancements can be delivered to users almost instantly with a simple command.
As a React Native developer working in a startup environment where frequent updates are necessary, this service is invaluable. It allows us to limit store submissions to significant milestones or new features, ensuring that users receive updates quickly and efficiently.
It is important to note that the EAS service is not open-source. It is a freemium service, meaning it offers a free version with some limitations, while the premium version provides full functionality.
Initially, there was a belief that certain features and native packages were not technically compatible with Expo Go, implying incompatibility with Expo. Although this was partially true at one point, these concerns have largely been addressed with the introduction of Expo Dev Clients and EAS.
React Native Expo provides numerous benefits compared to the React Native CLI, making it a preferred choice for many developers in the mobile app development space. It not only simplifies the development process but also enhances productivity and performance, all while actively working to close the gaps between the two frameworks.
One of the key advantages of using Expo is its ability to streamline the development workflow. Developers can leverage a wide range of built-in tools and services that Expo offers, which significantly reduces the complexity associated with setting up and managing a development environment. This ease of use allows developers to focus more on building features and less on configuration and setup.
Moreover, Expo's robust ecosystem supports a variety of plugins and libraries that can be easily integrated into projects, further boosting development speed and efficiency. This is particularly beneficial for teams working under tight deadlines or in fast-paced environments where rapid iteration is crucial.
Expo also addresses several common misconceptions that have surrounded it in the past. For instance, there was a time when certain features and native packages were thought to be incompatible with Expo. However, with continuous improvements and the introduction of tools like Expo Dev Clients and EAS, these issues have been largely resolved, making Expo a more versatile and powerful tool than ever before.
As the mobile development landscape continues to evolve, React Native Expo stands out as a reliable and forward-thinking partner. It empowers developers to create exceptional cross-platform experiences, pushing the boundaries of what is possible in mobile app development. In the future, I plan to create a comprehensive FAQ section to address additional questions and provide further insights into the capabilities of Expo. However, to maintain the focus of this article, I will likely cover that in a separate piece.
Glossary:
React Native: A framework developed by Facebook for building mobile applications using JavaScript and React, allowing developers to write one codebase for both Android and iOS platforms.`
CLI (Command-Line Interface): A text-based interface used to interact with software and operating systems by typing commands into a console or terminal.
Expo: An open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. It provides a set of tools and services to simplify the development process.
Xcode: An integrated development environment (IDE) for macOS containing a suite of software development tools developed by Apple for developing software for macOS, iOS, iPadOS, watchOS, and tvOS.
Android Studio: The official integrated development environment (IDE) for Google's Android operating system, built on JetBrains' IntelliJ IDEA software and designed specifically for Android development.
CocoaPods: A dependency manager for Swift and Objective-C Cocoa projects, which automates the process of integrating third-party libraries into Xcode projects.
Gradle: An open-source build automation tool that is used to automate the building, testing, publishing, deployment, and more of software packages or other types of projects.
Expo SDK: A set of tools and libraries provided by Expo to help developers build React Native applications more easily, including pre-built components and APIs.
Expo Go: An open-source app available on app stores that allows developers to preview and test their React Native applications on Android and iOS devices during development.
EAS (Expo Application Services): A set of services provided by Expo to help developers build, deploy, and update their applications more efficiently, including features like Over The Air (OTA) updates.
Over The Air (OTA) Updates: A method of delivering software updates, configurations, and other information to devices wirelessly, allowing developers to push updates directly to users' devices without going through app stores.