Technology is evolving at a very fast pace. The ideas we’ve dreamt of yesterday are now the features of the smart devices we’re using at the moment.
Like every tech and framework, React Native community keeps upgrading React Native to make your applications compatible with device’s features. Launch of every new version of React native gives developers access to more APIs, developer tools, and features to make applications more interactive and user-friendly.
We know upgrading is tedious task but its not something you can delay for longer than few months. With each upgrade there comes the patch for bugs you’ve detected earlier and some new features. It’s a never ending cycle. In this blog you will learn to upgrade React native version in existing project. Further, we will share some tips to remember while debugging for your RN app.
How To Upgrade React Native Version In Existing Project?
You can follow one of the two ways to upgrade your react native project:
1. Using React Native CLI
2. Using React Native upgrade tool
Now, each of the above-mentioned approaches has its own pros and cons.
Upgrading with React Native CLI is a one-step operation and takes lesser time. But, it doesn’t reveal the compatibility of dependencies the newer version support. On the other hand, React Native upgrade helper shows the updates made in each of the files in the upgrade package. Though it involves upgrading manually, which is a bit time taking, it ensures greater accuracy.
Sharing a few tips before you get started
- Do check release notes for the version you are upgrading to. Make a mental note of dependencies you believe will be affected by this upgrade.
- Go through the changelog while debugging to take second look at changes made.
- Checking repo of issues reported by other developer while upgrading can be a lot helpful in fixing errors in the meantime rather starting the research from scratch.
- While doing major upgradess don’t make a direct jump to latest version. Going step-by-step can help you track progress and compatibility of dependencies much easily.
- Make time estimation and set tentative timelines to ensure everyone in the team is aligned.
- While using React Native version upgrade helper make sure it’s updated per the latest version to minimize hassles.
Also Read: React Native Tutorials — Learn to Build Native Mobile Apps with React
What is React Native Upgrade Helper?
React Native Upgrade Helper is a web tool that assists in upgrading your apps to the latest version by giving a detailed view of updates made in two versions. You can view the comments and changes made in each of the files in the package to get understanding of dependencies and resolve the conflicts hand-in-hand.
How to upgrade react native to latest version?
Follow below steps to upgrade your existing react native projects to the latest version using React Native Upgrade Helper.
Also Read: What Are The Pros and Cons of Using React Native For Android?
1. Go to React Native Upgrade Helper on RN community. You will see an interface like this.
2. Choose the version:
Type name of your app. Mention the current version of your React Native app and the latest version you would like to upgrade your app to. You will find latest version set there by default. Now, click on “Show me how to upgrade!” From here you can see the modifications made in each of the package files.
3. Upgrade dependencies:
Now, one by one you can check for the dependencies and see their impact on other functionalities before upgrading them to the latest version. Install JS and native dependencies. Let’s say, react-native and react have changes, you can install them running yarn add command. Don’t forget to mention to version you are upgrading to.
[code]
# {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff
yarn add react-native@{{VERSION}}
yarn add react@{{REACT_VERSION}}
[/code]
4. Upgrade your project files:
There can be several files in the package impacted by version upgrade, you can check each of those and update manually by copying and pasting the code.
5. Build & debug:
Once done you can rebuild your project and perform debugging to check errors coming in the meantime. Take build in debug mode and check in staging environment before pushing the build in the release mode. You can deploy staging on your private store to ensure it doesn’t impact operations when made live.
Is Your React Native Upgrade Tool Up-To-Date?
Upgrade helper relies on rn-diff-purge to fetch and show differences among two versions. While upgrading your React Native app with React Native upgrade helper make sure RN upgrade helper is updated to upgrade. Though, it’s already upgraded, you can check that and update the upgrader if required.
Follow below instructions per your current version to update RN upgrade helper:
For version >= 0.68
CircleCI job pushes release link to trigger GitHub action.
For version < 0.69
You can trigger GitHub action via CURL running below commands.
[code]
# Update the "version" with your version and provide your PAT
curl -X POST -H "Accept: application/vnd.github.v3+json" \
https://api.github.com/repos/react-native-community/rn-diff-purge/dispatches \
-d '{"event_type":"publish", "client_payload": {"version": "0.67.0"}}' \
-H "authorization: Bearer <PAT>"
[/code]
Wrapping Up
Thanks for being with us till now! Hope this have helped you understand react native development tool.
Are you looking for professional assistance to upgrade your existing project? If so, RNDC will be delighted to help you. RNDC is React Native app development company with expertise in the React Native tech. You can share your concerns and project details with us here. We will definitely respond you within 2-3 business days. also, read more What are the benefits of hiring a React Native App developer.