Upgrading an Expo App

04 May 2020

This is how I upgrade my Expo apps like React Native using Expo and Typescript. My apps use Expo’s Managed workflow and use Yarn v1 to manage npm packages.

I create a commit after each step, so that I can easily undo or debug, if necessary, and I generally test running the app after each stop to make sure it still work. Upgraded packages sometimes require minor changes to the code.

1. Upgrade Expo CLI

The Expo CLI will do the most of the work upgrading the app, so start out by making sure I have the latest version of that command line tool.

yarn add --dev expo-cli@latest

2. Upgrade Expo and Known Packages

Expo CLI can upgrade Expo and all packages that it knows about, respecting Expo’s specific version requirements. expo upgrade updates the version numbers in package.json and installs them afterwards to keep the yarn.lock in sync.

yarn expo upgrade

Make a note of the packages there weren’t upgraded by Expo. Here’s an example of the list of unknown packages.

The following packages were not updated. You should check the READMEs for those repositories to determine what version is compatible with your new set of packages: @react-navigation/native, @react-navigation/stack, prop-types, tslib, @babel/core, @types/expo__vector-icons, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-config-prettier, eslint-plugin-prettier, eslint-plugin-react, expo-cli, prettier, sharp-cli

3. Upgrade the Rest of the Packages

Upgrade the rest of the npm packages.

yarn upgrade

4. Major Upgrades

yarn upgrade doesn’t upgrade packages to new major versions. Verify if there is anything not up to date, and if so, consider upgrading. Upgrading major versions might require a lot of changes to the source code.

# Look out of major updates to unknown packages, that is red
# lines where the package is in the list found in step 1.
yarn outdated

5. Sync Installed Versions to package.json

I like being able to see the exact version of the packages that I have installed by looking in package.json, so I use syncyarnlock to synchronize the versions from yarn.lock to package.json. Run a yarn install after modifying package.json to sync the modifications back to yarn.lock.

npx syncyarnlock --keepPrefix --save
yarn install