Hermes engine in React Native - Mini App: Build & Ship

Build: Hermes Engine Info

This screen shows information about the Hermes JavaScript engine used in React Native apps. It helps users understand if Hermes is enabled and displays a simple message.

Target UI

┌─────────────────────────────┐
│       Hermes Engine Info     │
├─────────────────────────────┤
│ Hermes is enabled: [Yes/No] │
│                             │
│ Welcome to Hermes powered    │
│ React Native app!            │
└─────────────────────────────┘

Display a header with the screen name 'Hermes Engine Info'.

Show a text line that says 'Hermes is enabled: Yes' or 'No' depending on Hermes status.

Show a welcome message below the status.

Use React Native Text and View components.

Use the global HermesInternal object to detect Hermes engine.

Style the screen with centered content and some padding.

Starter Code

React Native

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

export default function HermesInfoScreen() {
  // TODO: Detect Hermes engine and display status
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Hermes Engine Info</Text>
      {/* TODO: Add Hermes status text here */}
      {/* TODO: Add welcome message here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  statusText: {
    fontSize: 18,
    marginBottom: 10
  },
  welcomeText: {
    fontSize: 16,
    color: '#555'
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function HermesInfoScreen() {
  const isHermes = global.HermesInternal != null;

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Hermes Engine Info</Text>
      <Text style={styles.statusText}>Hermes is enabled: {isHermes ? 'Yes' : 'No'}</Text>
      <Text style={styles.welcomeText}>Welcome to Hermes powered React Native app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  statusText: {
    fontSize: 18,
    marginBottom: 10
  },
  welcomeText: {
    fontSize: 16,
    color: '#555'
  }
});

We use the global variable HermesInternal to check if the Hermes engine is enabled. If it exists, Hermes is running. We show this status in a text line. The screen uses simple React Native components with styles to center content and add spacing. This helps beginners see how to detect Hermes and display dynamic text.

Final Result

Completed Screen

┌─────────────────────────────┐
│       Hermes Engine Info     │
├─────────────────────────────┤
│ Hermes is enabled: Yes       │
│                             │
│ Welcome to Hermes powered    │
│ React Native app!            │
└─────────────────────────────┘

The screen loads and shows if Hermes is enabled or not.

No buttons or gestures; static informational screen.

Stretch Goal

Add a button that reloads the app to demonstrate Hermes engine detection refresh.

💡 Hint

Use React Native's Button component and the DevSettings.reload() method to reload the app.

Practice

1. What is the main purpose of the Hermes engine in React Native?

easy

A. To add new UI components automatically

B. To make apps start faster and use less memory

C. To convert JavaScript code to native Android code

D. To manage app navigation between screens

Solution

1. Step 1: Understand Hermes role

   Hermes is a JavaScript engine designed to improve app performance.

2. Step 2: Identify its benefits

   It helps apps start faster and reduces memory and battery use.

3. Final Answer:

   To make apps start faster and use less memory -> Option B

4. Quick Check:

   Hermes improves app speed and memory use = A [OK]

Hint: Hermes speeds up app start and saves memory [OK]

Common Mistakes:

• Thinking Hermes adds UI components
• Confusing Hermes with native code compiler
• Believing Hermes manages navigation

2. Which of the following is the correct way to enable Hermes in a React Native Android project?

easy

A. Add hermesEnabled = true in index.js

B. Import Hermes from 'react-native-hermes' in App.js

C. Set enableHermes: true in android/app/build.gradle

D. Set useHermes = true in package.json

Solution

1. Step 1: Locate Hermes enabling method

   Hermes is enabled in the Android build config file android/app/build.gradle.

2. Step 2: Confirm correct syntax

   The correct setting is enableHermes: true inside the project.ext.react block.

3. Final Answer:

   Set enableHermes: true in android/app/build.gradle -> Option C

4. Quick Check:

   Enable Hermes in build.gradle = B [OK]

Hint: Enable Hermes in android/app/build.gradle [OK]

Common Mistakes:

• Trying to enable Hermes in JavaScript files
• Using wrong property names like useHermes
• Adding Hermes import statements

3. Given this React Native code snippet running with Hermes enabled, what is the expected behavior?

console.log('App started');
setTimeout(() => console.log('Timeout done'), 0);
console.log('End of script');

medium

A. Logs: 'App started', 'End of script', 'Timeout done'

B. Logs: 'End of script', 'App started', 'Timeout done'

C. Logs: 'Timeout done', 'App started', 'End of script'

D. Logs: 'App started', 'Timeout done', 'End of script'

Solution

1. Step 1: Understand JavaScript event loop with Hermes

   Even with Hermes, JavaScript runs synchronously first, then asynchronous callbacks.

2. Step 2: Trace the console logs order

   First logs 'App started', then 'End of script', then the setTimeout callback logs 'Timeout done'.

3. Final Answer:

   Logs: 'App started', 'End of script', 'Timeout done' -> Option A

4. Quick Check:

   Sync logs before async timeout = D [OK]

Hint: setTimeout callback runs after synchronous code [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Confusing Hermes behavior with normal JS
• Expecting logs in wrong order

4. You enabled Hermes in your React Native app but it crashes on startup. Which of these is the most likely cause?

medium

A. You forgot to clean and rebuild the project after enabling Hermes

B. You did not import Hermes in your JavaScript files

C. You set enableHermes: false in build config

D. You used unsupported React Native components

Solution

1. Step 1: Identify common Hermes setup errors

   After enabling Hermes, the project must be cleaned and rebuilt to apply changes properly.

2. Step 2: Understand why skipping rebuild causes crashes

   Without rebuild, old native binaries conflict with Hermes causing startup crashes.

3. Final Answer:

   You forgot to clean and rebuild the project after enabling Hermes -> Option A

4. Quick Check:

   Clean and rebuild fixes Hermes crashes = A [OK]

Hint: Always clean and rebuild after enabling Hermes [OK]

Common Mistakes:

• Thinking Hermes needs JS imports
• Ignoring rebuild step
• Blaming unrelated components

5. You want to reduce your React Native app's memory usage on Android. How can Hermes help, and what must you do to enable it properly?

hard

A. Hermes reduces memory by lazy loading components; enable it by adding hermesLazyLoad: true in package.json

B. Hermes reduces memory by compressing images; enable it by importing Hermes in App.js

C. Hermes reduces memory by caching network data; enable it by setting cacheHermes: true in android/app/build.gradle

D. Hermes reduces memory by optimizing JS execution; enable it by setting enableHermes: true and rebuilding the app

Solution

1. Step 1: Understand Hermes memory optimization

   Hermes optimizes JavaScript execution to use less memory and battery.

2. Step 2: Know how to enable Hermes correctly

   Set enableHermes: true in android/app/build.gradle and rebuild the app to apply changes.

3. Final Answer:

   Hermes reduces memory by optimizing JS execution; enable it by setting enableHermes: true and rebuilding the app -> Option D

4. Quick Check:

   Enable Hermes in build config and rebuild = C [OK]

Hint: Enable Hermes in build config and rebuild to save memory [OK]

Common Mistakes:

• Thinking Hermes compresses images
• Trying to enable Hermes via JS imports
• Using wrong config keys like cacheHermes