Upgrade React Native version of the existing project is tough, but it’s also feasible

Last week, I had to overcome a big task which is upgrading React Native version of an existing project.

It was tough, but I made it.

So I’m going share the lessons I’ve learned through this.

disclaimer: This is an upgrade example of react-native 0.42.3 to 0.52.0 but not complete upgrade guide for every cases because I know there will be specific obstacles for each project.

Before we start, below is our project setting.
- Initialized with CRNA
- Ejected due to use the native bridge
- Many dependencies on npm packages
- Using flow-type
- Using CocoaPods for library management for iOS.

Follow the official instructions

In the beginning, I was trying to follow the official instructions.

• Failed with react-native-git-upgrade
  This made conflicts in project.pbxproj file for iOS.
  It seems to be broken since I saw an error like this when you run the application.
  WARNING: Unable to open project file ‘/Users/***/temp/***/ios/***.xcodeproj’ in workspace ‘***.xcworkspace’.
  It’s hard to detect what went wrong.
• Failed manual upgrade
  Based on dependencies matrix, changed the react-native and react versions in package.json.
  I see a lot of error in this result.
  Mostly react-native link has been broken.

Initialize a new project and copy and paste the existing sources

This isn’t ideal but this worked for our project.
That said, the entire process was not straightforward.

So I will specify what I did in this process.

• Initialize a new project
  Upgrade my global create-react-native-app to the latest version.
  Create a new project with the same project name in the different location from the original and immediately ejected the project.
  Also, run react-native link.
• Upgrade versions of dependent libraries
  Check the README for each library whether working with the version of react-native I intend to use.
  Change the versions in the `package.json` accordingly.
• Copy and paste related files for javascript
  Manually copy and paste everything I wrote in javascript besides images, setting files.
• Copy and paste related files for iOS
  Manually copy and paste everything I wrote in ./ios.
  Open up the Xcode, include the copied files.
  Manually copy the project setting on the Xcode like Build settings, plist, localizations.
  I didn’t overwrite them as a file because project setting structure in `xcodeproj` file might different from Xcode version.
  So this way will be “safer” way to update them.
  For the same reason, open up the `storyboards` and copy and paste UI objects.
  Also, don’t forget to edit the project scheme.
• Copy and paste related files for Android
  Manually copy and paste everything I wrote in ./android.
  Change settings in the android/app/build.gradle file and android/app/src/main/AndroidManifest.xml manually.
• Stop using deprecated components and use suggested one in new React or React Native
  Some component has been deprecated.
  e.g. Image -> ImageBackground, React.PropTypes -> PropTypes
• Solve warnings
  Solve warnings coming from new React or React Native.
  In this point, my application works on the simulator as the way before.
• Fix for lint, Flow, unit test
  Since the version has been up for these, I needed to fix new errors one by one. Most of them were straightforward, but solving Flow error was the hardest.
  I’m not gonna explain what solve the issues one by one, here’s the related fixes on .flowconfig in case you want to refer.

Overall, I enjoyed this process since I had many findings.

I hope you enjoy it too:)