React Native Meets Expo: A New Standard
Last year, React Native officially endorsed frameworks like Expo for development. While many have viewed Expo as suitable only for simple apps, this perception is far from accurate. The Expo ecosystem provides robust capabilities that streamline development and offer remarkable versatility - even for complex applications requiring native code modifications.
Why Expo CNG/Prebuild is a Game-Changer
Expo Custom Development Client (CNG) and the prebuild process significantly reduce project complexity. You no longer need to track ios and android folders in your repository, eliminating the burden of managing vast amounts of rarely modified native code. Instead, Expo will generate these folders when you run the project and native code changes are handled through Expo's plugin system - a declarative and trackable approach that works like infrastructure management in Terraform. Say goodbye to digging through .xcodeproj or build.gradle files to trace changes.
The best part? Anyone who can write JavaScript can write these plugins.
Step 1: Ditch app.json for app.config.js
To make full use of Expo’s dynamic capabilities, move from .app.json to app.config.js. This allows you to:
- Pass dynamic values, such as app names, bundle IDs, splash background colors, and assets, which is perfect for white-label apps (blog post on that coming soon).
- Write custom plugins to include or exclude packages based on specific app needs (e.g., ad-related SDKs for certain clients).
Step 2: Writing a Plugin
Example: Migrating from ReNative to Expo
For our client, we didn’t start from scratch with Expo, but instead migrated away from another build tool called ReNative. Whilst this introduced a few more challenges, such as being behind 5 versions on React Native, it did mean we could write the plugins and then compare the output of them to the old version of our repo. A great trick I used to have multiple instances of a repo checked out simultaneously was git worktree
Check out more about git worktree here.
Custom Lifecycle Function in Android
For our Android project, we needed a custom lifecycle function to reduce pixel density, ensuring consistent styling across tvOS and Android. Here’s how we achieved it:
In our old project, we tracked the android folder which had the following change to the MainApplication.kt
Native Kotlin Code:
Here’s how we do the same with expo plugins.
We start off by creating our file, we use the following boilerplate:
Now we need to add our custom code. Expo has helper functions that make this much easier for us.
Expo Plugin:
With this approach, our custom MainApplication code is tracked in GitHub, complete with a description explaining why it exists. Every time we run expo prebuild, the same input produces the same output.
All you need to do now is add the file to your app.config.js plugins array.
Step 3: Custom Plugin Behavior
Plugins become even more powerful when you start passing options to them.
For example, in a white label application you may need to exclude certain packages that aren’t required by a client. If a client has ads enabled, you can include these SDKs in the app and exclude them for those that don’t require it, removing bloat. You can pass these options via the app.config.js by passing your plugin as an array.
This means your with DynamicPackages.js file would look like so:
Now when we build a project which has ads enabled, the relevant SDKs are included. However, when they’re not needed, they’re not included. This comes with multiple benefits such as a smaller bundle size for the application, or avoiding complaints from Apple or the Google Play Store about not specifying ads are included.
Conclusion
Expo, combined with its Custom Development Client and plugin system, has transformed React Native development. Through simplified native code management, dynamic configurations, and JavaScript-based plugin extensibility, Expo has proven itself as a powerful tool for complex projects, not just basic applications.
Whether you’re migrating from another framework, fine-tuning native behavior, or optimizing app builds for specific client needs, Expo empowers developers with a clean, maintainable, and scalable workflow. It bridges the gap between native and JavaScript development, making it accessible to developers of all skill levels.
This was a special guest post by Econify Software Engineer, Christian Clarke.
Stay ahead of the curve with Econify's newsletter, "The Loop." Designed to keep employees, clients, and our valued external audience up to date with the latest developments in software news and innovation, this newsletter is your go-to source for all things cutting-edge in the tech industry.
Missed an issue? Explore The Loop's archive here.
The Loop is written and edited by Victoria Lebel, Alex Kondratiuk, Alex Levine, Christian Clarke, and Marie Stotz.
Latest Tech Updates in Your Industry
Designed to keep employees, clients, and our valued external audience up to date with the latest developments in software news and innovation. It is your go-to source for all things cutting-edge in the tech industry.
Related Updates
Contact Us
New York, NY 10003
New York, NY 10003, U.S.A.
London, EC4A 3TW,
Step 1: Ditch app.json for app.