diff --git a/releases/next/docs/communication-ios.html b/releases/next/docs/communication-ios.html index 8e41a6b2a4f..039e42712c5 100644 --- a/releases/next/docs/communication-ios.html +++ b/releases/next/docs/communication-ios.html @@ -7,7 +7,9 @@ RCTRootView *rootView :@"ImageBrowserApp" initialProperties:props];
RCTRootView also provides a read-write property appProperties. After appProperties is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.
RCTRootView also provides a read-write property appProperties. After appProperties is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.
It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.
There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.
Note: diff --git a/releases/next/docs/embedded-app-android.html b/releases/next/docs/embedded-app-android.html index 5aeb2987354..4403ea0f130 100644 --- a/releases/next/docs/embedded-app-android.html +++ b/releases/next/docs/embedded-app-android.html @@ -59,7 +59,10 @@ public boolean onKeyUp--save react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
This creates a node module for your app and adds the
react-nativenpm dependency. Now open the newly createdpackage.jsonfile and add this underscripts:"start": "node node_modules/react-native/local-cli/cli.js start"Copy & paste the following code to
index.android.jsin your root folder — it's a barebones React Native app:'use strict'; -import React, { +import React from 'react'; +import { + AppRegistry, + StyleSheet, Text, View } from 'react-native'; @@ -73,7 +76,7 @@ class MyAwesomeApp extends ) } } -var styles = React.StyleSheet.create({ +var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', @@ -85,7 +88,7 @@ class MyAwesomeApp extends }, }); -React.AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);Run your app #
To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:
$ npm startNow build and run your Android app as normal (e.g.
./gradlew installDebug). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:
Sharing a ReactInstance across multiple Activities / Fragments in your app #
You can have multiple Activities or Fragments that use the same
ReactInstanceManager. You'll want to make your own "ReactFragment" or "ReactActivity" and have a singleton "holder" that holds aReactInstanceManager. When you need theReactInstanceManager/ hook up theReactInstanceManagerto the lifecycle of those Activities or Fragments, use the one provided by the singleton.
JavaScript Environment #
Edit on GitHub 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-native';- Computed Properties:
var key = 'abc'; var obj = {[key]: 10};- Object Consise 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
Polyfills #
Many standards functions are also available on all the supported JavaScript runtimes.
Browser
- console.{log, warn, error, info, trace, table}
- CommonJS require
- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame
- navigator.geolocation
ES6
- Object.assign
- String.prototype.{startsWith, endsWith, repeat, includes}
- Array.from
- Array.prototype.{find, findIndex}
ES7
Specific
__DEV__
JavaScript Environment #
Edit on GitHub 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 { Component } from 'react-native';- Computed Properties:
var key = 'abc'; var obj = {[key]: 10};- Object Consise 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
Polyfills #
Many standards functions are also available on all the supported JavaScript runtimes.
Browser
- console.{log, warn, error, info, trace, table}
- CommonJS require
- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame
- navigator.geolocation
ES6
- Object.assign
- String.prototype.{startsWith, endsWith, repeat, includes}
- Array.from
- Array.prototype.{find, findIndex}
ES7
Specific
__DEV__