Code obfuscation
- React Native course
- Expert
- Lesson 37/47
- 5 min
Learn code obfuscation and minification.
What is code obfuscation?
Code obfuscation makes the compiled JavaScript hard for humans to read. Variable names are shortened, whitespace is dropped, logic is reshuffled. The result: a reverse engineer sees meaningless code.
In React Native minification is the base of this. The Hermes engine turns JS into bytecode; this also cuts readability. In production builds minification is on by default. For extra protection tools like react-native-obfuscating-transformer are used. Obfuscation does not slow the app; it only hides the code. This makes stealing business logic harder.
Hermes and the production build
Hermes is a JS engine optimized for React Native. It turns JS into bytecode; this both raises speed and hides the code. In production builds Hermes is on by default.
It is enabled with the "jsEngine": "hermes" setting in app.json. Hermes output cannot be read directly; it needs reverse engineering tools. This is the base layer of obfuscation. Extra obfuscation tools can go on top; but Hermes alone gives real protection. In development builds Hermes is sometimes off; for easier debugging.
Practice Add the Hermes setting
Add a "jsEngine" field to an app.json skeleton. The value is "hermes". The field lives inside the "expo" section.
Starter code
{
"expo": {
"name": "App"
// add the jsEngine setting here
}
}Sample solution
{
"expo": {
"name": "App",
"jsEngine": "hermes"
}
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does minification do?
const longName = getValue();- Locks the screen
- Speeds up the app
- Shortens variable names Correct answer
- Encrypts the database
Explanation: Minification shortens variable names and drops whitespace.
2 The Hermes engine setting
"jsEngine": ____"jsEngine": "hermes"Explanation: The jsEngine hermes setting turns Hermes on.
3 Match each piece to its role
| Term | Meaning |
|---|---|
obfuscation |
Hides code |
minification |
Shortens names |
Hermes |
Bytecode engine |
app.json |
Config file |