From 529666b8f529526591e847075f501dc855222bbd Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Wed, 18 May 2016 20:08:33 +0000 Subject: [PATCH] Updated docs for 0.26 --- docs/accessibility.html | 4 +- docs/actionsheetios.html | 8 +- docs/activityindicatorios.html | 6 +- docs/alert.html | 8 +- docs/alertios.html | 8 +- docs/android-building-from-source.html | 4 +- docs/android-ui-performance.html | 4 +- docs/animated.html | 8 +- docs/animations.html | 4 +- docs/appregistry.html | 4 +- docs/appstate.html | 8 +- docs/appstateios.html | 8 +- docs/asyncstorage.html | 8 +- docs/backandroid.html | 4 +- docs/cameraroll.html | 8 +- docs/clipboard.html | 8 +- docs/colors.html | 4 +- docs/communication-ios.html | 10 +- docs/datepickerandroid.html | 8 +- docs/datepickerios.html | 8 +- docs/debugging.html | 6 +- docs/dimensions.html | 4 +- docs/direct-manipulation.html | 4 +- docs/drawerlayoutandroid.html | 4 +- docs/embedded-app-android.html | 13 +- docs/embedded-app-ios.html | 13 +- docs/flexbox.html | 4 +- docs/geolocation.html | 8 +- docs/gesture-responder-system.html | 4 +- docs/getting-started.html | 4 +- docs/image.html | 8 +- docs/images.html | 4 +- docs/intentandroid.html | 4 +- docs/interactionmanager.html | 4 +- docs/javascript-environment.html | 4 +- docs/known-issues.html | 4 +- docs/layoutanimation.html | 161 ++- docs/linking-libraries-ios.html | 4 +- docs/linking.html | 12 +- docs/linkingios.html | 4 +- docs/listview.html | 18 +- docs/listviewdatasource.html | 59 + docs/mapview.html | 8 +- docs/modal.html | 34 +- docs/native-components-android.html | 10 +- docs/native-components-ios.html | 44 +- docs/native-modules-android.html | 8 +- docs/native-modules-ios.html | 4 +- docs/nativemethodsmixin.html | 4 +- docs/navigator-comparison.html | 4 +- docs/navigator.html | 4 +- docs/navigatorios.html | 8 +- docs/netinfo.html | 8 +- docs/network.html | 4 +- docs/panresponder.html | 11 +- docs/performance.html | 4 +- docs/picker.html | 129 +- docs/pickerios.html | 6 +- docs/pixelratio.html | 4 +- docs/platform-specific-code.html | 27 +- docs/progressbarandroid.html | 8 +- docs/progressviewios.html | 6 +- docs/pushnotificationios.html | 49 +- docs/refreshcontrol.html | 8 +- docs/running-on-device-android.html | 4 +- docs/running-on-device-ios.html | 4 +- docs/scrollview.html | 13 +- docs/segmentedcontrolios.html | 8 +- docs/shadowproptypesios.html | 4 +- docs/signed-apk-android.html | 6 +- docs/slider.html | 8 +- docs/sliderios.html | 8 +- docs/statusbar.html | 8 +- docs/statusbarios.html | 6 +- docs/style.html | 4 +- docs/stylesheet.html | 4 +- docs/switch.html | 8 +- docs/tabbarios-item.html | 7 +- docs/tabbarios.html | 8 +- docs/testing.html | 4 +- docs/text.html | 833 ++++++++++- docs/textinput.html | 1218 ++++++++++++++++- docs/timepickerandroid.html | 8 +- docs/timers.html | 4 +- docs/toastandroid.html | 8 +- docs/toolbarandroid.html | 8 +- docs/touchablehighlight.html | 4 +- docs/touchablenativefeedback.html | 4 +- docs/touchableopacity.html | 6 +- docs/touchablewithoutfeedback.html | 4 +- docs/transforms.html | 4 +- docs/troubleshooting.html | 4 +- docs/tutorial.html | 4 +- docs/upgrading.html | 4 +- docs/vibration.html | 8 +- docs/vibrationios.html | 8 +- docs/videos.html | 4 +- docs/view.html | 8 +- docs/viewpagerandroid.html | 11 +- docs/webview.html | 8 +- index.html | 4 +- releases/0.26/css/react-native.css | 36 + releases/0.26/docs/accessibility.html | 2 +- releases/0.26/docs/actionsheetios.html | 4 +- releases/0.26/docs/activityindicatorios.html | 4 +- releases/0.26/docs/alert.html | 4 +- releases/0.26/docs/alertios.html | 4 +- .../docs/android-building-from-source.html | 2 +- .../0.26/docs/android-ui-performance.html | 2 +- releases/0.26/docs/animated.html | 4 +- releases/0.26/docs/animations.html | 2 +- releases/0.26/docs/appstate.html | 4 +- releases/0.26/docs/appstateios.html | 4 +- releases/0.26/docs/asyncstorage.html | 4 +- releases/0.26/docs/cameraroll.html | 4 +- releases/0.26/docs/clipboard.html | 4 +- releases/0.26/docs/colors.html | 2 +- releases/0.26/docs/communication-ios.html | 2 +- releases/0.26/docs/datepickerandroid.html | 4 +- releases/0.26/docs/datepickerios.html | 4 +- releases/0.26/docs/debugging.html | 2 +- releases/0.26/docs/direct-manipulation.html | 2 +- releases/0.26/docs/embedded-app-android.html | 2 +- releases/0.26/docs/embedded-app-ios.html | 2 +- releases/0.26/docs/geolocation.html | 4 +- .../0.26/docs/gesture-responder-system.html | 2 +- releases/0.26/docs/getting-started.html | 2 +- releases/0.26/docs/image.html | 4 +- releases/0.26/docs/images.html | 2 +- .../0.26/docs/javascript-environment.html | 2 +- releases/0.26/docs/known-issues.html | 2 +- releases/0.26/docs/layoutanimation.html | 4 +- releases/0.26/docs/linking-libraries-ios.html | 2 +- releases/0.26/docs/linking.html | 4 +- releases/0.26/docs/listview.html | 4 +- releases/0.26/docs/mapview.html | 4 +- releases/0.26/docs/modal.html | 4 +- .../0.26/docs/native-components-android.html | 2 +- releases/0.26/docs/native-components-ios.html | 2 +- .../0.26/docs/native-modules-android.html | 2 +- releases/0.26/docs/native-modules-ios.html | 2 +- releases/0.26/docs/navigator-comparison.html | 2 +- releases/0.26/docs/navigatorios.html | 4 +- releases/0.26/docs/netinfo.html | 4 +- releases/0.26/docs/network.html | 2 +- releases/0.26/docs/panresponder.html | 4 +- releases/0.26/docs/performance.html | 2 +- releases/0.26/docs/picker.html | 125 +- releases/0.26/docs/pickerios.html | 4 +- .../0.26/docs/platform-specific-code.html | 2 +- releases/0.26/docs/progressbarandroid.html | 4 +- releases/0.26/docs/progressviewios.html | 4 +- releases/0.26/docs/pushnotificationios.html | 4 +- releases/0.26/docs/refreshcontrol.html | 4 +- .../0.26/docs/running-on-device-android.html | 2 +- releases/0.26/docs/running-on-device-ios.html | 2 +- releases/0.26/docs/scrollview.html | 4 +- releases/0.26/docs/segmentedcontrolios.html | 4 +- releases/0.26/docs/signed-apk-android.html | 2 +- releases/0.26/docs/slider.html | 4 +- releases/0.26/docs/sliderios.html | 4 +- releases/0.26/docs/statusbar.html | 4 +- releases/0.26/docs/statusbarios.html | 4 +- releases/0.26/docs/style.html | 2 +- releases/0.26/docs/switch.html | 4 +- releases/0.26/docs/tabbarios.html | 4 +- releases/0.26/docs/testing.html | 2 +- releases/0.26/docs/text.html | 820 ++++++++++- releases/0.26/docs/textinput.html | 1214 +++++++++++++++- releases/0.26/docs/timepickerandroid.html | 4 +- releases/0.26/docs/timers.html | 2 +- releases/0.26/docs/toastandroid.html | 4 +- releases/0.26/docs/toolbarandroid.html | 4 +- releases/0.26/docs/troubleshooting.html | 2 +- releases/0.26/docs/tutorial.html | 2 +- releases/0.26/docs/upgrading.html | 2 +- releases/0.26/docs/vibration.html | 4 +- releases/0.26/docs/vibrationios.html | 4 +- releases/0.26/docs/videos.html | 2 +- releases/0.26/docs/view.html | 4 +- releases/0.26/docs/viewpagerandroid.html | 4 +- releases/0.26/docs/webview.html | 4 +- releases/0.26/img/survey.png | Bin 0 -> 131722 bytes releases/0.26/versions.html | 2 +- showcase.html | 4 +- support.html | 4 +- versions.html | 4 +- 187 files changed, 5124 insertions(+), 467 deletions(-) create mode 100644 docs/listviewdatasource.html create mode 100644 releases/0.26/img/survey.png diff --git a/docs/accessibility.html b/docs/accessibility.html index 326a6560f68..65f0c441915 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -1,4 +1,4 @@ -Accessibility – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Accessibility #

Edit on GitHub

Native App Accessibility (iOS and Android) #

Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.

<View accessible={true}> +Accessibility – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Accessibility #

Edit on GitHub

Native App Accessibility (iOS and Android) #

Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.

On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.

<View accessible={true}> <Text>text one</Text> <Text>text two</Text> </View>

In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

accessibilityLabel (iOS, Android) #

When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.

To use, set the accessibilityLabel property to a custom string on your View:

<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}> @@ -54,6 +54,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.26" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 2f54cfa424d..95f8c31a22c 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -1,8 +1,8 @@ -ActionSheetIOS – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActionSheetIOS #

Edit on GitHub

Methods #

static showActionSheetWithOptions(options, callback) #

Display an iOS action sheet. The options object must contain one or more +ActionSheetIOS – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActionSheetIOS #

Edit on GitHub

Methods #

static showActionSheetWithOptions(options, callback) #

Display an iOS action sheet. The options object must contain one or more of:

  • options (array of strings) - a list of button titles (required)
  • cancelButtonIndex (int) - index of cancel button in options
  • destructiveButtonIndex (int) - index of destructive button in options
  • title (string) - a title to show above the action sheet
  • message (string) - a message to show below the title

static showShareActionSheetWithOptions(options, failureCallback, successCallback) #

Display the iOS share sheet. The options object should contain one or both of:

  • message (string) - a message to share
  • url (string) - a URL to share

NOTE: if url points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. -In this way, you can share images, videos, PDF files, etc.

Examples #

Edit on GitHub
'use strict'; +In this way, you can share images, videos, PDF files, etc.

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -211,7 +211,7 @@ exports.examples return <ShareScreenshotExample />; } } -];
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 40c65b8b592..03f92f418b8 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicatorIOS #

Edit on GitHub

Props #

View props... #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

hidesWhenStopped bool #

Whether the indicator should hide when not animating (true by default).

onLayout function #

Invoked on mount and layout changes with

{nativeEvent: { layout: {x, y, width, height}}}.

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Examples #

Edit on GitHub
'use strict'; +ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicatorIOS #

Edit on GitHub

Props #

View props... #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

hidesWhenStopped bool #

Whether the indicator should hide when not animating (true by default).

onLayout function #

Invoked on mount and layout changes with

{nativeEvent: { layout: {x, y, width, height}}}.

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -145,7 +145,7 @@ exports.examples : 'row', justifyContent: 'space-around', }, -});
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/alert.html b/docs/alert.html index c5f2bb38a3b..50735802045 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -1,4 +1,4 @@ -Alert – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Alert #

Edit on GitHub

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the +Alert – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Alert #

Edit on GitHub

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.

This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, @@ -13,7 +13,7 @@ of a neutral, negative and a positive button:

  • If you specify one butt {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: () => console.log('OK Pressed')}, ] -)

Methods #

static alert(title, message?, buttons?, type?) #

Examples #

Edit on GitHub
'use strict'; +)

Methods #

static alert(title, message?, buttons?, type?) #

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -134,7 +134,7 @@ of a neutral, negative and a positive button:

  • If you specify one butt module.exports = { AlertExample, SimpleAlertExampleBlock, -};
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index ce7adac88da..8fa52375559 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS #

Edit on GitHub

The AlertsIOS utility provides two functions: alert and prompt. All +AlertIOS – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS #

Edit on GitHub

The AlertsIOS utility provides two functions: alert and prompt. All functionality available through AlertIOS.alert is also available in the cross-platform Alert.alert, which we recommend you use if you don't need iOS-specific functionality.

AlertIOS.prompt allows you to prompt the user for input inside of an @@ -29,7 +29,7 @@ a text key, as well as optional onPress and styl text => console.log("Your username is "+text), null, 'default' -)

Examples #

Edit on GitHub
'use strict'; +)

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -192,7 +192,7 @@ class PromptOptions extends : '#eeeeee', padding: 10, }, -});
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html index 448add276b4..62541f24dcd 100644 --- a/docs/android-building-from-source.html +++ b/docs/android-building-from-source.html @@ -1,4 +1,4 @@ -Building React Native from source – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Building React Native from source #

Edit on GitHub

You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.

Prerequisites #

Assuming you have the Android SDK installed, run android to open the Android SDK Manager.

Make sure you have the following installed:

  1. Android SDK version 23 (compileSdkVersion in build.gradle)
  2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
  3. Android Support Repository >= 17 (for Android Support Library)
  4. Android NDK (download links and installation instructions below)

Point Gradle to your Android SDK: either have $ANDROID_SDK and $ANDROID_NDK defined, or create a local.properties file in the root of your react-native checkout with the following contents:

sdk.dir=absolute_path_to_android_sdk +Building React Native from source – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Building React Native from source #

Edit on GitHub

You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.

Prerequisites #

Assuming you have the Android SDK installed, run android to open the Android SDK Manager.

Make sure you have the following installed:

  1. Android SDK version 23 (compileSdkVersion in build.gradle)
  2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
  3. Local Maven repository for Support Libraries (formerly Android Support Repository) >= 17 (for Android Support Library)
  4. Android NDK (download links and installation instructions below)

Point Gradle to your Android SDK: either have $ANDROID_SDK and $ANDROID_NDK defined, or create a local.properties file in the root of your react-native checkout with the following contents:

sdk.dir=absolute_path_to_android_sdk ndk.dir=absolute_path_to_android_ndk

Example:

sdk.dir=/Users/your_unix_name/android-sdk-macosx ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e

Download links for Android NDK #

  1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
  2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
  3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
  4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip

You can find further instructions on the official page.

Building the source #

1. Installing the fork #

First, you need to install react-native from your fork. For example, to install the master branch from the official repo, run the following:

npm install --save github:facebook/react-native#master

Alternatively, you can clone the repo to your node_modules directory and run npm install inside the cloned repo.

2. Adding gradle dependencies #

Add gradle-download-task as dependency in android/build.gradle:

... dependencies { @@ -44,6 +44,6 @@ dependencies { apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.26" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/android-ui-performance.html b/docs/android-ui-performance.html index 5a40cf287fb..dfb5b81b8dd 100644 --- a/docs/android-ui-performance.html +++ b/docs/android-ui-performance.html @@ -1,4 +1,4 @@ -Profiling Android UI Performance – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Profiling Android UI Performance #

Edit on GitHub

We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it's not native code's fault at all!).

The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called systrace. But first...

Make sure that JS dev mode is OFF!

You should see __DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs (which you can view using adb logcat)

Profiling with Systrace #

Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by markers start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.

Collecting a trace #

NOTE:

Systrace support was added in react-native v0.15. You will need to build with that version to collect a trace.

First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run systrace as follows

$ <path_to_android_sdk>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>

A quick breakdown of this command:

  • time is the length of time the trace will be collected in seconds
  • sched, gfx, and view are the android SDK tags (collections of markers) we care about: sched gives you information about what's running on each core of your phone, gfx gives you graphics info such as frame boundaries, and view gives you information about measure, layout, and draw passes
  • -a <your_package_name> enables app-specific markers, specifically the ones built into the React Native framework. your_package_name can be found in the AndroidManifest.xml of your app and looks like com.example.app

Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.

Reading the trace #

After opening the trace in your browser (preferably Chrome), you should see something like this:

Example

HINT: Use the WASD keys to strafe and zoom

Enable VSync highlighting #

The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:

Enable VSync Highlighting

You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.

Find your process #

Scroll until you see (part of) the name of your package. In this case, I was profiling com.facebook.adsmanager, which shows up as book.adsmanager because of silly thread name limits in the kernel.

On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are three/four threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), mqt_js and mqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.

UI Thread #

This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with Choreographer, traversals, and DispatchUI:

UI Thread Example

JS Thread #

This is where JS is executed. The thread name will be either mqt_js or <...> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like JSCall, Bridge.executeJSCall, etc:

JS Thread Example

Native Modules Thread #

This is where native module calls (e.g. the UIManager) are executed. The thread name will be either mqt_native_modules or <...>. To identify it in the latter case, look for things like NativeCall, callJavaModuleMethod, and onBatchComplete:

Native Modules Thread Example

Bonus: Render Thread #

If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either RenderThread or <...>. To identify it in the latter case, look for things like DrawFrame and queueBuffer:

Render Thread Example

Identifying a culprit #

A smooth animation should look something like the following:

Smooth Animation

Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60FPS.

If you noticed chop, however, you might see something like this:

Choppy Animation from JS

Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60FPS. In this case, the problem lies in JS.

You might also see something like this:

Choppy Animation from UI

In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, the problem lies in the native views being rendered.

At this point, you'll have some very helpful information to inform your next steps.

JS Issues #

If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see RCTEventEmitter being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:

Too much JS

This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into shouldComponentUpdate.

TODO: Add more tools for profiling JS

Native UI Issues #

If you identified a native UI problem, there are usually two scenarios:

  1. the UI you're trying to draw each frame involves to much work on the GPU, or
  2. You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).

Too much GPU work #

In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:

Overloaded GPU

Notice the long amount of time spent in DrawFrame that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.

To mitigate this, you should:

  • investigate using renderToHardwareTextureAndroid for complex, static content that is being animated/transformed (e.g. the Navigator slide/alpha animations)
  • make sure that you are not using needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.

If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out Tracer for OpenGL ES.

Creating new views on the UI thread #

In the second scenario, you'll see something more like this:

Creating Views

Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.

There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.

Still stuck? #

If you are confused or stuck, please post ask on Stack Overflow with the react-native tag. If you are unable to get a response there, or find an issue with a core component, please File a Github issue.

Next →

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Profiling Android UI Performance #

Edit on GitHub

We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible. Remember, Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve (and many times it's not native code's fault at all!).

The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called systrace. But first...

Make sure that JS dev mode is OFF!

You should see __DEV__ === false, development-level warning are OFF, performance optimizations are ON in your application logs (which you can view using adb logcat)

Profiling with Systrace #

Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by markers start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.

Collecting a trace #

NOTE:

Systrace support was added in react-native v0.15. You will need to build with that version to collect a trace.

First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run systrace as follows

$ <path_to_android_sdk>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>

A quick breakdown of this command:

  • time is the length of time the trace will be collected in seconds
  • sched, gfx, and view are the android SDK tags (collections of markers) we care about: sched gives you information about what's running on each core of your phone, gfx gives you graphics info such as frame boundaries, and view gives you information about measure, layout, and draw passes
  • -a <your_package_name> enables app-specific markers, specifically the ones built into the React Native framework. your_package_name can be found in the AndroidManifest.xml of your app and looks like com.example.app

Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.

Reading the trace #

After opening the trace in your browser (preferably Chrome), you should see something like this:

Example

HINT: Use the WASD keys to strafe and zoom

Enable VSync highlighting #

The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen:

Enable VSync Highlighting

You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.

Find your process #

Scroll until you see (part of) the name of your package. In this case, I was profiling com.facebook.adsmanager, which shows up as book.adsmanager because of silly thread name limits in the kernel.

On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are three/four threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), mqt_js and mqt_native_modules. If you're running on Android 5+, we also care about the Render Thread.

UI Thread #

This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with Choreographer, traversals, and DispatchUI:

UI Thread Example

JS Thread #

This is where JS is executed. The thread name will be either mqt_js or <...> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like JSCall, Bridge.executeJSCall, etc:

JS Thread Example

Native Modules Thread #

This is where native module calls (e.g. the UIManager) are executed. The thread name will be either mqt_native_modules or <...>. To identify it in the latter case, look for things like NativeCall, callJavaModuleMethod, and onBatchComplete:

Native Modules Thread Example

Bonus: Render Thread #

If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either RenderThread or <...>. To identify it in the latter case, look for things like DrawFrame and queueBuffer:

Render Thread Example

Identifying a culprit #

A smooth animation should look something like the following:

Smooth Animation

Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60FPS.

If you noticed chop, however, you might see something like this:

Choppy Animation from JS

Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60FPS. In this case, the problem lies in JS.

You might also see something like this:

Choppy Animation from UI

In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, the problem lies in the native views being rendered.

At this point, you'll have some very helpful information to inform your next steps.

JS Issues #

If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see RCTEventEmitter being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:

Too much JS

This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into shouldComponentUpdate.

TODO: Add more tools for profiling JS

Native UI Issues #

If you identified a native UI problem, there are usually two scenarios:

  1. the UI you're trying to draw each frame involves to much work on the GPU, or
  2. You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).

Too much GPU work #

In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:

Overloaded GPU

Notice the long amount of time spent in DrawFrame that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.

To mitigate this, you should:

  • investigate using renderToHardwareTextureAndroid for complex, static content that is being animated/transformed (e.g. the Navigator slide/alpha animations)
  • make sure that you are not using needsOffscreenAlphaCompositing, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.

If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out Tracer for OpenGL ES.

Creating new views on the UI thread #

In the second scenario, you'll see something more like this:

Creating Views

Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.

There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.

Still stuck? #

If you are confused or stuck, please post ask on Stack Overflow with the react-native tag. If you are unable to get a response there, or find an issue with a core component, please File a Github issue.

Next →

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/animated.html b/docs/animated.html index bea38d03950..46f704c054a 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -1,4 +1,4 @@ -Animated – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animated #

Edit on GitHub

Animations are an important part of modern UX, and the Animated +Animated – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animated #

Edit on GitHub

Animations are an important part of modern UX, and the Animated library is designed to make them fluid, powerful, and easy to build and maintain.

The simplest workflow is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates either @@ -125,7 +125,7 @@ API to normal Animated.Value, but multiplexed. Contains two regula } }

Methods #

constructor(valueIn?) #

setValue(value) #

setOffset(offset) #

flattenOffset() #

stopAnimation(callback?) #

addListener(callback) #

removeListener(id) #

getLayout() #

Converts {x, y} into {left, top} for use in style, e.g.

style={this.state.anim.getLayout()}

getTranslateTransform() #

Converts {x, y} into a useable translation transform, e.g.

style={{ transform: this.state.anim.getTranslateTransform() - }}

Examples #

Edit on GitHub
'use strict'; + }}

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -345,7 +345,7 @@ exports.examples : 10, alignItems: 'center', }, -});
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/animations.html b/docs/animations.html index 36836d8226b..cc26bfd24e3 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,4 +1,4 @@ -Animations – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animations #

Edit on GitHub

Fluid, meaningful animations are essential to the mobile user experience. Like +Animations – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animations #

Edit on GitHub

Fluid, meaningful animations are essential to the mobile user experience. Like everything in React Native, Animation APIs for React Native are currently under development, but have started to coalesce around two complementary systems: LayoutAnimation for animated global layout transactions, and Animated for @@ -391,6 +391,6 @@ source.

\ No newline at end of file diff --git a/docs/appregistry.html b/docs/appregistry.html index 071cc18d1b1..51646b05528 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -1,4 +1,4 @@ -AppRegistry – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppRegistry #

Edit on GitHub

AppRegistry is the JS entry point to running all React Native apps. App +AppRegistry – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppRegistry #

Edit on GitHub

AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking @@ -22,6 +22,6 @@ sure the JS execution environment is setup before other modules are apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.26" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/appstate.html b/docs/appstate.html index b3f5625c2b3..09baed5815d 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,4 @@ -AppState – React Native | A framework for building native apps using React

React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppState #

Edit on GitHub

AppState can tell you if the app is in the foreground or background, +AppState – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppState #

Edit on GitHub

AppState can tell you if the app is in the foreground or background, and notify you when the state changes.

AppState is frequently used to determine the intent and proper behavior when handling push notifications.

App States #

  • active - The app is running in the foreground
  • background - The app is running in the background. The user is either in another app or on the home screen
  • inactive - This is a transition state that currently never happens for @@ -26,7 +26,7 @@ render: funct },

This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the active state, and the null state will happen only momentarily.

Methods #

static addEventListener(type, handler) #

Add a handler to AppState changes by listening to the change event type -and providing the handler

static removeEventListener(type, handler) #

Remove a handler by passing the change event type and the handler

Properties #

currentState: TypeCastExpression #

Examples #

Edit on GitHub
'use strict'; +and providing the handler

static removeEventListener(type, handler) #

Remove a handler by passing the change event type and the handler

Properties #

currentState: TypeCastExpression #

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -90,7 +90,7 @@ exports.examples : 'Previous states:', render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; } }, -];
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/appstateios.html b/docs/appstateios.html index 969e6fbba75..1bde43068d9 100644 --- a/docs/appstateios.html +++ b/docs/appstateios.html @@ -1,4 +1,4 @@ -AppStateIOS – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppStateIOS #

Edit on GitHub

AppStateIOS can tell you if the app is in the foreground or background, +AppStateIOS – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppStateIOS #

Edit on GitHub

AppStateIOS can tell you if the app is in the foreground or background, and notify you when the state changes.

AppStateIOS is frequently used to determine the intent and proper behavior when handling push notifications.

iOS App States #

  • active - The app is running in the foreground
  • background - The app is running in the background. The user is either in another app or on the home screen
  • inactive - This is a state that occurs when transitioning between @@ -30,7 +30,7 @@ state will happen only momentarily.

static removeEventListener(type, handler) #

Remove a handler by passing the change event type and the handler

Properties #

currentState: TypeCastExpression #

// TODO: getCurrentAppState callback seems to be called at a really late stage // after app launch. Trying to get currentState when mounting App component // will likely to have the initial value here. -// Initialize to 'active' instead of null.

Examples #

Edit on GitHub
'use strict'; +// Initialize to 'active' instead of null.

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -112,7 +112,7 @@ exports.examples : 'In the simulator, hit Shift+Command+M to simulate a memory warning.', render(): ReactElement { return <AppStateSubscription showMemoryWarnings={true} />; } }, -];
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index c0464ae4e7d..fd49d25075e 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -AsyncStorage – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AsyncStorage #

Edit on GitHub

AsyncStorage is a simple, asynchronous, persistent, key-value storage +AsyncStorage – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AsyncStorage #

Edit on GitHub

AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.

On iOS, AsyncStorage is backed by native code that stores small values in a serialized @@ -85,7 +85,7 @@ AsyncStorage. }); }); }); -});

Properties #

Examples #

Edit on GitHub
'use strict'; +});

Properties #

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -189,7 +189,7 @@ exports.examples : 'Basics - getItem, setItem, removeItem', render(): ReactElement { return <BasicStorageExample />; } }, -];
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/backandroid.html b/docs/backandroid.html index 50745d248fd..8cbffc45e4f 100644 --- a/docs/backandroid.html +++ b/docs/backandroid.html @@ -1,4 +1,4 @@ -BackAndroid – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

BackAndroid #

Edit on GitHub

Detect hardware back button presses, and programmatically invoke the default back button +BackAndroid – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

BackAndroid #

Edit on GitHub

Detect hardware back button presses, and programmatically invoke the default back button functionality to exit the app if there are no listeners or if none of the listeners return true.

Example:

BackAndroid.addEventListener('hardwareBackPress', function() { if (!this.onMainScreen()) { this.goBack(); @@ -21,6 +21,6 @@ functionality to exit the app if there are no listeners or if none of the listen apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.26" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/cameraroll.html b/docs/cameraroll.html index d95a481701a..bde5d3766be 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,6 +1,6 @@ -CameraRoll – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

CameraRoll #

Edit on GitHub

CameraRoll provides access to the local camera roll / gallery.

Methods #

static saveImageWithTag(tag) #

Saves the image to the camera roll / gallery.

On Android, the tag is a local URI, such as "file:///sdcard/img.png".

On iOS, the tag can be one of the following:

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/clipboard.html b/docs/clipboard.html index a0a0e40f76b..71fdd7e11fe 100644 --- a/docs/clipboard.html +++ b/docs/clipboard.html @@ -1,8 +1,8 @@ -Clipboard – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Clipboard #

Edit on GitHub

Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and Android

Methods #

static getString() #

Get content of string type, this method returns a Promise, so you can use following code to get clipboard content

async _getContent() { +Clipboard – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Clipboard #

Edit on GitHub

Clipboard gives you an interface for setting and getting content from Clipboard on both iOS and Android

Methods #

static getString() #

Get content of string type, this method returns a Promise, so you can use following code to get clipboard content

async _getContent() { var content = await Clipboard.getString(); }

static setString(content) #

Set content of string type. You can use following code to set clipboard content

_setContent() { Clipboard.setString('hello world'); -}

@param the content to be stored in the clipboard.

Examples #

Edit on GitHub
'use strict'; +}

@param the content to be stored in the clipboard.

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -52,7 +52,7 @@ exports.examples return <ClipboardExample/>; } } -];
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/colors.html b/docs/colors.html index 143ad1bd630..d129ac4fe5f 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -1,4 +1,4 @@ -Colors – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Colors #

Edit on GitHub

The following formats are supported:

  • '#f0f' (#rgb)
  • '#f0fc' (#rgba)
  • '#ff00ff' (#rrggbb)
  • '#ff00ff00' (#rrggbbaa)
  • 'rgb(255, 255, 255)'
  • 'rgba(255, 255, 255, 1.0)'
  • 'hsl(360, 100%, 100%)'
  • 'hsla(360, 100%, 100%, 1.0)'
  • 'transparent'
  • 'red'
  • 0xff00ff00 (0xrrggbbaa)

For the named colors, React Native follows the CSS3 specification:

  • aliceblue (#f0f8ff)
  • antiquewhite (#faebd7)
  • aqua (#00ffff)
  • aquamarine (#7fffd4)
  • azure (#f0ffff)
  • beige (#f5f5dc)
  • bisque (#ffe4c4)
  • black (#000000)
  • blanchedalmond (#ffebcd)
  • blue (#0000ff)
  • blueviolet (#8a2be2)
  • brown (#a52a2a)
  • burlywood (#deb887)
  • cadetblue (#5f9ea0)
  • chartreuse (#7fff00)
  • chocolate (#d2691e)
  • coral (#ff7f50)
  • cornflowerblue (#6495ed)
  • cornsilk (#fff8dc)
  • crimson (#dc143c)
  • cyan (#00ffff)
  • darkblue (#00008b)
  • darkcyan (#008b8b)
  • darkgoldenrod (#b8860b)
  • darkgray (#a9a9a9)
  • darkgreen (#006400)
  • darkgrey (#a9a9a9)
  • darkkhaki (#bdb76b)
  • darkmagenta (#8b008b)
  • darkolivegreen (#556b2f)
  • darkorange (#ff8c00)
  • darkorchid (#9932cc)
  • darkred (#8b0000)
  • darksalmon (#e9967a)
  • darkseagreen (#8fbc8f)
  • darkslateblue (#483d8b)
  • darkslategray (#2f4f4f)
  • darkslategrey (#2f4f4f)
  • darkturquoise (#00ced1)
  • darkviolet (#9400d3)
  • deeppink (#ff1493)
  • deepskyblue (#00bfff)
  • dimgray (#696969)
  • dimgrey (#696969)
  • dodgerblue (#1e90ff)
  • firebrick (#b22222)
  • floralwhite (#fffaf0)
  • forestgreen (#228b22)
  • fuchsia (#ff00ff)
  • gainsboro (#dcdcdc)
  • ghostwhite (#f8f8ff)
  • gold (#ffd700)
  • goldenrod (#daa520)
  • gray (#808080)
  • green (#008000)
  • greenyellow (#adff2f)
  • grey (#808080)
  • honeydew (#f0fff0)
  • hotpink (#ff69b4)
  • indianred (#cd5c5c)
  • indigo (#4b0082)
  • ivory (#fffff0)
  • khaki (#f0e68c)
  • lavender (#e6e6fa)
  • lavenderblush (#fff0f5)
  • lawngreen (#7cfc00)
  • lemonchiffon (#fffacd)
  • lightblue (#add8e6)
  • lightcoral (#f08080)
  • lightcyan (#e0ffff)
  • lightgoldenrodyellow (#fafad2)
  • lightgray (#d3d3d3)
  • lightgreen (#90ee90)
  • lightgrey (#d3d3d3)
  • lightpink (#ffb6c1)
  • lightsalmon (#ffa07a)
  • lightseagreen (#20b2aa)
  • lightskyblue (#87cefa)
  • lightslategray (#778899)
  • lightslategrey (#778899)
  • lightsteelblue (#b0c4de)
  • lightyellow (#ffffe0)
  • lime (#00ff00)
  • limegreen (#32cd32)
  • linen (#faf0e6)
  • magenta (#ff00ff)
  • maroon (#800000)
  • mediumaquamarine (#66cdaa)
  • mediumblue (#0000cd)
  • mediumorchid (#ba55d3)
  • mediumpurple (#9370db)
  • mediumseagreen (#3cb371)
  • mediumslateblue (#7b68ee)
  • mediumspringgreen (#00fa9a)
  • mediumturquoise (#48d1cc)
  • mediumvioletred (#c71585)
  • midnightblue (#191970)
  • mintcream (#f5fffa)
  • mistyrose (#ffe4e1)
  • moccasin (#ffe4b5)
  • navajowhite (#ffdead)
  • navy (#000080)
  • oldlace (#fdf5e6)
  • olive (#808000)
  • olivedrab (#6b8e23)
  • orange (#ffa500)
  • orangered (#ff4500)
  • orchid (#da70d6)
  • palegoldenrod (#eee8aa)
  • palegreen (#98fb98)
  • paleturquoise (#afeeee)
  • palevioletred (#db7093)
  • papayawhip (#ffefd5)
  • peachpuff (#ffdab9)
  • peru (#cd853f)
  • pink (#ffc0cb)
  • plum (#dda0dd)
  • powderblue (#b0e0e6)
  • purple (#800080)
  • rebeccapurple (#663399)
  • red (#ff0000)
  • rosybrown (#bc8f8f)
  • royalblue (#4169e1)
  • saddlebrown (#8b4513)
  • salmon (#fa8072)
  • sandybrown (#f4a460)
  • seagreen (#2e8b57)
  • seashell (#fff5ee)
  • sienna (#a0522d)
  • silver (#c0c0c0)
  • skyblue (#87ceeb)
  • slateblue (#6a5acd)
  • slategray (#708090)
  • slategrey (#708090)
  • snow (#fffafa)
  • springgreen (#00ff7f)
  • steelblue (#4682b4)
  • tan (#d2b48c)
  • teal (#008080)
  • thistle (#d8bfd8)
  • tomato (#ff6347)
  • turquoise (#40e0d0)
  • violet (#ee82ee)
  • wheat (#f5deb3)
  • white (#ffffff)
  • whitesmoke (#f5f5f5)
  • yellow (#ffff00)
  • yellowgreen (#9acd32)

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Colors #

Edit on GitHub

The following formats are supported:

  • '#f0f' (#rgb)
  • '#f0fc' (#rgba)
  • '#ff00ff' (#rrggbb)
  • '#ff00ff00' (#rrggbbaa)
  • 'rgb(255, 255, 255)'
  • 'rgba(255, 255, 255, 1.0)'
  • 'hsl(360, 100%, 100%)'
  • 'hsla(360, 100%, 100%, 1.0)'
  • 'transparent'
  • 'red'
  • 0xff00ff00 (0xrrggbbaa)

For the named colors, React Native follows the CSS3 specification:

  • aliceblue (#f0f8ff)
  • antiquewhite (#faebd7)
  • aqua (#00ffff)
  • aquamarine (#7fffd4)
  • azure (#f0ffff)
  • beige (#f5f5dc)
  • bisque (#ffe4c4)
  • black (#000000)
  • blanchedalmond (#ffebcd)
  • blue (#0000ff)
  • blueviolet (#8a2be2)
  • brown (#a52a2a)
  • burlywood (#deb887)
  • cadetblue (#5f9ea0)
  • chartreuse (#7fff00)
  • chocolate (#d2691e)
  • coral (#ff7f50)
  • cornflowerblue (#6495ed)
  • cornsilk (#fff8dc)
  • crimson (#dc143c)
  • cyan (#00ffff)
  • darkblue (#00008b)
  • darkcyan (#008b8b)
  • darkgoldenrod (#b8860b)
  • darkgray (#a9a9a9)
  • darkgreen (#006400)
  • darkgrey (#a9a9a9)
  • darkkhaki (#bdb76b)
  • darkmagenta (#8b008b)
  • darkolivegreen (#556b2f)
  • darkorange (#ff8c00)
  • darkorchid (#9932cc)
  • darkred (#8b0000)
  • darksalmon (#e9967a)
  • darkseagreen (#8fbc8f)
  • darkslateblue (#483d8b)
  • darkslategray (#2f4f4f)
  • darkslategrey (#2f4f4f)
  • darkturquoise (#00ced1)
  • darkviolet (#9400d3)
  • deeppink (#ff1493)
  • deepskyblue (#00bfff)
  • dimgray (#696969)
  • dimgrey (#696969)
  • dodgerblue (#1e90ff)
  • firebrick (#b22222)
  • floralwhite (#fffaf0)
  • forestgreen (#228b22)
  • fuchsia (#ff00ff)
  • gainsboro (#dcdcdc)
  • ghostwhite (#f8f8ff)
  • gold (#ffd700)
  • goldenrod (#daa520)
  • gray (#808080)
  • green (#008000)
  • greenyellow (#adff2f)
  • grey (#808080)
  • honeydew (#f0fff0)
  • hotpink (#ff69b4)
  • indianred (#cd5c5c)
  • indigo (#4b0082)
  • ivory (#fffff0)
  • khaki (#f0e68c)
  • lavender (#e6e6fa)
  • lavenderblush (#fff0f5)
  • lawngreen (#7cfc00)
  • lemonchiffon (#fffacd)
  • lightblue (#add8e6)
  • lightcoral (#f08080)
  • lightcyan (#e0ffff)
  • lightgoldenrodyellow (#fafad2)
  • lightgray (#d3d3d3)
  • lightgreen (#90ee90)
  • lightgrey (#d3d3d3)
  • lightpink (#ffb6c1)
  • lightsalmon (#ffa07a)
  • lightseagreen (#20b2aa)
  • lightskyblue (#87cefa)
  • lightslategray (#778899)
  • lightslategrey (#778899)
  • lightsteelblue (#b0c4de)
  • lightyellow (#ffffe0)
  • lime (#00ff00)
  • limegreen (#32cd32)
  • linen (#faf0e6)
  • magenta (#ff00ff)
  • maroon (#800000)
  • mediumaquamarine (#66cdaa)
  • mediumblue (#0000cd)
  • mediumorchid (#ba55d3)
  • mediumpurple (#9370db)
  • mediumseagreen (#3cb371)
  • mediumslateblue (#7b68ee)
  • mediumspringgreen (#00fa9a)
  • mediumturquoise (#48d1cc)
  • mediumvioletred (#c71585)
  • midnightblue (#191970)
  • mintcream (#f5fffa)
  • mistyrose (#ffe4e1)
  • moccasin (#ffe4b5)
  • navajowhite (#ffdead)
  • navy (#000080)
  • oldlace (#fdf5e6)
  • olive (#808000)
  • olivedrab (#6b8e23)
  • orange (#ffa500)
  • orangered (#ff4500)
  • orchid (#da70d6)
  • palegoldenrod (#eee8aa)
  • palegreen (#98fb98)
  • paleturquoise (#afeeee)
  • palevioletred (#db7093)
  • papayawhip (#ffefd5)
  • peachpuff (#ffdab9)
  • peru (#cd853f)
  • pink (#ffc0cb)
  • plum (#dda0dd)
  • powderblue (#b0e0e6)
  • purple (#800080)
  • rebeccapurple (#663399)
  • red (#ff0000)
  • rosybrown (#bc8f8f)
  • royalblue (#4169e1)
  • saddlebrown (#8b4513)
  • salmon (#fa8072)
  • sandybrown (#f4a460)
  • seagreen (#2e8b57)
  • seashell (#fff5ee)
  • sienna (#a0522d)
  • silver (#c0c0c0)
  • skyblue (#87ceeb)
  • slateblue (#6a5acd)
  • slategray (#708090)
  • slategrey (#708090)
  • snow (#fffafa)
  • springgreen (#00ff7f)
  • steelblue (#4682b4)
  • tan (#d2b48c)
  • teal (#008080)
  • thistle (#d8bfd8)
  • tomato (#ff6347)
  • turquoise (#40e0d0)
  • violet (#ee82ee)
  • wheat (#f5deb3)
  • white (#ffffff)
  • whitesmoke (#f5f5f5)
  • yellow (#ffff00)
  • yellowgreen (#9acd32)

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/communication-ios.html b/docs/communication-ios.html index 2e3b3e57034..6a32873bdc0 100644 --- a/docs/communication-ios.html +++ b/docs/communication-ios.html @@ -1,4 +1,4 @@ -Communication between native and React Native – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Communication between native and React Native #

Edit on GitHub

In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

Introduction #

React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If we have an ancestor component that rely on the state of its descendant, the recommended solution would be to pass down a callback that would be used by the descendant to update the ancestor.

The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.

Properties #

Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.

Passing properties from native to React Native #

In order to embed a React Native view in a native component, we use RCTRootView. RCTRootView is a UIView that holds a React Native app. It also provides an interface between native side and the hosted app.

RCTRootView has an initializer that allows you to pass arbitrary properties down to the React Native app. The initialProperties parameter has to be an instance of NSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.

NSArray *imageList = @[@"http://foo.com/bar1.png", +Communication between native and React Native – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Communication between native and React Native #

Edit on GitHub

In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.

Introduction #

React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If we have an ancestor component that rely on the state of its descendant, the recommended solution would be to pass down a callback that would be used by the descendant to update the ancestor.

The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.

Properties #

Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.

Passing properties from native to React Native #

In order to embed a React Native view in a native component, we use RCTRootView. RCTRootView is a UIView that holds a React Native app. It also provides an interface between native side and the hosted app.

RCTRootView has an initializer that allows you to pass arbitrary properties down to the React Native app. The initialProperties parameter has to be an instance of NSDictionary. The dictionary is internally converted into a JSON object that the top-level JS component can reference.

NSArray *imageList = @[@"http://foo.com/bar1.png", @"http://foo.com/bar2.png"]; NSDictionary *props = @{@"images" : imageList}; @@ -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: @@ -88,6 +90,6 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.26" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/datepickerandroid.html b/docs/datepickerandroid.html index 614c360184d..cf87b2c7579 100644 --- a/docs/datepickerandroid.html +++ b/docs/datepickerandroid.html @@ -1,4 +1,4 @@ -DatePickerAndroid – React Native | A framework for building native apps using React

React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

DatePickerAndroid #

Edit on GitHub

Opens the standard Android date picker dialog.

Example #

try { +DatePickerAndroid – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

DatePickerAndroid #

Edit on GitHub

Opens the standard Android date picker dialog.

Example #

try { const {action, year, month, day} = await DatePickerAndroid.open({ // Use `new Date()` for current date. // May 25 2020. Month 0 is January. @@ -16,7 +16,7 @@ day if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being DatePickerAndroid.dismissedAction and all the other keys being undefined. Always check whether the action before reading the values.

Note the native date picker dialog has some UI glitches on Android 4 and lower -when using the minDate and maxDate options.

static dateSetAction() #

A date has been selected.

static dismissedAction() #

The dialog has been dismissed.

Examples #

Edit on GitHub
'use strict'; +when using the minDate and maxDate options.

static dateSetAction() #

A date has been selected.

static dismissedAction() #

The dialog has been dismissed.

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -120,7 +120,7 @@ when using the minDate and maxDate options.

< }, }); -module.exports = DatePickerAndroidExample;
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 4cc0fdf2d2c..4ffac0b27d7 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -DatePickerIOS – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

DatePickerIOS #

Edit on GitHub

Use DatePickerIOS to render a date/time picker (selector) on iOS. This is +DatePickerIOS – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

DatePickerIOS #

Edit on GitHub

Use DatePickerIOS to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the onDateChange callback and update the date prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.date as the @@ -6,7 +6,7 @@ source of truth.

Props

timeZoneOffsetInMinutes number #

Timezone offset in minutes.

By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For -instance, to show times in Pacific Standard Time, pass -7 * 60.

Examples #

Edit on GitHub
'use strict'; +instance, to show times in Pacific Standard Time, pass -7 * 60.

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -159,7 +159,7 @@ exports.examples : '500', fontSize: 14, }, -});
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/debugging.html b/docs/debugging.html index 61ae10f0263..ed7bc3009fa 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,5 +1,5 @@ -Debugging – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Debugging #

Edit on GitHub

Debugging React Native Apps #

To access the in-app developer menu:

  1. On iOS shake the device or press control + ⌘ + z in the simulator.
  2. On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press ⌘ + m or F2 to simulate hardware menu button click). You can also install Frappé, a tool for OS X, which allows you to emulate shaking of devices remotely. You can use ⌘ + Shift + R as a shortcut to trigger a shake from Frappé.

Hint

To disable the developer menu for production builds:

  1. For iOS open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ⌘ + <). Next, select Run from the menu on the left and change the Build Configuration to Release.
  2. For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle assembleRelease task). Although this behavior can be customized by passing proper value to ReactInstanceManager#setUseDeveloperSupport.

Android logging #

Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your Android app's logs.

Reload #

Selecting Reload (or pressing ⌘ + r in the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image to Images.xcassets on iOS or to res/drawable folder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.

YellowBox/RedBox #

Using console.warn will display an on-screen log on a yellow background. Click on this warning to show more information about it full screen and/or dismiss the warning.

You can use console.error to display a full screen error on a red background.

By default, the warning box is enabled in __DEV__. Set the following flag to disable it:

console.disableYellowBox = true; -console.warn('YellowBox is disabled.');

Specific warnings can be ignored programmatically by setting the array:

console.ignoredYellowBox = ['Warning: ...'];

Strings in console.ignoredYellowBox can be a prefix of the warning that should be ignored.

Chrome Developer Tools #

To debug the JavaScript code in Chrome, select Debug JS Remotely from the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.

In Chrome, press ⌘ + option + i or select View → Developer → Developer Tools to toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.

To debug on a real device:

  1. On iOS - open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
  2. On Android, if you're running Android 5.0+ device connected via USB you can use adb command line tool to setup port forwarding from the device to your computer. For that run: adb reverse tcp:8081 tcp:8081 (see this link for help on adb command). Alternatively, you can open dev menu on the device and select Dev Settings, then update Debug server host for device setting to the IP address of your computer.

Custom JavaScript debugger #

To use a custom JavaScript debugger define the REACT_DEBUGGER environment variable to a command that will start your custom debugger. That variable will be read from the Packager process. If that environment variable is set, selecting Debug JS Remotely from the developer menu will execute that command instead of opening Chrome. The exact command to be executed is the contents of the REACT_DEBUGGER environment variable followed by the space separated paths of all project roots (e.g. If you set REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative" then the command "node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app" will end up being executed). Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.

Live Reload #

This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:

  1. On iOS, select Enable Live Reload via the developer menu to have the application automatically reload when changes are made to the JavaScript.
  2. On Android, launch dev menu, go to Dev Settings and select Auto reload on JS change option

FPS (Frames per Second) Monitor #

On 0.5.0-rc and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.

Next →

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Debugging #

Edit on GitHub

Debugging React Native Apps #

To access the in-app developer menu:

  1. On iOS shake the device or press control + ⌘ + z in the simulator.
  2. On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press ⌘ + m or F2 to simulate hardware menu button click). You can also install Frappé, a tool for OS X, which allows you to emulate shaking of devices remotely. You can use ⌘ + Shift + R as a shortcut to trigger a shake from Frappé.

Hint

To disable the developer menu for production builds:

  1. For iOS open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ⌘ + <). Next, select Run from the menu on the left and change the Build Configuration to Release.
  2. For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle assembleRelease task). Although this behavior can be customized by passing proper value to ReactInstanceManager#setUseDeveloperSupport.

Android logging #

Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your Android app's logs.

Reload #

Selecting Reload (or pressing ⌘ + r in the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image to Images.xcassets on iOS or to res/drawable folder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.

YellowBox/RedBox #

Using console.warn will display an on-screen log on a yellow background. Click on this warning to show more information about it full screen and/or dismiss the warning.

You can use console.error to display a full screen error on a red background.

By default, the warning box is enabled in __DEV__. Set the following flag to disable it:

console.disableYellowBox = true; +console.warn('YellowBox is disabled.');

Specific warnings can be ignored programmatically by setting the array:

console.ignoredYellowBox = ['Warning: ...'];

Strings in console.ignoredYellowBox can be a prefix of the warning that should be ignored.

Chrome Developer Tools #

To debug the JavaScript code in Chrome, select Debug JS Remotely from the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.

In Chrome, press ⌘ + option + i or select View → Developer → Developer Tools to toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.

To debug on a real device:

  1. On iOS - open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
  2. On Android, if you're running Android 5.0+ device connected via USB you can use adb command line tool to setup port forwarding from the device to your computer. For that run: adb reverse tcp:8081 tcp:8081 (see this link for help on adb command). Alternatively, you can open dev menu on the device and select Dev Settings, then update Debug server host for device setting to the IP address of your computer.

Custom JavaScript debugger #

To use a custom JavaScript debugger define the REACT_DEBUGGER environment variable to a command that will start your custom debugger. That variable will be read from the Packager process. If that environment variable is set, selecting Debug JS Remotely from the developer menu will execute that command instead of opening Chrome. The exact command to be executed is the contents of the REACT_DEBUGGER environment variable followed by the space separated paths of all project roots (e.g. If you set REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative" then the command "node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app" will end up being executed). Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.

Live Reload #

This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:

  1. On iOS, select Enable Live Reload via the developer menu to have the application automatically reload when changes are made to the JavaScript.
  2. On Android, launch dev menu, go to Dev Settings and select Auto reload on JS change option

FPS (Frames per Second) Monitor #

On 0.5.0-rc and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.

Next →

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/dimensions.html b/docs/dimensions.html index bec3d07e550..e1527fbfb49 100644 --- a/docs/dimensions.html +++ b/docs/dimensions.html @@ -1,4 +1,4 @@ -Dimensions – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Dimensions #

Edit on GitHub

Methods #

static set(dims) #

This should only be called from native code by sending the +Dimensions – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Dimensions #

Edit on GitHub

Methods #

static set(dims) #

This should only be called from native code by sending the didUpdateDimensions event.

@param {object} dims Simple string-keyed object of dimensions to set

static get(dim) #

Initial dimensions are set before runApplication is called so they should be available before any other require's are run, but may be updated later.

Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on @@ -21,6 +21,6 @@ setting a value in a StyleSheet).

Example: var {height, apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.25" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.26" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html index a644cc9bb92..a47cfd670c9 100644 --- a/docs/direct-manipulation.html +++ b/docs/direct-manipulation.html @@ -1,4 +1,4 @@ -Direct Manipulation – React Native | A framework for building native apps using React

React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Direct Manipulation #

Edit on GitHub

It is sometimes necessary to make changes directly to a component +Direct Manipulation – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Direct Manipulation #

Edit on GitHub

It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile @@ -146,6 +146,6 @@ use setState instead of setNativeProps.

\ No newline at end of file diff --git a/docs/drawerlayoutandroid.html b/docs/drawerlayoutandroid.html index b6984c80172..7286124142c 100644 --- a/docs/drawerlayoutandroid.html +++ b/docs/drawerlayoutandroid.html @@ -1,4 +1,4 @@ -DrawerLayoutAndroid – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

DrawerLayoutAndroid #

Edit on GitHub

React component that wraps the platform DrawerLayout (Android only). The +DrawerLayoutAndroid – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

DrawerLayoutAndroid #

Edit on GitHub

React component that wraps the platform DrawerLayout (Android only). The Drawer (typically used for navigation) is rendered with renderNavigationView and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the @@ -53,6 +53,6 @@ effect on API 21+.

\ No newline at end of file diff --git a/docs/embedded-app-android.html b/docs/embedded-app-android.html index 59bc5d2389f..24df82741f1 100644 --- a/docs/embedded-app-android.html +++ b/docs/embedded-app-android.html @@ -1,4 +1,4 @@ -Integrating with Existing Apps – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps #

Edit on GitHub

Since React makes no assumptions about the rest of your technology stack, it's easily embeddable within an existing non-React Native app.

Requirements #

  • an existing, gradle-based Android app
  • Node.js, see Getting Started for setup instructions

Prepare your app #

In your app's build.gradle file add the React Native dependency:

compile 'com.facebook.react:react-native:0.20.+'

You can find the latest version of the react-native library on Maven Central. Next, make sure you have the Internet permission in your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.

Add native code #

You need to add some native code in order to start the React Native runtime and get it to render something. To do this, we're going to create an Activity that creates a ReactRootView, starts a React application inside it and sets it as the main content view.

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { +Integrating with Existing Apps – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps #

Edit on GitHub

Since React makes no assumptions about the rest of your technology stack, it's easily embeddable within an existing non-React Native app.

Requirements #

  • an existing, gradle-based Android app
  • Node.js, see Getting Started for setup instructions

Prepare your app #

In your app's build.gradle file add the React Native dependency:

compile 'com.facebook.react:react-native:0.20.+'

You can find the latest version of the react-native library on Maven Central. Next, make sure you have the Internet permission in your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.

Add native code #

You need to add some native code in order to start the React Native runtime and get it to render something. To do this, we're going to create an Activity that creates a ReactRootView, starts a React application inside it and sets it as the main content view.

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; @@ -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 →

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index c42b446d13a..ba40be52d39 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -1,4 +1,4 @@ -Integrating with Existing Apps – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps #

Edit on GitHub

Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.

Requirements #

  • CocoaPods – gem install cocoapods
  • Node.js
    • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
  • Install the react-native package from npm by running the following command in the root directory of your project:
    • npm install react-native

At this point you should have the React Native package installed under a directory named node_modules as a sibling to your .xcodeproj file.

Install React Native Using CocoaPods #

CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't installed CocoaPods yet, check out this tutorial.

When you are ready to work with CocoaPods, add the following lines to Podfile. If you don't have one, then create it under the root directory of your project.

# Depending on how your project is organized, your node_modules directory may be +Integrating with Existing Apps – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps #

Edit on GitHub

Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.

Requirements #

  • CocoaPods – gem install cocoapods
  • Node.js
    • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
  • Install the react-native package from npm by running the following command in the root directory of your project:
    • npm install react-native

At this point you should have the React Native package installed under a directory named node_modules as a sibling to your .xcodeproj file.

Install React Native Using CocoaPods #

CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't installed CocoaPods yet, check out this tutorial.

When you are ready to work with CocoaPods, add the following lines to Podfile. If you don't have one, then create it under the root directory of your project.

# Depending on how your project is organized, your node_modules directory may be # somewhere else; tell CocoaPods where you've installed react-native from npm pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', @@ -10,12 +10,15 @@ pod 'React']

Remember to install all subspecs you need. The <Text> element cannot be used without the RCTText subspec, for example.

Then install your pods:

$ pod install

Create Your React Native App #

There are two pieces you’ll need to set up:

  1. The root JavaScript file that will contain your actual React Native app and other components
  2. Wrapper Objective-C code that will load up your script and create a RCTRootView to display and manage your React Native components

First, create a directory for your app’s React code and create a simple index.ios.js file:

$ mkdir ReactComponent $ touch ReactComponent/index.ios.js

Copy & paste following starter code for index.ios.js – it’s a barebones React Native app:

'use strict'; -import React, { +import React from 'react'; +import { + AppRegistry, + StyleSheet, Text, View } from 'react-native'; -var styles = React.StyleSheet.create({ +var styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'red' @@ -32,7 +35,7 @@ class SimpleApp extends } } -React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp will be your module name, which will be used later on.

Add Container View To Your App #

You should now add a container view for the React Native component. It can be any UIView in your app.

Container view example

However, let's subclass UIView for the sake of clean code. Let's name it ReactView. Open up Yourproject.xcworkspace and create a new class ReactView (You can name it whatever you like :)).

// ReactView.h +AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp will be your module name, which will be used later on.

Add Container View To Your App #

You should now add a container view for the React Native component. It can be any UIView in your app.

Container view example

However, let's subclass UIView for the sake of clean code. Let's name it ReactView. Open up Yourproject.xcworkspace and create a new class ReactView (You can name it whatever you like :)).

// ReactView.h #import <UIKit/UIKit.h> @interface ReactView : UIView @@ -96,6 +99,6 @@ class ReactView \ No newline at end of file diff --git a/docs/flexbox.html b/docs/flexbox.html index e5a2bc5c885..1a890301d2b 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -Flexbox – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Flexbox #

Edit on GitHub

Props #

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

flexDirection enum('row', 'column') #

flexWrap enum('wrap', 'nowrap') #

height number #

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

position enum('absolute', 'relative') #

right number #

top number #

width number #

Next →
© 2016 Facebook Inc.
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Flexbox #

Edit on GitHub

Props #

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

flexDirection enum('row', 'column') #

flexWrap enum('wrap', 'nowrap') #

height number #

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

position enum('absolute', 'relative') #

right number #

top number #

width number #

Next →
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/geolocation.html b/docs/geolocation.html index 6fcbbc1c494..c49cf60a352 100644 --- a/docs/geolocation.html +++ b/docs/geolocation.html @@ -1,4 +1,4 @@ -Geolocation – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Geolocation #

Edit on GitHub

The Geolocation API follows the web spec: +Geolocation – React Native | A framework for building native apps using React

React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Geolocation #

Edit on GitHub

The Geolocation API follows the web spec: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation

iOS #

You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project with react-native init.

Android #

To request access to location, you need to add the following line to your @@ -6,7 +6,7 @@ app's AndroidManifest.xml:

<uses-permission and options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) On Android, this can return almost immediately if the location is cached or request an update, which might take a while.

static watchPosition(success, error?, options?) #

Invokes the success callback whenever the location changes. Supported -options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m)

static clearWatch(watchID) #

static stopObserving() #

Examples #

Edit on GitHub
/* eslint no-console: 0 */ +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m)

static clearWatch(watchID) #

static stopObserving() #

Examples #

Edit on GitHub
/* eslint no-console: 0 */ 'use strict'; @@ -80,7 +80,7 @@ exports.examples : { fontWeight: '500', }, -});
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index 0524f7ff82b..7878d240dd2 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -Gesture Responder System – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Gesture Responder System #

Edit on GitHub

Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.

Best Practices #

Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes. Every action should have the following attributes:

  • Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
  • Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away

These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.

TouchableHighlight and Touchable* #

The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.

Responder Lifecycle #

A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:

  • View.props.onStartShouldSetResponder: (evt) => true, - Does this view want to become responder on the start of a touch?
  • View.props.onMoveShouldSetResponder: (evt) => true, - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

If the View returns true and attempts to become the responder, one of the following will happen:

  • View.props.onResponderGrant: (evt) => {} - The View is now responding for touch events. This is the time to highlight and show the user what is happening
  • View.props.onResponderReject: (evt) => {} - Something else is the responder right now and will not release it

If the view is responding, the following handlers can be called:

  • View.props.onResponderMove: (evt) => {} - The user is moving their finger
  • View.props.onResponderRelease: (evt) => {} - Fired at the end of the touch, ie "touchUp"
  • View.props.onResponderTerminationRequest: (evt) => true - Something else wants to become responder. Should this view release the responder? Returning true allows release
  • View.props.onResponderTerminate: (evt) => {} - The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

evt is a synthetic touch event with the following form:

  • nativeEvent
    • changedTouches - Array of all touch events that have changed since the last event
    • identifier - The ID of the touch
    • locationX - The X position of the touch, relative to the element
    • locationY - The Y position of the touch, relative to the element
    • pageX - The X position of the touch, relative to the root element
    • pageY - The Y position of the touch, relative to the root element
    • target - The node id of the element receiving the touch event
    • timestamp - A time identifier for the touch, useful for velocity calculation
    • touches - Array of all current touches on the screen

Capture ShouldSet Handlers #

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

  • View.props.onStartShouldSetResponderCapture: (evt) => true,
  • View.props.onMoveShouldSetResponderCapture: (evt) => true,

PanResponder #

For higher-level gesture interpretation, check out PanResponder.

Next →

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Gesture Responder System #

Edit on GitHub

Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.

Best Practices #

Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes. Every action should have the following attributes:

  • Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
  • Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away

These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.

TouchableHighlight and Touchable* #

The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.

Responder Lifecycle #

A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:

  • View.props.onStartShouldSetResponder: (evt) => true, - Does this view want to become responder on the start of a touch?
  • View.props.onMoveShouldSetResponder: (evt) => true, - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

If the View returns true and attempts to become the responder, one of the following will happen:

  • View.props.onResponderGrant: (evt) => {} - The View is now responding for touch events. This is the time to highlight and show the user what is happening
  • View.props.onResponderReject: (evt) => {} - Something else is the responder right now and will not release it

If the view is responding, the following handlers can be called:

  • View.props.onResponderMove: (evt) => {} - The user is moving their finger
  • View.props.onResponderRelease: (evt) => {} - Fired at the end of the touch, ie "touchUp"
  • View.props.onResponderTerminationRequest: (evt) => true - Something else wants to become responder. Should this view release the responder? Returning true allows release
  • View.props.onResponderTerminate: (evt) => {} - The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

evt is a synthetic touch event with the following form:

  • nativeEvent
    • changedTouches - Array of all touch events that have changed since the last event
    • identifier - The ID of the touch
    • locationX - The X position of the touch, relative to the element
    • locationY - The Y position of the touch, relative to the element
    • pageX - The X position of the touch, relative to the root element
    • pageY - The Y position of the touch, relative to the root element
    • target - The node id of the element receiving the touch event
    • timestamp - A time identifier for the touch, useful for velocity calculation
    • touches - Array of all current touches on the screen

Capture ShouldSet Handlers #

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

  • View.props.onStartShouldSetResponderCapture: (evt) => true,
  • View.props.onMoveShouldSetResponderCapture: (evt) => true,

PanResponder #

For higher-level gesture interpretation, check out PanResponder.

Next →

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index a35ea35bf5c..7b6afb7ad3e 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,4 +1,4 @@ -Getting Started – React Native | A framework for building native apps using React
React Native0.25

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Getting Started #

Edit on GitHub
+Getting Started – React Native | A framework for building native apps using React
React Native0.26

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Getting Started #

Edit on GitHub