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.