Upgrading React-native from 53.3 to 59.10
Ahmed Reda
Posted on January 12, 2020
Upgrading react-native to a newer version is considered one of the greatest cons of it as it requires a lot of manual work and may be very bug prone, in short it’s tedious.
In newer versions of react-native (60+) they introduced an automatic upgrading tool based on rn-diff-purge but currently we do all the work manually.
Best way to upgrade React-native app before 0.60
Using rn-diff-purge
Simply it’s a tool that is used to show the differences between two different react-native projects versions by creating a new project for each version and comparing the changes but you have to apply the changes manually.
https://react-native-community.github.io/upgrade-helper/
But unfortunately it’s not as easy as only applying these changes, after applying the changes you will try to run your project and it probably won’t compile successfully.
Why?
Having an app built with react-native you probably have many dependencies, with the changes that happen in the react-native new version there might be some changes that must be done in the libraries so you have to upgrade to the latest supported version of these libraries.
For example after react-native upgrades it’s own gradle version used in the app it might break some dependencies that depends on the old gradle version.
Many problems are easy to fix but there were some errors/crashes that their solutions are not very easy to find by searching.
I faced some of these kinds of problems and I've managed to get over them and i’m here to pass this knowledge as it might help someone someday.
The release build hangs at :app:bundleReleaseJsAndAssets
This problem was very exhausting, I’ve made a lot of searches without any result, I’ve tried deleting some of my assets thinking that they are corrupted and they make the release build hangs but nothing happened, Someone suggested to delete the realm generated jest test files as they may confuse the builder but i didn’t have any of those files.
Finally after playing for a while I've managed to fix this by upgrading the version of watchman to latest 4.9.4
Random crashes of the application on startup
I hate these kind of crashes as it’s hard to trace down the main problem causing it, Just give me a damn exception! :D.
You need to see the logs on the native side so you can find the reason for the crash, In my case it was crashing on android so by running
Adb logcat *:E
I found that the app crashes with a android.os.DeadObjectException exception, still no idea what is the real cause of this, After tweaking for a while we thought that Realm may cause this kind of problem so we tried to upgrade realm and finally the app no more crashes with a DeadObjectException.
Network request failed on release build (Android)
When trying to login or making any request with the app i got this error, The reason for this was that from api 28 it’s only allowed to make requests over https not http.
Our test server was still running over http so i have fixed this by
adding android:usesCleartextTraffic="true" to ./anroid/app/src/main/AndroidManifest:
<application
...
android:usesCleartextTraffic="true"
...>
These are only some of the problems I faced, the rest of the problems were intuitive to solve.
What's next?
Upgrading react-native to 0.60+ which introduced androidX and autolinking.
Conclusion
Upgrading react-native is hard indeed but if you upgraded it constantly it would be much easier as you would only have much smaller problems to fix.
For me it was better to make small jumps instead of upgrading react-native from 53.3 to 59.10 instantly (53.3 -> 55.4 -> 57.8 -> 59.10)
Also i would like to thank Anas Hafez for helping me with upgrading.
Posted on January 12, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.