Upgrading react native to latest version

Question

I have an application which runs on react-native 0.49.3 I want to upgrade to the latest version which is v0.57.4.

Should I incrementally update it? For example 0.49 -> 0.50 -> 0.51 etc Or I can just update it to to the latest version?

Do you suggest using react-native-git-upgrade or rn-diff?

Answer 1

1. You will need @react-native-community/cli to upgrade to the latest version of react-native, sadly not mentioned anywhere.

   npm install -g @react-native-community/cli

2. Install react-native-git-upgrade

   npm install -g react-native-git-upgrade

3. Now go to your project.

   cd your-react-native-project

4. Now you can run the upgrade command.

   react-native upgrade

Answer 2

My advice is to upgrade to the latest version. There will be enough dependency issues anyway so you're best dealing with them only once.

From the React Native upgrade page (https://facebook.github.io/react-native/docs/upgrading)

you can run:

npm install -g react-native-git-upgrade

npm install -g @react-native-community/cli

react-native-git-upgrade

UPDATE 2: The new command is

npx react-native upgrade

but I believe this is best for upgrading from more recent versions. If you have older versions, the following upgrade process still applies.

UPDATE: I've never had a problem before with upgrades, but recently joined a project where we upgraded from an old copy of React Native 0.44.3 to a newer version (first to 0.57.8, then to 0.55.4, then to 0.58.3 while struggling with stability) and discovered that it's not always as easy as running those commands. Be warned that this could be a long, tedious process, especially if you have not upgraded regularly and have a long gap between upgrades. In this case, it was 18 months since they had upgraded.

First, there have been changes to the upgrade process itself (react-native upgrade, to now react-native-git-upgrade) itself. So, if you're using a version that's a year old or more there could be some manual discrepancies that you'll have to go through. Some are spelled out after running the react-native-git-upgrade command, and some are not. I was amazed at the number of people on Stack Overflow going through the same undocumented circular issues of a seemingly innocent upgrade. I was not expecting that. I'd be OK with Facebook not adding any features for 6 months and simplifying the upgrade process before moving on.

Second, make sure your version of React Native uses the right dependencies. Later versions of the upgrade tool (react-native-git-upgrade) try to account for this, but double check at https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see if the version of RN that you're upgrading to requires a specific dependency. Some do while others do not.

Next, library hades is real, depending on how big your project is. In our case, several modules in use in our 0.44.3 version have now been deprecated or no longer maintained or even work differently with the later versions of RN. I didn't consider this enough when starting this process. This caused several instances of code rewrite just to upgrade!! Yikes!

Also, just as some versions of React Native require specific versions of dependencies, other modules require specific versions of some dependencies. Worse, sometimes these are incompatible and conflicting versions, of various libraries. Save some time and write a user story or two to account for this. Go through every module you're using and see if there are any compatibility statements on their GitHub page. Some Readme files will tell you to use certain versions of their module with certain versions of React Native. Others won't and you may find out later there are requirements. But even going through this process and anticipating issues, you'll thank yourself later.

Once you're up to date and stable, consider upgrading regularly to minimize the upgrade nightmare that I just went through.