A few days back, around mid of March 2021, React Native 0.64-rc1 was released and soon the stable version will also be launched. Below mentioned are the new changes that the new version of React Native came up with,

Hermes on iOS

Hermes is an open-source JavaScript engine that is also lightweight and is created by Facebook for running the React Native Applications on Android. Some of the benefits of enabling Hermes are like the size of the application becomes smaller, start-up time is going to improve, and the app launch gets faster, usage of memory is reduced by ahead-of-time code optimization.

-Earlier Hermes was available only for Android but now it can be used on iOS as well for the React Native Applications.

– Before switching an existing project to Hermes, one should consider the below factors:

1)The existing project should be upgraded to use React Native 0.64 to ensure that everything goes as expected. You can Hire React Native Developers India  to upgrade your existing application or build cross-platform applications for your startups and enterprise.  After that only, one can activate the Hermes on iOS by typing below:

use_react_native!(

:path => config[:reactNativePath],

# to enable hermes on iOS, change `false` to `true` and then install pods

:hermes_enabled => true

)

2) Also, one should ensure that all the dependent gadgets and software are compatible with the new version and are not carrying the unsupported features.

3) One should also make sure that one is using only the matching versions as Hermes updates are strictly tied up with certain React Native versions.

View Hermes Traces through Chrome

One can already profile the existing React Native app running on Hermes. But with the new command, the users can convert the Hermes tracing profile to a Chrome tracing profile. The new command supports downloading the Hermes Sampling Profiler to a local machine.

react-native profile-Hermes [destinationDir] <flag>

Inline Requires feature is enabled by default.

-An innovative feature named Inline Requires is enabled by default in the new version of React, React Native 0.64. Although it was released in beta version in React Native 0.59 this time it is enabled by default.

-this automated version supports a large number of applications to perform aptly without actually doing anything.

-Inline Requires is a feature or can be called a Metro configuration that delays the execution of JavaScript modules till the time, they are used which consequently improves the start-up time.

-This feature is listed in the Performance section of the Documentation. Below is the command which we used earlier and what we use now,

Before:

import { MyFunction } from ‘my-module’;

const MyComponent = (props) => {

const result = MyFunction();

return <Text>{result}</Text>;

};

After:

const MyComponent = (props) => {

const result = require(‘my-module’).MyFunction();

eturn <Text>{result}</Text>;

};

Proxy support added to Hermes.

-In the new version of React Native, Proxy support is added to Hermes which enables compatibility with some of the known community projects like React-Native-Firebase and mobx. So, if any of the users are using any of the mentioned projects then they can easily switch to Hermes for their respective projects.

React 17

-React 17 does not add any new developer-facing features in it but strengthens the foundation which simplifies the upgradation process from an existing application to a newer version of React module.

-This can be achieved by mixing up two different versions of React on a single page which makes it very simple to upgrade the app component-wise. For example- one can decide to migrate most parts of the app to React 18 but decides to keep some of the lazy-loaded components on React 17 only.

However, upgrading all at once is considered to be an idealistic situation.

-New JSX transform is the main change in React 0.64 which enables the files to no longer import React to use JSX. This feature is completely optional and does not have to use it compulsorily.

-Under React 17, React will no longer attach the event handlers at the document level. But it will attach to a root DOM container into which at least the React tree is furnished.

const rootNode = document.getElementById(‘root’);

ReactDOM.render(<App />, rootNode);

Installation of React 17:

To install React 17 with NPM, run:

npm install react@17.0.0 react-dom@17.0.0

To install React 17 with Yarn, run:

yarn add react@17.0.0 react-dom@17.0.0

Also provide UMD builds of React via a CDN:

<script crossorigin src=”https://unpkg.com/react@17.0.0/umd/react.production.min.js”></script>

<script crossorigin src=”https://unpkg.com/react-dom@17.0.0/umd/react-dom.production.min.js”></script>

Native colors

Platform color and dynamic are the two new things added with this new version. On one hand, the platform colors allow users to use the native colors of devices from Android and iOS. While Dynamic color allows configuring the color as per the background and appearance mode of the mobile.

Below is an example of using the combination of both:

<View

style={{

backgroundColor: DynamicColorIOS({

light: PlatformColor(“systemBlueColor”),

dark: PlatformColor(“systemRedColor”),

}),

}}

/>

Inclusion of Log Box

In the beta mode of React Native 0.62, log box is enabled. It can be easily enabled by using the below code in index.js file,

require(‘react-native’).unstable_enableLogBox()

New component -Pressable

This new component comes up with the newer version of React Native. It is designed to replace the Touchable Opacity & Touchable Without Feedback, which is used to create the buttons.

Example is as given below:

<Pressable

style={({ pressed }) => [

{

opacity: pressed ? 0.5 : 1,

backgroundColor: pressed ? “red” : “orange”,

},

styles.button,

,

]}

>

<Text style={styles.buttonText}>Pressable</Text>

</Pressable>

Some other major dependency version changes

  • The support of Minimum Node switched from Node 10 to Node 12.
  • Flipper also bumped to 0.75.1
  • CocoaPods 1.10 & Xcode 12 are required versions.
  • Android API levels dropped 16-20. The Facebook app constantly drops its support for Android versions with adequately low utility. As Facebook no more supports these versions and is React Native’s main testing surface, React Native is also dropping its support.

Conclusion:

The above points state what new additional features are introduced in the new version of React Native, the biggest of all of them was to have Hermes available for iOS as well. This directly influences the sale of iOS devices in the market. There are certain more improvements which are planned for the next version and will be seen soon in the market. One should always hire Mobile App Development Company California  to get the best output and utility of the new components with the time that can be easily understood.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.