React Nat­ive Upgrade Help­er: Stream­line Your App Upgrades with Ease

Tech­no­logy is evolving at a very fast pace. The ideas we’ve dreamt of yes­ter­day are now the fea­tures of the smart devices we’re using at the moment. 

Like every tech and frame­work, React Nat­ive com­munity keeps upgrad­ing React Nat­ive to make your applic­a­tions com­pat­ible with device’s fea­tures. Launch of every new ver­sion of React nat­ive gives developers access to more APIs, developer tools, and fea­tures to make applic­a­tions more inter­act­ive and user-friendly. 

We know upgrad­ing is tedi­ous task but its not some­thing you can delay for longer than few months. With each upgrade there comes the patch for bugs you’ve detec­ted earli­er and some new fea­tures. It’s a nev­er end­ing cycle. In this blog you will learn to upgrade React nat­ive ver­sion in exist­ing pro­ject. Fur­ther, we will share some tips to remem­ber while debug­ging for your RN app.

How To Upgrade React Nat­ive Ver­sion In Exist­ing Project?

You can fol­low one of the two ways to upgrade your react nat­ive project: 

1. Using React Nat­ive CLI

2. Using React Nat­ive upgrade tool 

Now, each of the above-men­tioned approaches has its own pros and cons. 

Upgrad­ing with React Nat­ive CLI is a one-step oper­a­tion and takes less­er time. But, it doesn’t reveal the com­pat­ib­il­ity of depend­en­cies the new­er ver­sion sup­port. On the oth­er hand, React Nat­ive upgrade help­er shows the updates made in each of the files in the upgrade pack­age. Though it involves upgrad­ing manu­ally, which is a bit time tak­ing, it ensures great­er accuracy. 

Shar­ing a few tips before you get started

• Do check release notes for the ver­sion you are upgrad­ing to. Make a men­tal note of depend­en­cies you believe will be affected by this upgrade. 
• Go through the changelog while debug­ging to take second look at changes made. 
• Check­ing repo of issues repor­ted by oth­er developer while upgrad­ing can be a lot help­ful in fix­ing errors in the mean­time rather start­ing the research from scratch. 
• While doing major upgradess don’t make a dir­ect jump to latest ver­sion. Going step-by-step can help you track pro­gress and com­pat­ib­il­ity of depend­en­cies much easily. 
• Make time estim­a­tion and set tent­at­ive timelines to ensure every­one in the team is aligned. 
• While using React Nat­ive ver­sion upgrade help­er make sure it’s updated per the latest ver­sion to min­im­ize hassles. 

Also Read: React Nat­ive Tutori­als — Learn to Build Nat­ive Mobile Apps with React

What is React Nat­ive Upgrade Helper? 

React Nat­ive Upgrade Help­er is a web tool that assists in upgrad­ing your apps to the latest ver­sion by giv­ing a detailed view of updates made in two ver­sions. You can view the com­ments and changes made in each of the files in the pack­age to get under­stand­ing of depend­en­cies and resolve the con­flicts hand-in-hand. 

How to upgrade react nat­ive to latest version? 

Fol­low below steps to upgrade your exist­ing react nat­ive pro­jects to the latest ver­sion using React Nat­ive Upgrade Helper.

Also Read: What Are The Pros and Cons of Using React Nat­ive For Android?

1. Go to React Nat­ive Upgrade Help­er on RN com­munity. You will see an inter­face like this.

2. Choose the version: 

Type name of your app. Men­tion the cur­rent ver­sion of your React Nat­ive app and the latest ver­sion you would like to upgrade your app to. You will find latest ver­sion set there by default. Now, click on ​“Show me how to upgrade!” From here you can see the modi­fic­a­tions made in each of the pack­age files.

3. Upgrade depend­en­cies:

Now, one by one you can check for the depend­en­cies and see their impact on oth­er func­tion­al­it­ies before upgrad­ing them to the latest ver­sion. Install JS and nat­ive depend­en­cies. Let’s say, react-nat­ive and react have changes, you can install them run­ning yarn add com­mand. Don’t for­get to men­tion to ver­sion you are upgrad­ing to. 

# {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff
yarn add react-native@{{VERSION}}
yarn add react@{{REACT_VERSION}}

4. Upgrade your pro­ject files: 

There can be sev­er­al files in the pack­age impacted by ver­sion upgrade, you can check each of those and update manu­ally by copy­ing and past­ing the code. 

5. Build & debug: 

Once done you can rebuild your pro­ject and per­form debug­ging to check errors com­ing in the mean­time. Take build in debug mode and check in sta­ging envir­on­ment before push­ing the build in the release mode. You can deploy sta­ging on your private store to ensure it doesn’t impact oper­a­tions when made live.

Is Your React Nat­ive Upgrade Tool Up-To-Date? 

Upgrade help­er relies on rn-diff-purge to fetch and show dif­fer­ences among two ver­sions. While upgrad­ing your React Nat­ive app with React Nat­ive upgrade help­er make sure RN upgrade help­er is updated to upgrade. Though, it’s already upgraded, you can check that and update the upgrader if required. 

Fol­low below instruc­tions per your cur­rent ver­sion to update RN upgrade helper:

For ver­sion >= 0.68 

Circ­leCI job pushes release link to trig­ger Git­Hub action. 

For ver­sion < 0.69

You can trig­ger Git­Hub action via CURL run­ning below commands.

# 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>"

Wrap­ping Up

Thanks for being with us till now! Hope this have helped you under­stand react nat­ive devel­op­ment tool. 

Are you look­ing for pro­fes­sion­al assist­ance to upgrade your exist­ing pro­ject? If so, RNDC will be delighted to help you. RNDC is React Nat­ive app devel­op­ment com­pany with expert­ise in the React Nat­ive tech. You can share your con­cerns and pro­ject details with us here. We will def­in­itely respond you with­in 2–3 busi­ness days. also, read more What are the bene­fits of hir­ing a React Nat­ive App developer.