What’s New With React Native v0.64

React Native version 0.64 is here. It’s already been 3 weeks since it was released and it’s full of new surprises. Though I suggest waiting for a couple of more weeks before you upgrade to the new version.

I also believe there are 70% or more React-Native projects that are using version 0.62 or lower. So, before upgrading to the 0.64, first, get yourself comfortable with version 0.63. Here is a great guide for upgrading your React-Native(RN) versions, just follow along, and with a few hick-ups, your project version will be updated.

Let’s look at the five great things about the 0.64 version:

1. Hermes support for IOS: Hermes which is a new javascript engine that is being optimized for React-Native. This improves the app start-up time(which was a huge pain with RN applications), decrease memory usage, and helps in minimising app size. Hermes was made available with RN version 0.60.4 but only for the android platform. Now with version 0.64, it supports the IOS platform.
2. Removed support: This may cause little problems for your applications as Facebook has removed support for API levels 16–20. These android API has very low usages now in mobile devices. Surprisingly, Facebook can claim this with confidence as Facebook app usage is extremely low on these devices. The new version also requires Xcode version 12 and CocoaPods version 1.10.0. Minimum node version support is also moved from 10 to 12. Flipper a great tool as told by a lot of developers, though I never used it and find it useless(I have also removed it from my application) is also upgraded to 0.75.1, as it comes by default with RN.
3. New JSX transform: JSX transform is required as apps rely on Babel, Typescript to transform JSX code to regular JS code. Now, new JSX transform enabled files will no longer need to import React to use JSX in the code, this will happen by default. This support was added to React version 17 and here is a must-read blog by Dan Abramov on new changes introduced in React’s latest version.
4. In-line require enabling: In-line require comes by default now and doesn’t require extra configuration, this will help with startup time because it will enable JS modules only when and where they are required. Earlier we used to import the module at the top of the code file but now we can directly do require on the line where it’s needed. Do check out this blog on how in-line requires help with the performance of the application. To understand better checkout the below code.

// before inline default

import { BeforeFunction } from 'before-module';

const BeforeComponent = (props) => {
  const view = BeforeFunction();
  return <View>{view}</View>;
};

// after inline default

const AfterComponent = (props) => {
  const view = require('after-module').AfterFunction();
  return <View>{view}</View>;
};

5. TextInput new functions: TextInput now supports onPressIn and onPressout functions which weren’t available so far with the RN. These two functions look small but they have extremely major use cases.

The above-mentioned points make RN developers more excited to upgrade to the new version, if you want to know more and dig deeper into all the changes that happened with the latest version check out this link.

Do check out my other blogs on how to get hired by answering these questions of react-native and design practices for react-native applications. I hope you will love them.