Hermes engine in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable Hermes engine in a React Native app.

React Native

const isHermesEnabled = [1];

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting the flag to false disables Hermes.

Using null or undefined will not enable Hermes.

Setting isHermesEnabled to true enables the Hermes engine in React Native.

2fill in blank

medium

Complete the code to check if Hermes is running in your React Native app.

React Native

import { HermesInternal } from 'react-native';
const isHermes = [1] !== null && HermesInternal !== undefined;

Drag options to blanks, or click blank then click option'

AHermes

BisHermesEnabled

CHermesInternal

DHermesInternalVersion

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that is not imported or defined.

Checking for undefined only without null check.

HermesInternal is a special object available only when Hermes is enabled and running.

3fill in blank

hard

Fix the error in the code to properly enable Hermes in android/app/build.gradle.

React Native

project.ext.react = [
  entryFile: 'index.js',
  enableHermes: [1]  // clean and rebuild if changing
];

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

C'true'

D'false'

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings instead of booleans for enableHermes.

Not rebuilding the app after changing this setting.

In build.gradle, enableHermes must be a boolean true or false, not a string.

4fill in blank

hard

Fill both blanks to import and use Hermes in a React Native component.

React Native

import React from 'react';
import { Text, View } from 'react-native';
import [1] from 'react-native';

export default function App() {
  const isHermes = [2] !== null;
  return (
    <View>
      <Text>{isHermes ? 'Hermes is enabled' : 'Hermes is disabled'}</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

AHermesInternal

BHermes

CReactNativeHermes

DHermesEngine

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a wrong or non-existent module.

Checking a variable that is undefined.

You import HermesInternal from react-native and check if it is not null to detect Hermes.

5fill in blank

hard

Fill all three blanks to configure Hermes in a React Native app's android/app/build.gradle file.

React Native

project.ext.react = [
  entryFile: [1],
  enableHermes: [2],
  hermesCommand: [3]  // path to Hermes compiler
];

Drag options to blanks, or click blank then click option'

A'index.js'

Btrue

C"node_modules/hermes-engine/%OS-BIN%/hermesc"

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean as string or vice versa.

Wrong path string for hermesCommand.

Forgetting quotes around entryFile or hermesCommand.

Set entryFile to 'index.js', enableHermes to true, and hermesCommand to the Hermes compiler path string.