Upgrading your react native app the easy way

So you have a React Native app, huh? But it’s on an older version and you need to upgrade it to latest? Believe me, it’s a pain in your you know what if you are lots of version behind. I was assigned a task by my company to update our app from version 0.44.0 to latest (v 0.57.0).

Here’s a basic version of what you need to do:

1. Review the React Native Release Notes and look for the breaking changes between your version and the target version.
2. Check all your packages/libraries to make sure it’ll work for the new target version of react native. If required, upgrade the libraries.
3. Use available tools for upgrading.

Official documentation from React Native suggests you to use react-native-git-upgrade . But I’ve found lots of issues online with other developers after using it, like conflicts in project.pbxproj file, Unable to open .xcodeproj file and such.

There’s a repo rn-diff which I found super easy to use. I used this very method to upgrade our app. This repo has a table that shows you the file changes comparison between two nearest versions along with the patch file for upgrading.

Here’s how to use it.

You can either view the comparison and change the contents manually or use the patch file provided.

I recommend you to upgrade one version at a time.

As you look for the comparison between the versions, you’ll find that most of the changes are just bumping up the react-native and react ‘s version on the package.json file. Simply change the version and run yarn install .

For e.g. if you are on version 0.54.0 and you need to upgrade it to version 0.54.4 , then you already know what to do.

Now you are on v0.54.4 and you need to upgrade to v0.55.0 , you’ll see there are changes to 7 files. Either you make changes to those files manually or better follow the following steps:

Assuming you are still inside your project and in your terminal:

1. Download the patch file

$ curl [https://github.com/ncuillery/rn-diff/compare/rn-0.54.4...rn-0.55.0.diff](https://github.com/ncuillery/rn-diff/compare/rn-0.54.4...rn-0.55.0.diff) > upgrade-rn.patch

It downloads the patch file (it’s different for the different version, so you’ll have to provide the specific link from the table) with the file name upgrade-rn.patch.

2. Prepare the patch

The patch is made for the RnDiffApp located in the RnDiffApp folder of this repository. To use it in your own repository, some changes are needed.

You can either replace the RnDiffApp with your AppName on upgrade-rn.patch file manually or use the following commands to do it automatically:

$ appNameCamelCase=MyApp
$ appNameLowerCase=myapp
$ sed -i "" "s-ios/RnDiffApp-ios/${appNameCamelCase}-" upgrade-rn.patch
$ sed -i "" "s-java/com/rndiffapp-java/com/${appNameLowerCase}-" upgrade-rn.patch

sed is a unix command. The above s-ios/RnDiffApp-ios/${appNameCamelCase}- from the sed command replaces all the occurrences of ios/RnDiffApp by ios/MyApp and the other command does similar to android.

3. Setup a 3-way merge

By default in case of conflicts, the git apply command will fail and leave the files untouched. It could be interesting to fallback on a 3-way merge (option --3way) in order to resolve the conflicts with your favorite merge tool.

To do this, git needs to know the blob referenced in the patch . So you have to add rn-diff as a remote repository and fetch it

$ git remote add rn-diff https://github.com/ncuillery/rn-diff.git
$ git fetch rn-diff

4. Apply the patch

$ git apply upgrade-rn.patch --exclude=package.json -p 2 --3way

-p 2 tells Git to ignore the subfolder when applying the patch.

Here package.json file is excluded so you’ll have to manually edit this file.

$ yarn install

Also, it’s better if you re-link your native libraries.

After this process, run your app for both the platform.

PS: As you can see, rounded app icons has been introduced for android on version 0.56.0. You might get some error when you try to apply the patch for v0.55.4-v0.56.0. I would recommend you delete the patch for the app icons from the patch file and apply it. You could later use your own rounded icon for your android app.

Voila! your app is now upgraded. 🎉🎉🎉