What's New in React Native 0.69?

-

 

React just released Native 0.69, with several updates with other things. It got a good improvement in performance and memory usage in React Native apps. Well, it will suit React native app development company performance improvement. This blog is about an overview of React Native 0.69, its updates, and why upgrades matter. Let's see the highlights first, and later we will see them in detail.


Highlights of React Native 0.69

  • Version 12.4+ is now necessary because iOS/tvOS SDK 11.0 support is being phased out.
  • Improved M1 user support for Android developers
  • Adding a new .xcode.env configuration file to source the node executable more precisely.
  • React Native now uses the most recent Android 11 status bar API
  • Support for C++ 17
  • iOS debug menu got a new hotkeysEnabled option
  • The primary version number of React Native CLI has been increased to 8.0
  • Now no support for the console.disableYellowBox
  • Unwanted prop types have been eliminated (cdfddb4dad, 3e229f27bc, 10199b1581)
  • The deprecated function removeListener was taken out of appearance as of RN 0.65.
  • If you previously used SegmentedComponentIOS, you must switch to a third-party library, such as segmented-control (235f168574)



React 18: What's New?

The latest version of React Native 0.69 now uses React 18. React Native is attached to React Internals, and updates/releases are tied to versions of React. It's also seen that React Native releases lag behind React releases. Now, React Native 0.69 is using the latest version of React 18. 


React Native releases lag React releases, so React Native could not use it as full advantage of the latest versions. It required developers to be one or two versions behind releases. It causes us to miss API improvements, and performance improves with the React Native app development cycle. 

Other new updates are already released in the previous version of React Native, like Dark mode; you can find it Here. 


Now, with React Native 0.69, devs and the whole React Native app development company can enjoy React 18 features like:

  • New hooks
  • Performance improvements
  • Concurrent React
  • Improved suspense functionality


This update is essential; hence it's a critical step to sync with React development. 


Bundled Herms

Do you use herms in your React Native app development? Hems is a Javascript engine for React Native that uses less memory and performs better than default engines. Like React, Hermes depends on your specific React Native version. Hermes is now included with React Native as of version 0.69, making building easier and guaranteeing that you're using the most up-to-date, compatible version of Hermes. 

If you are just a beginner and into React native app development, doing simple projects or native apps, you can get free help here-



Why Herms?

Hermes improves startup time, memory usage, and bundle size for React Native, which is a significant improvement. There is a chance of compatibility issues because it uses a different JavaScript engine. However, most of the kinks have been ironed out as Hermes has been around for a while. You might occasionally need to update other project dependencies to ensure Hermes compatibility.


The Rollout of New Architecture

The new architecture refers to a series of significant, ongoing architectural adjustments made to React Native that improves speed, adaptability, memory usage, and so much more. This new architecture can be enabled manually, and it's Opt-in. You can later enable it in your Native app or React Native app development. 


It is vital to note that the new architecture consists of three main parts: the JSI, Fabric, and TurboModules, both of which must be manually enabled in your project. 


JSI

JSI is a new layer of interoperability between native code and JavaScript. Before the JSI, messages were sent via asynchronous JSON. Now JSI makes it possible for native synchronization between Javascript and Native code. It eliminates the use of JSON. It lessens memory use.


Fabric

In place of React Native's "shadow tree," Fabric is a new rendering engine that runs in C++. Similar to the shadow DOM for React on the web, the shadow tree is a native illustration of the view hierarchy of your React Native app. It renders native views on screens and keeps track of hierarchy changes. The Fabric improves this crucial component of React Native functionality in terms of performance, memory usage, and stability.


TurboModules

The new system for integrating JavaScript and native modules is known as TurboModules. By making native APIs accessible through JavaScript, React Native achieves native functionality. Developers create module wrappers around the native functionality to expose these APIs. Then they expose those wrappers via a JavaScript interface. With the help of the JSI, TurboModules uses dynamic, type-safe code generation of modules to make this module interaction easier to understand and more efficient.


Why TurboModules

We know that new architecture means better performance, flexibility, low memory usage, and responsiveness. At last, it is a better experience for users, developers, and React Native app development companies. 


Codegen

Codegen is a new static type checker included in the new architecture. Codegen defines interface elements used by turbo modules and Fabric. At build time, it will generate native code rather than run time. 



Upgrading React Native

It's very tricky to update React Native. The critical change is to edit/change the version of React Native and modules in file package.json. Now, run the package update commands: yarn, pod install). But this is not enough. 


You can check out React native upgrade tool to upgrade. It will show you everything you need to apply with your repo to upgrade. It will get you a complete list of changes you need to make, including libraries. 


If you are in React native app development and want to use Herms, you can enable it by seeing this guide. 



React Native 0.69 Is a Big Improvement

React Native 0.69 has many improvements and updates, from memory usage to performance improvement. Other changes are opt-in, so you must decide which to enable. These improvements are exciting for the React Native platform and React Native app development company, too, so it's great to be a React Native developer. 


If you are a beginner in React Native development and looking to build initial projects like the Native app, you can check out 4-react-native-app-projects-you-should-practice-as-a-beginner. 

Thanks for reading. Keep checking in for the latest updates. 

Location: United States

Comments

Post a Comment

Popular posts from this blog

How Data Analytics Boost Mobile App Development

-
Image
As per Statista Report, the number of mobile app downloads worldwide was 205 billion in 2019 and is forecasted to grow to 258.2 billion by 2023. More mobile app users produce large amounts of data. Raw/new data is unstructured, and wishes high-level analytics to munch down the numbers and develop valuable insights out of these numbers. Data Analytics & Big Data comes into action for further info on new data. Big data refers to any large and complicated collection of knowledge, and data analytics is the process of extracting meaningful information from data.  Its tools help  mobile app developers to gather, organize and evaluate different data sets to spot patterns in customer preferences. Developers will then leverage tremendous data insight to make various innovative mobile apps. Mobile apps change rapidly, contrary to computer apps. They're more popular because of the advantages of usage and simplified display. Hence, the developers must be exerting to deliver a novel and fas
Read more

Typography For a Better UI and UX

-
Image
  Did you ever observe how small things can make a big difference? For example, a pinch of salt can make a huge difference in a dish. Similarly, with mobile and web app development, the minute elements like fonts, typography, color, etc., make a big difference. The minor details can significantly alter and bring the best out of your app and website development efforts. It's known that 95% of the website's information will be in impactful copies, i.e-written content. Sheesh! 95% is massive! So you need to select the perfect font style for your website and mobile apps. This study of selecting a particular UI UX design becomes crucial for a UI UX design company. Similarly, choosing the correct blend of design elements for a mobile app development company and a web application development company elevates your digital products. Typography is the art of putting together typefaces into a readable format that is visually appealing to the readers. It includes the text of your title, d
Read more

Top 5 Web Application Development Trends in 2022 & Beyond

-
Image
Did you know when the Internet was born? It's 1983, and back in 1980 - 1990, a mind-boggling invention occurred at CERN (European Organization for Nuclear Research) facility in Geneva, Switzerland. The World Wide Web (WWW) gave us another mind-blowing thing. After that, in 2002, Stuart Morris developed slashdotslash.com, the world's first one-page web app. Today, more than 1.58 bn websites/web applications and more than 5 bn daily active users are trying their best to get the most out of the Internet.  These developments sparked the vision to create more web applications and propelled the development of new world-famous frameworks. Over the decades, web application development trends have evolved and continue to move to the next level occasionally. Innovative and out-of-the-world ideas in web development have yet to see a halt. New trends and technologies are being introduced daily to make web applications more dynamic, responsive, interactive, and fast to load. It makes us th
Read more