JavaScript Runtime #

When using React Native, you're going to be running your JavaScript code in two environments:

On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.

While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's 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.

As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.

Here's a full list of React Native's enabled transformations.

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}`;

ES7

Object Spread: var extended = { ...obj, a: 10 };
Function Trailing Comma: function f(a, b, c,) { }
Async Functions: async function doStuffAsync() { const foo = await doOtherStuffAsync(); };

Specific

JSX: <View style={{color: 'red'}} />
Flow: function foo(x: ?number): string {}

Polyfills #

Many standards functions are also available on all the supported JavaScript runtimes.

Browser

ES6

Object.assign
String.prototype.{startsWith, endsWith, repeat, includes}
Array.from
Array.prototype.{find, findIndex, includes}

ES7

Object.{entries, values}

Specific

__DEV__

JavaScript Environment #

JavaScript Runtime #

JavaScript Syntax Transformers #

Polyfills #