React Native 0.64 - It's here! (How to update?)

What to look for?

With 0.64 coming live for developers, there are two major improvments in React Native enviroment that you should know about.

Hermes on iOS

If you are a React Native developer for a while, you have probably heared about Hermes in the past. Long story short, Hermes is an JavaScript engine optimized for React Native.

It was previously available only on Android, but now we can use it also on iOS.

Main things to keep in mind about Herrmes:

• Open sourced
• Improves performance by decreasing memory utilization
• Recudes download size
• Decreases TTI (Time to Interactive)
• iOS: still in early stage, still can be a little buggy.

Do you want to add hermes to your app? It couldn't be simpler - just use cocoapods with given config (Podfile)

use_react_native!(

   :path => config[:reactNativePath],

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

   :hermes_enabled => true

)

Then run pod install in your iOS directory. Happy hacking!

Inline Requires

Inline requires is a great method (from Metro) of decreasing startup time by delaying execution of JavaScript modules until they are used, instead of at startup.

The method itself is not new, but from version 0.64 of React Native its enabled by default for new applications.

Let's imagine a scenario, when you have to load a very expensive component.

E.g.

import React, { Component } from 'react';

import { Text } from 'react-native';

// ... import some very expensive modules

export const VeryExpensive: React.FC = () => {

  // lots and lots of code

  render() {

    return <Text>Very Expensive Component</Text>;

  }

}

Now, instead of loading this component at startup of the app, we can load in, for example, after a button click using inline requires.

E.g.

import React, { useState } from 'react';

import { TouchableOpacity, View, Text } from 'react-native';

let VeryExpensive = null;

export const Optimized: React.FC = () => {

  const [needEspenxive, setExpensive] = useState(false);

  const didPress = () => {

    if (VeryExpensive === null) {

      VeryExpensive = require('./VeryExpensive').default;

    }

    setExpensive(true);

  };

  render() {

    return (

      <View style={{ marginTop: 20 }}>

        <TouchableOpacity onPress={() => didPress()}>

          <Text>Load</Text>

        </TouchableOpacity>

        {needsExpensive ? <VeryExpensive /> : null}

      </View>

    );

  }

}

Isn't it cool, huh?

Bonus: How to update?

Updating React Native apps can be tricky. Lots of dependencies, sometimes core native files change (e.g. AndroidManifest and so on). At NS Code we have been using this web app for upgrading any React Native projects with great success.

With this app, you can easily process React Native upgrade to new version. You clearly see which files change and how to modify them.

However, if you struggle with updates (because, let's be honest - they can cause headaches from time to time) then don't hesitate to contact us. You can write here for consulting regarding app updates, or delegate whole app update to us.

Summary

React Native version 0.64 gives small, but very important changes for our mobile developers. We look forward to the growth of React Native framework and we always try to stay up to date with all new tech news.