Wednesday, May 8, 2024
-
5
min
What's New in Expo SDK 51: New Features and Updates
Welcome to our latest exploration of cutting-edge technology in the mobile development world. Today, we're diving into the newly released Expo SDK 51—an update that promises to enhance how developers build and deploy React Native apps. Here at Morrow, we specialise in leveraging Expo to deliver top-tier applications, and we're thrilled to share how SDK 51 sets new standards for efficiency and functionality. Whether you're a seasoned developer or just getting started with React Native, this release offers exciting opportunities to streamline your workflow and elevate your projects. Join us as we unpack the key features, improvements, and critical insights of Expo SDK 51.
Read "What's new in Expo SDK 50" here.
Need help with an urgent Expo issue? Want experts on your side to drive forward your project? Need a second opinion on something? We’re here to help. Fill out our Expo App Audit form or book a call to discuss your project here.
Exploring the Latest Features in Expo SDK 51: What Developers Need to Know
Moving Closer to the New Architecture
Expo SDK 51 marks a significant step toward the future of React Native, known as the New Architecture. In this release, the Expo team has enabled support for "bridgeless" mode in nearly all Expo modules and the Expo Modules API. This enhancement means that if you've built your modules using the Expo Modules API, they should now be compatible with the New Architecture right out of the box.
You can also test your applications and projects to see how well they align with the New Architecture. It's highly recommended that you do this so you can be well-prepared for future developments in React Native.
For detailed instructions, you can find them here:
https://docs.expo.dev/guides/new-architecture/
A Quick Refresh on the New Architecture
The New Architecture in React Native represents the future of app development, aiming for more efficient and higher-performing applications. Let's revisit its core components:
JSI (JavaScript Interface): JSI allows JavaScript and React code to directly interact with the app's native components, using direct calls instead of the older method of JSON messaging.
Fabric: This module handles native UI rendering, enhancing the interface responsiveness and performance.
TurboModules: This component is tasked with managing native modules, allowing for more dynamic and efficient integration with native functionalities.
Bridgeless: With this mode activated, the traditional bridge used for communications is disabled, enabling other application parts (like event handlers) to interact directly. It also includes a compatibility layer to work seamlessly with older modules.
Codegen: This tool automates the creation of essential code that bridges JavaScript and native code, facilitating smoother and more reliable communication between the two.
This streamlined interaction model not only boosts performance but also simplifies development by reducing reliance on traditional, complex bridging techniques.
Partner with Morrow to transform your Expo app into a high-performing, secure, and user-friendly solution. Fill out our Expo audit form and take the first step towards app excellence.
Updated Expo Router v3.5
The Expo Router has been enhanced with several new features since its version 3 release in Expo SDK 50. Here's what stands out in our opinion:
Support for URL Hash Segments
You can now directly access the hash part of a URL using this method:
New Dismiss Functionality
The updated router now allows you to close the closest stack screens all the way up to the root with these new functions:
Platform-Specific Extensions for Routes
You can tailor your routes and layout files specifically for different platforms, such as iOS or the web, like this:
For more details on all the updates to the Expo Router, check out the official Expo Router Documentation or read "What is Expo Router?" here.
New Default Template
With npx create-expo-app you’ll now see a new project template. It is now pre-loaded with all the essential dependencies and settings that most projects need.
You may run npm run reset-project to remove the boilerplate code and start fresh.
EAS Updates: Rollout Web UI
In the SDK 50 update, support for "rollouts" was introduced, allowing updates to be gradually released to a select percentage of users. This strategic feature is designed to reduce the risk of bugs impacting the production environment. Initially available through the EAS CLI, an intuitive web interface has now been launched, simplifying the creation and management of these rollouts.
EAS Updates: Preview
The web UI has also been revamped to enhance how updates are opened and shared with your team. The preview modal can now be accessed by clicking the "Preview" button at the top right of an Update details page.
expo-camera/next is Now the Default
In Expo SDK 50, expo-camera/next was introduced with many more features than the original camera. In Expo SDK 51, this package is now the default. Here’s an example:
You can find more details about it here: Expo Camera.
expo-sqlite/next is Now the Default
Starting with Expo SDK 50, expo-sqlite/next was introduced and has now become the standard version. You can easily import it using:
It's important to note that expo-sqlite/next is a complete overhaul of the previous library. This update modernises the API and enhances its features, offering a more refined experience for handling SQLite databases in your projects.
You can find more information at Expo SQLite
Privacy Manifests
Apple requires apps to include a Privacy Manifest, specifically a file named PrivacyInfo.xcprivacy, which lists the types of data collected by an app or any third-party SDKs. This file should also explain why the app needs access to privacy-sensitive APIs.
Starting May 1, 2025, having this file in your app is mandatory. If it's missing, your app risks rejection when submitted to the App Store.
You can now easily add this configuration to your app's manifest using Expo Config. This tool helps ensure you meet Apple's requirements smoothly and efficiently.
Find more details about it at Privacy Manifest Files
The Beta Features
The following features are newly introduced or have been promoted to the beta stage.
Expo-symbols
This is currently an iOS-only package that allows you to use a collection of 5000+ icons in the SF Symbols library, a library of iconography designed to integrate seamlessly with San Francisco, the system font for Apple platforms.
Find more details about at Expo Symbols.
Fingerprint Runtime Version Policy
The fingerprint runtime version policy has been upgraded from experimental to beta status, indicating improved stability and reliability.
You can now incorporate this policy into your app by updating your app.json configuration as follows:
This policy plays a crucial role in determining the compatibility of Over-the-Air (OTA) updates with the native version of your application. Unlike traditional methods that depend on version numbers, the fingerprint policy allows the build system to automatically detect changes in your native code to decide whether an update should be applied.
You can find more information on Runtime versions and updates.
Expo Orbit in Windows
Expo Orbit is a desktop application that enables faster installation and launch builds or updates from EAS and local files, as well as running Snack projects on simulators and physical devices.
It is now available for Windows in beta version. Find more information here:
https://expo.dev/blog/expo-orbit-now-available-as-a-preview-for-windows
Additional Features in Expo SDK 51
To round out our discussion, here are several more features and updates that Expo SDK 51 introduces:
Expo Go Version Compatibility
Starting with Expo SDK 51, the Expo Go app will now support only the corresponding SDK version. This means that the most recent version of Expo Go available on Google Play and the App Store will exclusively support the latest SDK version. If you need to work with other versions, you can utilise the following portal for assistance:
Simplified ESLint Configuration
Configuring ESLint for your Expo project is now straightforward. Simply run the following command:
This command will automatically create an ESLint configuration that extends eslint-config-expo, streamlining your setup process and ensuring your project adheres to best practices.
Support for All Mainstream Package Managers
You can now create and manage your Expo project with your favourite package manager.
Read: "How to publish Expo React Native app to iOS and Android."
Explore More and Embrace the Future
These highlights represent just a glimpse of the new features and updates included in Expo SDK 51. For a comprehensive overview of all the enhancements, be sure to check out the full Expo Changelog.
We believe these developments signal an exciting future for the React Native and Expo ecosystems. The advancements in SDK 51 are paving the way for more innovative and efficient app development. Join us as we step into these promising times, eager to see how these changes will revolutionise our projects and workflows.
Need help with an urgent Expo issue? Want experts on your side to drive forward your project? Need a second opinion on something? We’re here to help. Book a call to discuss your project here.