JavaScript Environment
JavaScript Runtime
When using React Native, you're going to be running your JavaScript code in up to three environments:
- In most cases, React Native will use JavaScriptCore, the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
- If enabled, React Native will use Hermes, an open-source JavaScript engine optimized for React Native.
- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses V8 as its JavaScript engine.
While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
JavaScript Syntax Transformers
Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.
A full list of React Native's enabled transformations can be found in metro-react-native-babel-preset.
ES5
- Reserved Words:
promise.catch(function() { });
ES6
- Arrow functions:
<C onPress={() => this.setState({pressed: true})} /> - Block scoping:
let greeting = 'hi'; - Call spread:
Math.max(...array); - Classes:
class C extends React.Component { render() { return <View />; } } - Constants:
const answer = 42; - Destructuring:
var {isActive, style} = this.props; - for...of:
for (var num of [1, 2, 3]) {}; - Modules:
import React, { Component } from 'react'; - Computed Properties:
var key = 'abc'; var obj = {[key]: 10}; - Object Concise Method:
var obj = { method() { return 10; } }; - Object Short Notation:
var name = 'vjeux'; var obj = { name }; - Rest Params:
function(type, ...args) {}; - Template Literals:
var who = 'world'; var str = `Hello ${who}`;
ES8
- Function Trailing Comma:
function f(a, b, c,) {}; - Async Functions:
async function doStuffAsync() { const foo = await doOtherStuffAsync(); };
Stage 3
- Object Spread:
var extended = { ...obj, a: 10 }; - Static class fields:
class CustomDate { static epoch = new CustomDate(0); } - Optional Chaining:
var name = obj.user?.name;
Specific
- JSX:
<View style={{color: 'red'}} /> - Flow:
function foo(x: ?number): string {}; - TypeScript:
function foo(x: number | undefined): string {}; - Babel Template: allows AST templating
Polyfills
Many standard functions are also available on all the supported JavaScript runtimes.
Browser
- console.{log, warn, error, info, trace, table, group, groupEnd}
- CommonJS require
- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame
ES6
- Object.assign
- String.prototype.{startsWith, endsWith, repeat, includes}
- Array.from
- Array.prototype.{find, findIndex}
ES7
- Array.prototype.{includes}
ES8
Specific
__DEV__