Recently I've got an opportunity to upgrade a react-native project to its latest version. It's not an expo project. At the time of upgrade, I've fair knowledge of react-native and haven't upgraded any react-native projects before.
My Challenge:
There were 42 dependencies in this project. Most of them are deprecated and unmaintained. So, a lot more work to do. I've gone through each and every dependency repository and issues page on the Github repo to check version compatibility.
What I understood was that we don't have to upgrade all the dependencies. We only have to upgrade the one related to react-native only. I've divided the dependencies into 2 categories. Pure JS libraries (ie like moment.js, we could use those in Reactjs, Nodejs, Angularjs, etc..) and react-native libraries.
I've decided not to touch the pure js dependencies unless having issues with the old version. Then started working on other dependencies to find v60+ support.
Note:- Please read about Autolinking of dependencies.
What's next:
We have to collect the current status of the other repositories. I've gone through npm and Github repo to check the details of the rest of them. I've maintained a google sheet to track the status of the dependencies.
What did I look at in the dependency repo?
There are possibilities for three questions!
- Can we use the same repo after the upgrade?
- Will it have support for v60+?
- Did it migrate to another repo?
You can answer these questions if you have gone through the Readme and issues in Github carefully.
Experiment 1:
I have tried the react-native upgrade tool to know the basic template changes that happened in react-native. I thought it is easy to upgrade that basic template changes first. But unfortunately, I'm failed and not even reaching the splash screen after the changes in the basic template.
Experiment 2:
Create a new project and add the whole dependencies with new versions. Add the source code to the new repo (In my case all the source files are in src folder). Tried to pass the splash screen. After a lot of trial and error, I would be able to reach the first screen. (Some of the library imports are commented out to bypass some errors). The only part that I've completely rewrite was react-navigation because its version was v1 and would have upgraded to v5.
After reaching the first screen you could easily complete the upgrade.
In my case, some of the deprecated react-native dependencies worked without any issues.
My Conclusion:
- Successfully migrated the react-native project
- We should be careful when integrating a 3rd party dependency into our project (Please do some research before using any)
- Keep an eye on react-native updates.
Top comments (0)