🔝 How to easily upgrade React Native and the project dependencies

We all know the importance of keeping our project libraries up to date, but the difficulty of successfully applying the upgrade becomes a stopper and results in delaying the upgrade ahead in time.

Moreover, if we support more than one platform, such as Android and iOS, sometimes, the effort is double to make it work.

Luckily, new tools have been published to simplify this tiresome process.

Microsoft published a tool called align-deps that checks, according to the desired React Native version, which versions need the dependent libraries of our project to be updated to. This tool saves us a bunch of time searching on issues and readmes from our project libraries to check the suitable version, or how to fix a mysterious crash that beneath is related with a wrong version number.

The React Native Community published the RN Upgrade Helper which makes a diff comparison with the changes of the files from the old RN version to the one we want to update. I found this utility very helpful with the platform configuration files such as Android’s gradle and java files or iOS podfile and native files.

Next, we’ll see how to use these new tools and the new flow to upgrade React Native and its dependencies in our project. On the next sections, you can find other interesting utilities as well as useful commands to use during the upgrade.

🥳 Let’s make the upgrade easy!!

On the console, write the following command (where 0.71 should be changed to the RN version we want to upgrade):

npx @rnx-kit/align-deps --requirements react-native@0.71

A list of the dependencies with its version needed to be compatible with RN version will be shown:

Write the following command to accept the changes:

npx @rnx-kit/align-deps --requirements react-native@0.71 --write

Now, try to create the development and release builds for Android and iOS, as well as on the continuous integration service you may use such as CircleCI, and check them against simulators and devices.

If any problem arises, check the React Native Helper files, just in case, something else needs to be updated.

On the following section, there’s more information about the tools used 👇

🛠 Useful utilities

🟡 Use align-deps to make easier the upgrade of our dependencies

It checks which versions need the dependent libraries to be updated to, when upgrading RN https://microsoft.github.io/rnx-kit/docs/tools/align-deps

🟡 Use npx depcheck and uninstall unused libraries

Informs about unused and missing dependencies from package.json https://www.npmjs.com/package/depcheck

🟡 Check React Native Upgrade Helper version changes comparison

It shows the code differences between files from the old RN version to the one we want to update https://react-native-community.github.io/upgrade-helper/

⌨️ Useful console commands

When having strange crashes when trying to build the project, try first to ✨clean✨ caches before applying new changes:

1. Clear watchman watches:
   watchman watch-del-all
2. Remove the cache:
   rm -rf /tmp/metro-*
3. Delete node_modules:
   rm -rf node_modules
4. Install project libraries:
   yarn install
5. Clean & install project pods:
   cd ios && rm -rf Pods Podfile.lock && pod install
6. Reset Metro’s cache:
   yarn start --reset-cache
7. When applying new changes on Android gradle files, it deletes the build folder:
   cd android && ./gradlew clean