The Expo SDK provides access to device and system functionality such as contacts, camera, gyroscope, GPS location, and so on, in the form of packages.
Upgrading any SDK is always a mix of excitement for improvements and new functionalities and frustration when things don’t go smoothly. When we upgraded our app from Expo SDK 48 to 51, it came with its fair share of hurdles.
From dependency conflicts to breaking changes, we ran into several roadblocks that slowed us down. In this blog, we’ll share the challenges we faced during the upgrade and how we tackled them, so that the same pitfalls can be avoided in your expo project.
Why We Skipped Incremental Upgrades
Our usual approach to SDK upgrades is to move incrementally—going from 48 to 49, then 50, and finally 51—to catch and resolve issues step by step. However, this time, we jumped directly to SDK 51 due to a Play Console notification alert requiring us to update our app to meet the latest compliance and performance standards. This made the process more challenging, as we had to deal with multiple breaking changes at once instead of addressing them gradually.
Upgrading to SDK 51 and Managing DependenciesWe upgraded to Expo SDK 51 using the recommended command and updated all necessary dependencies to match the required versions.
Upgrade to the Expo SDK 51
#Install the required version of the Expo package, in our case to SDK 51
npx expo install expo@^51.0.0`
Upgrade dependencies
#Upgrade all dependencies to match the installed SDK version.
npx expo install –fix
However, one challenge we faced during upgrades is that the automatically upgraded dependency versions don’t always align with what’s actually required. In some cases, dependencies need to be manually updated to their latest versions for compatibility. To avoid issues, we carefully checked each dependency version and ensured everything was updated correctly.
Post-Upgrade Fixes
- Adjusting app.json, babel.config.js and index.js
After upgrading the SDK and dependencies, our application failed to launch. To resolve this, we had to make adjustments to the app.json configuration and update the babel.config.js and index.js file.
app.json
We updatedandroid permissions, removed explicit mention of jsEngine, as in Expo SDK 51 it defaults to Hermes and updated plugins.
babel.config.js
We updated the code as below
index.js
After updating, registerRootComponent is now imported directly from expo
After implementing these changes, the application launched but faced breaking issues. To resolve the breaking issues, we implemented the next changes.
2. Updated @react-navigation syntax changes
3. Changes in SQLite API
Expo SDK 51 introduced breaking changes to SQLite API, by making several methods asynchronous. This required updating our existing database-related code to ensure proper handling with async/await.
One example is that the openDatabase has been replaced with openDatabaseAsync, making the method asynchronous.
4. Redux Thunk Import Change
As part of the Expo SDK 51 upgrade, we had to update the way redux-thunk is imported.
Before the update the redux-thunk exported thunk as a default export. After the upgrade, thunk is exported as a named export, which means you must import it using curly braces {} and the exact name
5. Moment Library Changes
With the upgrade to Expo SDK 51, we faced issues with moment library due to changes in how date formatting is handled
We observed that moment() now requires an explicit format when formatting dates and times. Previously, it would default to a standard format, but in the updated version, omitting a format may lead to unexpected behavior.
Before Upgrade
After Upgrade
6. Expo Document Picker Changes
After upgrading to Expo SDK 51, the getDocumentAsync() function in expo-document-picker now returns an array of assets instead of a single object. This required updating the code to properly handle the response when accessing document details.
Before Upgrade
After Upgrade
7. Handling Keyboard.removeListener is not a function in Expo SDK 51
After upgrading to Expo SDK 51, we encountered an error while trying to remove event listeners from the Keyboard module:
🚨Error: Keyboard.removeListener is not a function
This occurred because Keyboard.removeListener has been deprecated. Instead, event listeners must now be removed using the remove() method on the subscription returned from addListener.
8. Expo Camera API Changes in SDK 51
With Expo SDK 51, updates to the expo-camera package required modifications to the existing code.
Previously, expo-camera used Permissions.askAsync from expo-permissions to request access. In Expo SDK 51, it now includes a built-in requestPermissionsAsync() method, removing the need for expo-permissions.
After the upgrade, we uninstalled expo-permissions to remove unnecessary dependencies.
9. Replacing expo-barcode-scanner with expo-camera in Expo SDK 51
In Expo SDK 51, expo-barcode-scanner has been replaced with expo-camera for barcode scanning, which required updates to the existing implementation.
After the upgrade, we uninstalled expo-barcode-scanner to remove unnecessary dependencies.
10. Expo-Notifications changes
In Expo SDK 51, expo-notifications introduced changes, particularly in permission handling and API updates. When upgrading from SDK 48, we had to update our code to align with these changes.
Changes in fetching the Expo Push Token
app.json
Upgrading to Expo SDK 51 came with its share of challenges, from dependency updates to breaking changes in APIs. While some adjustments were straightforward, others required careful debugging and code modifications.
Despite the hurdles, this upgrade ensures better performance, stability, and future compatibility.
Hope this helps in making your Expo SDK 51 upgrade smoother! 🚀