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

Answer 1

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());

Answer 2

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