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

Difference between Flutter Module and Flutter Plugin?

-
Image
Simply speaking, a Flutter plugin makes native functionality available to Flutter. At the same time, a module help integrates Flutter into an existing native application. That's all. But that's not the whole story. There's much to it. Keep on reading to understand much better. How to build a Flutter plugin? The Flutter plugin is like a wrapper to the native code, such as Android and iOS. For creating a flutter plugin, developers use Swift or Objective-c for iOS and Kotlin or Java for Android to write respective codes.  Flutter can do similar things to any native app using message passing and platform channels. It does that by instructing the native iOS or Android to develop an action and return the result to Dart. Moreover, developers can collect more details using the directory structure of the Flutter application . One can also notice the iOS and Android directory and the lib directory consisting of a Dart code. With that, it also has iOS and Android hosts that help the n
Read more

Which Is Best In 2022: Native or Cross Platform Development?

-
Image
We know that mobile app development firms' revenues are reaching top-notch yearly. In particular, mobile games gained $89 million, and app revenue reached $133 billion last year. The expected results of the upcoming market are excellent. The total number of mobile app developers will reach 3.7 billion worldwide.  So, it's better to start investing in mobile apps and game development now!!! But lots of people are confused between Native and Cross-platform development. Which one to select? I will be clearing your thoughts in this blog.  So, let's get started with Native app development first. What is Native App Development? Native app development means building an app for a single platform, like Android or iOS. The entire App is developed with programming languages and tools for the specific forum.  For example: to develop Android apps, Java or Kotlin are used, and to create iOS apps, Swift and Objective-C are used.  You can check out some project examples here.  Now, let
Read more

Benefits of Progressive Web Apps (PWAs)

-
Image
  Progressive Web Apps (PWAs) are considered the most influential trend in Mobile Web Development . Google created PWA, and it quickly gained steam to figure out the future direction for mobile apps. PWAs look and behave similarly to mobile applications and have more additional features. PWAs can send push notifications, access the mobile device's hardware, and work offline or in an unstable connection. Users can easily add it to their smartphones' main screen. Global companies aim to deliver top value to their customers through PWAs technology. Here are a few examples of PWAs that show the reach of this technology : Starbucks Pinterest Make my trip YouTube Music UBER PWAs, are mobile applications delivered to an end-user through Google Chrome, Firefox, and Microsoft Edge. However, what makes PWAs unique as opposed to traditional websites or mobile web apps is that PWAs behave almost entirely like native applications on your smartphone. Let's see the various benefit
Read more