Best way to upgrade react-native project

Question

I have a question about upgrading react-native version. We have some choices to upgrade but I don't know differences.

1) react-native upgrade

2) react-native-git-upgrade

3) npm install react-native@latest --save then react-native run-android or react-native run-ios

I used third way for my project because I need to maintain my files in the android folder like MainActivity.java, MainApplication.java, AndroidManifest etc.

could you please describe differences between these ways?

Solution 1

TL;DR

First, you should check out the latest options for upgrading from facebook.

If none of those work for you:

• Increase version of react-native in your package.json
• run npm install (or yarn if you're using that)
• run react-native upgrade or possibly react-native upgrade --legacy

Explanation

Here I address each of the upgrade options you asked about.

1) npm install react-native@latest --save then react-native run-android or react-native run-ios

As you probably know, the run-* commands here don't perform any type of upgrade.

Meanwhile, npm install --save <library>@<version> is just the command to put a library into your package.json, or update the version of an existing library. This is how you would upgrade the version of any typical library in your package.json. If that's all there was to upgrading RN, there would be no fuss amongst the community about the difficulty of upgrading. There's much more work to do.

If this is the only step you take in upgrading, the new version of react-native will be downloaded to node_modules, but it should fail and complain about many things:

• react dependency needs to be upgraded as well
• Files under your ios and android directories will not be in the state which the latest react-native expects. For example, if you upgrade from react-native 0.52 to 0.59, you will have gradle 2 while your react-native library expects gradle 4.
• Your other dependencies might not work with your newer version of RN. For example, here is a warning from npm install after I did my upgrade:

npm WARN [email protected] requires a peer of react-native@^0.50.4 but none is installed. You must install peer dependencies yourself.

As you can see, I need to upgrade native-markdown-renderer as well, since it requires RN 0.50 but I've upgraded to 0.59. Some libraries might work in this mismatched state, but that is your risk to take.

2) react-native-git-upgrade

From what I understand, the RN team had too many problems with this product and no longer want us using it. I'm guessing this is why it doesn't work at all for most of us.

3) react-native upgrade

This will update the version of react-native in your package.json, but then also bring you through a set of guided CLI prompt as it modifies the files in your ios and android directories. But how will this guide handle conflicts between the new incoming files and your existing files? You likely have some changes in there you want to keep.

Newer versions of react-native upgrade are said to allow you to perform a diff and merge, but I haven't seen that. When I ran it, it intended to clobber my entire old file with a new one, and it showed me the path on my local file system to the "new" version that would overwrite my old one. So I used my own diffing tool to just diff between the new incoming file and my existing file. If you lack a diff tool, I use p4Merge. So, as you go through the CLI guide, just do a diff between your existing file and the path to the new file it gives you, and do that one by one, adding necessary new lines to your files. If you made some changes, answer "no" to the prompt so that you can keep your old file (with the modifications you just made). If you don't have anything worth keeping in the file, answer "yes" and let the guide simply overwrite and clobber your old file.

When this command is complete, your ios and android directories will be updated. For example, gradle will be upraded from Gradle 2 to Gradle 4.

You may hit the bug I did, which causes this command to keep upgrading you to an OLDER version rather than the latest. In this case, you need to instead run: react-native upgrade --legacy

Solution 2

If it's a smaller project just create a new react native project using 'npx react-native init yourprojectname --version X.XX.Xt' and then copy the source folder of your older project into the new project. Then try running it in android or ios using 'npx react-native run-android' or 'npx react-native run-ios'. If there are any runtime errors but no build errors, then update the npm packages accordingly. Note: This is applicable for small projects because larger projects may contain many 3rd party dependencies. :)

Comments

[Bill]

Facebook offers a pretty good explanation facebook.github.io/react-native/docs/upgrading.html

[Sinapcs]

It suggested using react-native-git-upgrade but it ruined my project. I don't know what is the disadvantages of 3rd way I'm using?

[Bill]

there were likely some conflicts that happened when you tried to upgrade, were you able to resolve them successfully? Either way, since you chose the 3rd option, consider running react-native upgrade afterwards

[Sinapcs]

Yes, I upgraded other packages manually and fixed conflicts successfully. I should try react-native upgrade and compare changes. thanks

[MasterLuV]

i got conflict and can't build on android project