Embracing Expo Modules in your React Native Projects

Are you looking for high-quality React Native native modules? Expo modules might be a good fit for you! Expo maintains about 70 native modules and native components, from Accelerometer to Updates, all use TypeScript, are well documented, and follow consistent API conventions. Learn more about all the modules.

Expo or React Native? Both

In Python web frameworks, choosing between Django or Flask is a hot topic. Django is a full-stack framework that comes with many features. It’s recognized as a heavy framework, and it probably includes features you don’t need. On the other hand, Flask is a lightweight framework; developers can customize every piece of it.

This dynamic present in the Django and Flask communities is pretty similar to the Expo or React Native debate. Before I joined Expo, I used React Native at work and I never used Expo modules in my apps. I didn’t need Updates or the managed Push Notification services from Expo. Most importantly, I try not to include any unnecessary or unfamiliar libraries in my apps. Even when a specific Expo module looked appealing, I turned to find an alternative because I thought that the Expo SDK would increase binary size of my apps by too much.

After joining Expo, I realized that my perceptions of the Expo SDK were wrong. The impact on binary size is minimal, and they work great in projects created with react-native init.

You can think of the Expo SDK as a qualified collection of native modules and native UI components which you can use in your existing React Native projects. Like an extended standard library for React Native apps.

It is a misconception of Expo that you should choose Expo project or vanilla React Native project from the beginning. It’s also a misconception that when you pick one, you lose the benefits from the other. Echoing Brent Vatne’s React Native EU talk — nowadays, you can pick both!

Installing Expo modules in two quick commands

Integrating Expo modules to existing React Native projects has never been easier, you can do it in two simple commands:

  1. Install the expo package and Expo module infrastructure to your native project: npx install-expo-modules.
  2. Install the Expo modules you want to use: e.g., to install expo-av, run npx expo-cli install expo-av; or, if you have expo-cli globally installed (recommended), you can run: expo install expo-av.

You’re done! Now you can run expo run:[android|ios] or npx react-native run-android or npx pod-install && npx react-native run-ios to start using the modules. Learn more in the "Installing Expo Modules" guide.

What’s inside the expo package?

The expo package is an umbrella package consisting of expo-modules-autolinking, expo-modules-core and some fundamental Expo modules. Learn more about these modules.

expo-modules-autolinking is responsible for build time autolinking for React Native; your apps will not include this code in their runtime.

expo-modules-core acts as an essential role for Expo modules: it provides interfaces for Expo modules’ registrations and adapts linked Expo modules into the React Native runtime. It also abstracts how a native module registers to React Native, which enables our current work on adding Swift and Kotlin support.

The expo package is lightweight, increasing only about ~0.2MB for app download size and ~0.45MB app install size on iOS.

App size comparison for a `react-native init` app and after `npx install-expo-modules`

So, what’s happening here?

Expo modules build on top of infrastructure provided by the expo package. Previously, this functionality lived in react-native-unimodules, but that was renamed to expo with Expo SDK 43 (along with being improved and simplified in the process). react-native-unimodules’s integration required that users manually update a bunch of project files to start to use it, and this ended up being a barrier to entry for some developers. The new expo package reduces the required changes to project files and, most importantly, also comes with a life-saving tool: the npx install-expo-modules command. This handles automatically installing and configuring the project for you whenever it's possible to do so.

Last but not least

Expo has changed a lot over the years, but posts on the Internet rarely go away; as a result, there are plenty of misconceptions and myths out there. This post covers one of the common myths — that you have to choose between Expo and React Native. If you’re interested in learning about others, check out this post from Bartłomiej Klocek:

Top 7 myths about Expo in 2021

At Expo, we try to ease the difficulty of cross-platform development to help you build and iterate with speed and confidence. With the help of Expo modules, you don’t worry about writing Android or iOS native code. However, this is only one part of the product development cycle. For example, you still need to take care of delivering your apps to real devices for internal testing, and submit apps to the App Store or Google Play Store. This is where EAS (Expo Application Services) comes to the rescue. Learn more from Jon Samp’s talk about how we help your whole product development cycle in a cross-platform way.

Embracing Expo Modules in your React Native Projects was originally published in Exposition on Medium, where people are continuing the conversation by highlighting and responding to this story.

Embracing Expo Modules in your React Native Projects