How to upgrade React Native to the latest version

If your project version is older than React Native 0.63, Wake up and probably start thinking about upgrading it to the latest one which is 0.63.

50-60% Developer’s mood as below image.

However, this is not an easy task for a developer, it will sometimes break some functionality but for long term support we have to stay with the latest version always. I’ve spent quite a few days with ups and downs, trying many methods, but success seems far away.

Luckily, I got there from a reference link, and now I can make this process much easier for all developers.

Two approaches of upgrading to React Native 0.63:

1. Upgrade a React Native app in existing projects.

This is not an official guideline prepared by Facebook Official. The steps from the official documentation didn’t work in my case.

The easiest way to upgrade is to do it in the existing project.

Somebody made a fantastic tool named React Native Upgrade Helper. This is a tool that compares different versions of react-native and shows you the differences from the source code level, so it is easy to make changes accordingly to the build.

Steps for upgrading a React Native from version 0.61.0 to 0.63.0:

• Go to the link page (link to diff between RN 0.61.0 and 0.63.0).
• Make changes according to the differences, manually.
• Run yarn/npm to update versions.
• Try to build and run the application.

If there are no errors shown, man you such a lucky person.

If there are some errors, most of them are due to the libraries you are using. The best way to fix it is to google those issues and look for solutions in Github.

Must Read: React Native App Development: The Next Generation Mobile App Development

2. React Native app by creating a new project & update it.

The second, the best way, to is creating a new project in the latest react native version.

After that, you can transfer all the files from the old repo to the one you project which have just created.

I will explain to you exactly how to do it at the lowest cost and also how to resolve any errors encountered on the way, so you won’t spend endless hours investigating it.

Step 1: Upgrade the React Native library

yarn global add react-native@latest

That line of code upgrades your React Native global library or installs a new one if you did not install react native library before.

Step 2: Create a new React Native project view terminal

After upgrading the node module with the latest version, you have to create a new React Native project with below command. Use the command below:

react-native init MobmaximeApp

“MobmaximeApp” it’s a new RN project name. You can put any name out there if you want.

Step 3: Install Cocoa Pods

You have to get Cocoa pods installed and install the pod created for your iOS project check below command.

sudo gem install cocoapods

In the next step, install the pod file generated in your iOS project with below command.

cd ios && pod install

I assume you are in your new react native project so go to the iOS project (cd ios) and then install pods.

Step 4: Upgrade XCode

If your XCode is in the version below 10, then you need to upgrade your XCode to a version that is compatible with your Mac OS which need to be latest. You can do it easily using the App Store.

The app should be built successfully. Additionally, use below command to compile projects for iOS.

react-native run-ios

Step 5: Migrate source code

If your new application works fine, the next step is to move your source code files from your old react native app to the newly created and upgraded one.

Follow the steps below to do it correctly:

• Copy your src folder (assuming your source code is there) to the new app.
• Copy App.js and index.js from the old to the new one.
• Copy all assets (like images, icons, splashscreen).
• Install all packages Just change React and React Native Version.

These are the basic ones needed to do a basic code migration.

If you have something more complicated, you might need to copy more configs, code files or do extra installations.

You may also need to go through some files and move the differences between old and new apps. But remember, you must be very careful:

For iOS:

• Podfile- add pods from the old project and again run pod install
• AppDelegate.m – add external libraries (e.g. navigation)
• Info.plist
• Trying to enable the same options in XCode as in the old version.

For Android:

• settings.gradle – add repositories
• android/build.gradle
• android/app/build.gradle – add dependencies
• MainActivity.java
• MainApplication.java – add external libraries

Conclusion

There is no ideal way to upgrade react-native.

Steps presented above are just for simple, and not too complicated apps. For more complex ones, you might obviously encounter more issues.