React-Native: Hermes is not enabled

Question

I am trying to enable Hermes in a new project but despite I have enabled it in android/app/build.gradle it is not enabled. I am not able to see Engine: Hermes text in app as described in documentation. I am using WebStorm 2019.2 project template.

App.js:

// imports
const App = () => {
  return (
    <Fragment>
      <StatusBar barStyle="dark-content"/>
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header/>
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          // rest of the default ui omitted
        </ScrollView>
      </SafeAreaView>
    </Fragment>
  );
};

export default App;

babel.cofig.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

metro.config.js:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  }
};

package.js:

{
  "name": "hermes",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.4"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.1.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

You can checkout and test the project from here.

UPDATE:

I have manged to enable both Hermes and auto linking after upgrading to RN v0.62.2. Here is my current settings and dependencies:

Package.json
Project level build.gradle
Module level build.gradle

You can remove `def enableHermes = project.ext.react.get("enableHermes", false);` — hong developer, Aug 05 '19 at 04:50
@hongdeveloper, why we should remove this line `def enableHermes = project.ext.react.get("enableHermes", false);`. But this will not be a need for anabling hermes??? — Muhammad, Apr 18 '20 at 08:14

score 4 · Answer 1 · answered Jun 07 '22 at 11:04

Depending on how you started your project, you might need to go to android/gradle.properties and change expo.jsEngine=jsc to expo.jsEngine=hermes

make sure to clean gradle: cd android && ./gradlew clean && cd ..

That's all you need to enable Hermes. To check if you got it right you can use the HermesInternal global variable once the app mounts

const isHermes = () => !!global.HermesInternal;
console.log("isHermesEnabled:", isHermes());

Masoud Tavakkoli · Answer 2 · 2020-04-02T06:58:58.667

0

Just before run the app clear android build using this command cd android && ./gradlew clean and run again.

edited Apr 02 '20 at 06:58

answered Aug 14 '19 at 09:45

Masoud Tavakkoli

950
13
34

React-Native: Hermes is not enabled

2 Answers2