From 8232df838cb142a69173458eff0b38be93d22eb1 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 26 Apr 2016 05:50:09 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/communication-ios.html | 6 ++++-- releases/next/docs/embedded-app-android.html | 9 ++++++--- releases/next/docs/embedded-app-ios.html | 9 ++++++--- releases/next/docs/javascript-environment.html | 2 +- releases/next/docs/native-components-android.html | 3 ++- releases/next/docs/native-components-ios.html | 3 ++- 6 files changed, 21 insertions(+), 11 deletions(-) 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];
'use strict'; -import React, { +import React from 'react'; +import { + AppRegistry, View, Image } from 'react-native'; @@ -27,7 +29,7 @@ class ImageBrowserApp extends } } -React.AppRegistry.registerComponent('ImageBrowserApp', () => ImageBrowserApp);

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.

NSArray *imageList = @[@"http://foo.com/bar3.png", +AppRegistry.registerComponent('ImageBrowserApp', () => ImageBrowserApp);

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.

NSArray *imageList = @[@"http://foo.com/bar3.png", @"http://foo.com/bar4.png"]; rootView.appProperties = @{@"images" : imageList};

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-native npm dependency. Now open the newly created package.json file and add this under scripts:

"start": "node node_modules/react-native/local-cli/cli.js start"

Copy & paste the following code to index.android.js in 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 start

Now 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:

Screenshot

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 a ReactInstanceManager. When you need the ReactInstanceManager / hook up the ReactInstanceManager to the lifecycle of those Activities or Fragments, use the one provided by the singleton.

Next →
© 2016 Facebook Inc.
React Nativenext

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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

ES7

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

ES7

Specific

  • __DEV__
Next →
© 2016 Facebook Inc.
React Nativenext

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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

ES7

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

ES7

Specific

  • __DEV__
Next →
© 2016 Facebook Inc.