Strategy for upgrading React-Native

Imdad Hussain
4 min readJul 2, 2021

--

react-native upgrade strategies

I started working on react native project with 0.57 version. After that I have upgraded many projects gradually from 0.59 to latest version 0.64(as today).
I have faced the issues where you try to upgrade the project and everything is messed up. All your NPM packages are having issues. You start resolving the issues and then you delete iOS and Android folders, copy the latest folder from the new project but then you realise it is also not working, and at the end, you pull the latest code from git again.

React Native upgrade command tries to apply diff. automatically, my personal experience is to avoid it. You should have manual control on code base. In most opinions I have read about react native upgrade command that “It is kind of cool but It breaks often enough so I don’t really trust it.” Honestly you won’t be happy while upgrading with command and it will make you feel why you choose programming career.

I’m not completely against upgrade command but one thing is for sure, you will require to have a lot of git expertise for this one. You will loose track of what is happening and during upgrade you will have to merge much attentively.

When you should upgrade? Should you upgrade immediately when something drops or there should be some buffer?
So, in my opinion you should do if you have that kind of ability to control things while doing daily tasks. If something is blocked because of upgrade then you had to upgrade but if you can wait to get some free time from regular tasks then you should wait and try in free time. Give yourself one day in any case. That will include upgrade plus testing of complete application. One thing to remember if you are upgrading every time whenever there is one tiny upgrade, It will be very easy every time unless you wait for three, four upgrades and It also includes one major change (like we had for 0.60) things will be very difficult. In the end I would recommend to upgrade with every minor upgrade. Trust me, It will be piece of cake every time. You will see long term benefits above the short term costs.

What strategy you should apply for small upgrade bumps?
To upgrade small or large bumps I always go to react native community upgrade helper website. This is the most useful, tested and less painful way to upgrade the react native applications. It is very simple concept, you just select the version you are on, and select the version you are going to. It shows you diff between both versions. It shows you what changes you have to do by going through each file. Your first impression will be “oh that is a lot of manual work” but at the end If you have spent some time while upgrading with other methods, It will be very easy.

You can find reference of this tool inside official react native upgrade documentation
https://reactnative.dev/docs/upgrading
OR trust me and find it here
https://react-native-community.github.io/upgrade-helper/

One cool thing you can mark each file as complete on right side and hide it from left drop down arrow. So you can have track of each file.
From this point you are ready to upgrade your project. First thing you should do push your latest code to git before starting upgrade.

Right your current version on left side and choose upgrade version from right dropdown. It will show you all the diff between each file. Start following till the end.
Keep in mind that RnDiffApp and rndiffapp are placeholders. When upgrading, you should replace them with your actual project’s name. You can also provide your app name by clicking the settings icon on the top right.

At the end just clean your project, you can delete node_modules, Pods folder and do new yarn/npm and pod install.
That’s It from upgrade side, At this point you may face different issues, that I can’t list down here because those can vary from version to version.
Just look for those issues, If you have responsibility to upgrade the version, I’m sure you can look for those issues too. They won’t take much time. Throughly test your application and make sure everything is working.

That’s it. Thank you for reading my thoughts on upgrade.

--

--

Imdad Hussain

Mobile Engineer @ Nova, React | React Native|Redux, JavaScript | TypeScript mostly Frontend | more at https://hussainimdad.web.app/