Lat­est Updates In React Native & Their Benefits

20 Apr 2021

React Native Com­mu­ni­ty is spread across the globe to con­nect devel­op­ers and React Native users with each oth­er. Oth­er than the Glob­al Sum­mits, Con­fer­ences, and annu­al meets, the React­Flux chat, forum-like groups, and com­pa­ny-based com­mu­ni­ties; enable com­mu­ni­ca­tions about the plat­form & under­stand it in a bet­ter man­ner. More­over, this wel­comes more queries and con­cerns regard­ing the plat­form, fea­tures, and its com­pat­i­bil­i­ty with oth­er com­po­nents & sup­port­ing libraries avail­able on the web. 

Tech­nol­o­gy keeps evolv­ing & so is the React Native plat­form. That’s what makes it a choice of sev­er­al peo­ple, includ­ing both users and the devel­op­ers. Devel­op­ment is a nev­er-end­ing cycle. With every update & need of the indus­try, the arrival of updates is a sure shot. Here, we will be talk­ing about the React Native updates that the com­mu­ni­ty came recent­ly in 2020 and the first quar­ter of 2021

The lat­est releas­es of React native in the reverse chronol­o­gy are: 

  • React Native 0.64- Sup­port of Her­mes on iOS 
  • React Native 0.63- Enabling Log­Box by default 
  • React Native 0.62- Sup­port of Flip­per by default 

React Native 0.64- Sup­port of Her­mes opt-in on iOS 

Ear­li­er, Her­mes sup­port was only avail­able for Android. Now, with the release of React Native 0.64 lat­est in March 2021, the sup­port extends to build­ing an iOS app as well. 

Her­mes is a JavaScript engine that is opti­mized to run React Native & impro­vise its per­for­mance. It helps by min­i­miz­ing the uti­liza­tion of mem­o­ry, reduc­ing down­load size & reduc­ing time to inter­ac­tive’ (TTI). 

React Native 0.64 comes with: 

  • It is enabling Inline Requires as a metro con­fig­u­ra­tion to improve the start­up time by delay­ing the exe­cu­tion. It per­forms Babel trans­for­ma­tion on input mod­ules and imports it to inline. It was avail­able as an opt-in con­fig­u­ra­tion for few years, and with this update, the option is enabled by default. 
  • React 17 is com­ing with a new JSX trans­form to impro­vise it to be able to use JSX with­out importing. 
  • Her­mes with Proxy Sup­port to enable com­pat­i­bil­i­ty in migra­tion of project pack­ages to make JavaScript engine default for Android. 

To make your React Native app com­pat­i­ble with the lat­est ver­sion 0.64, here are cer­tain soft­ware depen­den­cies to be addressed: 

  • Manda­to­ry- Xcode 12 and CocoaPods 1.10 
  • Node Sup­port rang­ing from Node 1012
  • Flip­per bumped to 0.75.1
  • Drop-in Android API lev­els rang­ing from 1620

React Native 0.63- Enabling Log­Box by default 

They were address­ing the issues of errors, warn­ing and log sys­tem with the redesigned ver­sion of Log­Box con­sid­er­ing pri­ma­ry goals of con­cise, for­mat­ted, and action­able logs. The Red­box, yel­low box designed Log­Box is set by default to attain the per­for­mance goals with the fea­tures includ­ing log noti­fi­ca­tions, code frames, com­po­nent stacks, stack frame was col­laps­ing, and syn­tax error for­mat­ting. LogBox.ignoreLogs() and LogBox.ignoreAllLogs() are depre­ci­at­ed from the API of Log­Box. With the next update of React Native 0.64, these options will be total­ly removed, so keep that in mind when upgrad­ing next. 

More­over, React Native 0.63 comes up with: 

  • Native colours that enable you to change the colour of the plat­form with the Plat­form­Col­or option and that of a dif­fer­ent but­ton with Dynam­ic­Col­orIOS for giv­ing the free­dom to cus­tomize your plat­form as per your choice. These acces­si­bil­i­ty set­tings are in addi­tion to the default themes set­tings of Light/Dark mode. 
  • Min­i­mized the com­pat­i­bil­i­ty checks by drop­ping iOS 9 ad Node.js 8 sup­port to opti­mize the per­for­mance and imple­ment the lat­est secu­ri­ty fixes. 
  • Change of iOS Lauch­screen from xib to sto­ry­board to pro­vide app’s launch screen com­pat­i­ble with all the iPhone screens. 
  • Enables trou­ble-free ren­der­ing of <View/> inside any <Text/> with­out any size restric­tions on these components. 

React Native 0.62- Sup­port of Flip­per by default 

From the ear­ly months of the 2020s, React Native ver­sion 0.62 enables the sup­port of Flip­per by default. It is a devel­op­er toolset for debug­ging Android & iOS mobile apps, which is applic­a­ble for both exist­ing & upcom­ing apps. It is an exten­si­ble plat­form; you can pull the plu­g­ins from the mar­ket­place & install cus­tom ones as per your project’s require­ments. The pro­vid­ed fea­tures of this tool enable metro actions, view­ing crash reports, an inspec­tion of native lay­out out­put, logs, data­bas­es, and preferences. 

With React native ver­sion 0.62, we moved from Apple TV to react-native-tvos to bring Apple TV in line with oth­er plat­forms, name­ly React Native Win­dows and React Native macOS. If you are an exist­ing user of Apple TV projects, you need to upgrade your Apple TV project to use react-native-tvos 0.62

In addi­tion to these fea­tures, ver­sion 0.62 is com­ing with: 

  • The dark mode gives you the free­dom to switch between the colour scheme. You can access it from the Appear­ance module. 
  • The exten­sion of Upgrade helper tools from ver­sion 0.61 to Upgrade-Sup­port in this ver­sion. It a GitHub issue track­er that sub­mits your issues regard­ing your con­tin­ued projects to receive assis­tance from the community. 
  • Acces­si­bil­i­ty improve­ments like the addi­tion of acces­si­bil­i­ty­Val­ue, miss­ing props on Touch­ables, onS­lid­ing­Com­plete acces­si­bil­i­ty events, change of switch­ing element. 
  • Tex­tIn­put changes by removal of onTex­tIn­put to assure W3C compliance. 
  • Removal of Prop­Types from core com­po­nents to min­i­mize the size of React Native core app size. 
  • Upgrade to React Dev­Tools v4 for per­for­mance gains, nav­i­ga­tion options, and sup­port for React Hooks. 

Get ben­e­fit­ed from React Native updates by climb­ing the lad­der of Mobile app devel­op­ment for your busi­ness on  React Native plat­form. To dis­cuss your project require­ments, write to us at [email protected]

Is this artical helpful?
Share this post :