History and Current Status of Expo

I am documenting the changes I’ve observed in Expo over the past 7 years. The current status is as of October 25, 2023.

The Early History of Expo

I first became aware of Expo in 2017, and it’s already been 7 years since then. Initially, Expo provided many modules out of the box for React Native, which aimed to offer an integrated development environment akin to React’s Create React App (CRA). As those who have used Create React App know, this environment allows for the development of a React app without the need to configure the build process. However, if you need more in-depth environment configurations during development, you must perform an “eject.” This eject process moves you out of the simple Create React App environment and allows you to directly control the entire Webpack and Babel configuration, among others. This ‘eject’ effectively transforms the project into a standard React project.

Similarly, there is a comparable concept in Expo. During development with Expo, you can perform an “eject” which transitions to ExpoKit. Once ejected, developers can step outside of the convenient environment provided by Expo and gain direct access to the native code or add or modify other native modules. Like with CRA, this means you have to manage the builds yourself, which also means all upgrades need to be done manually. This can be a significant downside for developers with no experience in iOS or Android development.

To further clarify CRA and Expo:

Create React App (CRA)
1. Purpose: CRA is a tool that helps with the initial setup for web applications.
2. Advantages: You can start building a web app immediately without complex configurations.
3. Eject: If more configuration changes are needed in the project, you can ‘eject’ to move away from the default settings of CRA. This allows for more diverse configuration changes to the project.
4. Disadvantages of Ejecting: After ejecting, you can no longer use the simple settings and upgrade tools provided by CRA, which requires a deeper understanding of web development.

Expo
1. Purpose: Expo is a tool for mobile application development.
2. Advantages: You can create an app easily, and run it immediately without complex configurations or changing native code.
3. Eject (transition to ExpoKit): If specific native functions are needed in the app, you can ‘eject’ to move out of Expo’s default environment. This allows access to and modifications of various native modules.
4. Disadvantages of Ejecting: After ejecting, you lose access to the convenience tools and update features provided by Expo. Additionally, knowledge related to native code for iOS or Android becomes necessary, which can be challenging for developers without mobile app development experience.

However, the initial direction of Expo provided a restrictive environment to its users. This limitation led to inconvenience among the user base, and in response to their feedback, Expo’s lead developer Brent Vatne addressed the issue in-depth in a [blog post](https://medium.com/the-exponent-log/expokit-2019-1e5cb02106f8). As a result, in 2019, Expo discontinued support for ExpoKit and introduced two new approaches: the managed workflow and the bare workflow. The issues with ExpoKit were similar to the problems users encountered with Create React App’s eject feature. The references below highlight cases where many developers faced difficulties after ejecting.

Source: https://www.youtube.com/watch?v=DCmmvJWrxPo
Source: https://www.youtube.com/watch?app=desktop&v=2RvntJWs1Pw

New Expo Workflow

Let’s now take a look at the managed workflow and the bare workflow, the new methodologies that Expo has introduced.

Managed Workflow

The Managed Workflow is a way of working within a development environment fully managed by Expo. In this workflow, you develop apps utilizing libraries and tools embedded within the Expo SDK. This approach shares similarities with the previous Expo development environment that did not require an eject.

Advantages

• You can start developing apps immediately without any initial setup or complex environment configurations.
• The Expo Go app allows you to preview your app in development instantly.
• It includes a suite of libraries prepared to easily access and utilize various native features.

Disadvantages

• You do not have access to native functions or libraries not provided by the Expo SDK.
• The app size can be quite large, and there may be limitations to optimization.

Bare Workflow

The Bare Workflow is a development method that starts with the initial setup of Expo but then allows free utilization of a variety of mobile or React Native framework features and libraries without the constraints of the Expo environment.

Advantages

• You have direct access to native code, which means you can add or modify any native modules or features as needed.
• You can make use of various libraries and functions not provided by Expo.
• It’s possible to optimize and fine-tune the app, which can lead to more efficient app performance.

Disadvantages

• After the initial setup, the developer is responsible for managing all aspects of the app.
• Real-time preview using the Expo Go app is not possible.
• If integration with native code is necessary, the developer needs to be familiar with the development tools for the respective platform (e.g., Xcode, Android Studio).

n short, the Managed Workflow is used for convenient app development within the Expo environment, while the Bare Workflow is used when more freedom and native feature integration are needed.

To put it more simply, if you develop using the Expo managed workflow, you’ll be using the Expo app for development purposes, building your app on top of the platform provided by Expo.
On the other hand, with the bare workflow, you develop on top of an app that you install directly.
The differences between the two workflows can be distinguished by the following key points.

1. Configuration and Management

• Managed Workflow: Expo handles most of the build and deployment process for your app. There is no need for initial configuration, and you can develop and test your app using the tools provided with the Expo CLI.
• Bare Workflow: Expo provides only the initial setup, and the rest must be managed by the developer. You develop the app using the React Native CLI and can add or modify any native modules you want.

2. Native Module Access

• Managed Workflow: You are limited to using libraries and modules included in the Expo SDK. As such, you cannot access native features that are not supported by Expo.
• Bare Workflow: You have direct access to the native code and can add or modify any native modules as needed.

3. Development Tools

• Managed Workflow: You can use the Expo Go app for instant live previews of your app. This app is used to test the app you’re developing in real-time on actual devices.
• Bare Workflow: You develop and test your app using the React Native CLI and native development tools (such as Xcode, Android Studio).

4. OTA(Over-the-Air) Updates

• Managed Workflow: You can easily use Expo’s OTA update feature, allowing you to update your app’s JavaScript code without going through app stores.
• Bare Workflow: Additional setup and integration are required to use OTA updates.

5. Build and Deployment

• Managed Workflow: You can build iOS and Android apps using Expo’s servers.
• Bare Workflow: You need to use the native build tools of each platform to build and deploy your app.

In conclusion, the Managed Workflow is suitable for rapid development and prototyping, while the Bare Workflow is more appropriate for projects that require deeper native integration.

Specifically, when developing in the Expo bare workflow environment, it is not done by ejecting from the existing Expo environment but rather by configuring directly from the react-native cli. This is made possible through something called Expo’s unimodule. Expo has provided a bridge that allows the use of modules developed by Expo in the react-native cli environment through unimodules.

Although the name has changed to “Expo Modules” and it’s based on a new infrastructure, the fundamental idea remains similar. When using ‘Expo Modules’, if you install expo-modules in a project built with the original CLI, you can easily add various packages included in the Expo SDK. In addition, the autolinking feature facilitates much easier integration and use of the various modules provided by Expo.

Web Support

Around the same time, Expo also put effort into officially supporting react-native-web. This includes an announcement from Expo developer Evan Bacon about beta support for the web.
Similarly, I too have created test apps and shared my experiences.

Concurrently, Expo developed and provided the expo-auth-session module, enabling login capabilities across Android, iOS, and web. Unfortunately, at the same time, the Expo Facebook module and Expo Expo Google App Auth module were deprecated.

As of September 2023, the situation has become somewhat uncertain for web-based Google and Facebook logins, as even Google and Facebook within expo-auth-session have been deprecated. This is especially puzzling because the community modules that remain do not have robust web support. (This decision is quite perplexing. 🤔)

Expo Application Services

The following year, Expo discontinued support for expo-cli and switched to eas-cli, simultaneously announcing the Expo Application Service. This marks Expo’s first foray into a business model, offering an automated build tool that enhances developer convenience. Through this service, developers can efficiently perform a series of tasks such as building, deploying, and updating Expo and React Native projects. EAS focuses on making Expo and React Native development easier and more powerful.

Key features of EAS include:

1. EAS Build: A cloud-based build service that allows you to build iOS and Android apps in the cloud without the need for complicated native build processes locally.
2. EAS Submit: Automates the app store submission process, making it easier to submit apps to the Apple App Store and Google Play Store.
3. EAS Update: Provides OTA (Over-The-Air) updates that enable real-time updates to an app’s JavaScript code and assets. This allows developers to provide updates to users immediately without going through the app store.

Following these changes, the existing Expo Updates module can also perform OTA updates through EAS commands.

Expo dev client

Following the introduction of EAS, a new tool called the Expo Dev Client was announced.
The Expo Dev Client is a tool provided by Expo that allows developers to build and test React Native apps using a customized development environment. This represents an important evolutionary step for Expo and React Native. With the Expo Dev Client, developers can maintain the Expo development experience while working with native code.

Key features of the Expo Dev Client include:

1. Native Module Support: With the Expo Dev Client, developers can add native modules to their React Native projects, a feature not supported in standard Expo apps.
2. Developer Experience: The Expo Dev Client allows you to work with native modules while maintaining the benefits of Expo Go (such as live reloading, quick restarts, etc.).
3. Custom Builds: With the Expo Dev Client, you can build your own native app and test React Native JavaScript code that operates within that app exclusively.
4. Integration with EAS: The Expo Dev Client is designed to be used in conjunction with EAS (Build, Submit, etc.), simplifying the build and deployment process.

In particular, the Expo Dev Client offers a “custom build” feature that leverages Expo’s integrated development environment, allowing developers to conveniently manage any additional configurations they want. This feature has made it easy to add desired modules within the Expo environment. For example, to add a native module like react-native-iap in the Expo development environment, you can install the module and then configure a new build environment using the eas build command.

Expo config plugin

The Expo Config Plugin is a tool within the extended ecosystem of Expo, offering a way to easily integrate custom native code or libraries. It is mainly used in conjunction with the Expo Dev Client or EAS Build.

Using a Config Plugin, you can automate or simplify the process of adding a React Native library or making individual settings changes for native code modifications. In other words, it allows you to programmatically adjust the native settings of an app without having to edit the native project files directly.

The main features of the Config Plugin include:

1. Extension of app.config.js or app.config.ts: Config Plugins are used in Expo’s app configuration files (app.config.js or app.config.ts) to make changes to native code.
2. Automation of Native Settings: It automates the native settings required to integrate a native module into an Expo project, such as changes to Info.plist or AndroidManifest.xml.
3. Reusability: It allows for the reuse of the same native settings across various projects, facilitating the easy application of consistent settings.

The Config Plugin plays an important role in enhancing the development and deployment experience within the Expo ecosystem. Library developers can include a Config Plugin in their packages, supporting users to easily integrate the library into their Expo or React Native projects.

One more thing

Bun Support

And with that, we conclude. 🙂

If you’d like to learn more, please check out the October Cross-Platform Meetup video. 🫡