From 8f875655523a01140ed34d14b63bfcfc01ea41ed Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 8 Nov 2016 10:01:45 +0000 Subject: [PATCH] Updated docs for 0.37 --- docs/accessibility.html | 4 +- docs/actionsheetios.html | 14 +-- docs/activityindicator.html | 11 +- docs/activityindicatorios.html | 22 ---- docs/adsupportios.html | 6 +- docs/alert.html | 6 +- docs/alertios.html | 8 +- docs/android-building-from-source.html | 6 +- docs/android-ui-performance.html | 4 +- docs/animated.html | 4 +- docs/animations.html | 9 +- docs/appregistry.html | 6 +- docs/appstate.html | 10 +- docs/asyncstorage.html | 6 +- docs/backandroid.html | 4 +- docs/button.html | 118 +++++++++++++++++++ docs/cameraroll.html | 10 +- docs/clipboard.html | 4 +- docs/colors.html | 4 +- docs/communication-ios.html | 4 +- docs/datepickerandroid.html | 4 +- docs/datepickerios.html | 12 +- docs/debugging.html | 4 +- docs/dimensions.html | 4 +- docs/direct-manipulation.html | 4 +- docs/drawerlayoutandroid.html | 24 ++-- docs/easing.html | 4 +- docs/flexbox.html | 4 +- docs/geolocation.html | 6 +- docs/gesture-responder-system.html | 4 +- docs/getting-started.html | 4 +- docs/handling-text-input.html | 4 +- docs/handling-touches.html | 4 +- docs/headless-js-android.html | 4 +- docs/height-and-width.html | 4 +- docs/image.html | 33 ++---- docs/imageeditor.html | 4 +- docs/imagepickerios.html | 4 +- docs/images.html | 4 +- docs/imagestore.html | 6 +- docs/integration-with-existing-apps.html | 21 ++-- docs/intentandroid.html | 51 --------- docs/interactionmanager.html | 6 +- docs/javascript-environment.html | 4 +- docs/keyboard.html | 4 +- docs/keyboardavoidingview.html | 6 +- docs/layout-props.html | 110 +++++++----------- docs/layoutanimation.html | 8 +- docs/linking-libraries-ios.html | 4 +- docs/linking.html | 4 +- docs/listview.html | 4 +- docs/listviewdatasource.html | 4 +- docs/mapview.html | 4 +- docs/modal.html | 13 +-- docs/more-resources.html | 4 +- docs/native-components-android.html | 4 +- docs/native-components-ios.html | 4 +- docs/native-modules-android.html | 8 +- docs/native-modules-ios.html | 9 +- docs/nativemethodsmixin.html | 6 +- docs/nativemodules.html | 19 ---- docs/navigation.html | 4 +- docs/navigator.html | 8 +- docs/navigatorios.html | 12 +- docs/netinfo.html | 14 +-- docs/network.html | 6 +- docs/panresponder.html | 7 +- docs/performance.html | 6 +- docs/permissionsandroid.html | 4 +- docs/picker.html | 5 +- docs/pickerios.html | 10 +- docs/pixelratio.html | 4 +- docs/platform-specific-code.html | 4 +- docs/progressbarandroid.html | 6 +- docs/progressviewios.html | 4 +- docs/props.html | 4 +- docs/pushnotificationios.html | 12 +- docs/refreshcontrol.html | 4 +- docs/running-on-device-android.html | 4 +- docs/running-on-device-ios.html | 4 +- docs/running-on-simulator-ios.html | 4 +- docs/scrollview.html | 6 +- docs/segmentedcontrolios.html | 26 ++--- docs/settings.html | 4 +- docs/shadow-props.html | 6 +- docs/signed-apk-android.html | 4 +- docs/slider.html | 34 +++--- docs/sliderios.html | 33 ------ docs/snapshotviewios.html | 4 +- docs/state.html | 4 +- docs/statusbar.html | 6 +- docs/statusbarios.html | 4 +- docs/style.html | 4 +- docs/stylesheet.html | 4 +- docs/switch.html | 16 +-- docs/switchandroid.html | 19 ---- docs/switchios.html | 21 ---- docs/systrace.html | 6 +- docs/tabbarios-item.html | 4 +- docs/tabbarios.html | 6 +- docs/testing.html | 4 +- docs/text.html | 51 ++------- docs/textinput.html | 138 ++++++++++------------- docs/timepickerandroid.html | 4 +- docs/timers.html | 4 +- docs/toastandroid.html | 4 +- docs/toolbarandroid.html | 25 ++-- docs/touchablehighlight.html | 4 +- docs/touchablenativefeedback.html | 6 +- docs/touchableopacity.html | 4 +- docs/touchablewithoutfeedback.html | 4 +- docs/transforms.html | 19 +--- docs/troubleshooting.html | 6 +- docs/tutorial.html | 4 +- docs/upgrading.html | 4 +- docs/using-a-listview.html | 4 +- docs/using-a-scrollview.html | 4 +- docs/using-navigators.html | 19 ++-- docs/vibration.html | 4 +- docs/vibrationios.html | 4 +- docs/view.html | 73 +++++------- docs/viewpagerandroid.html | 21 ++-- docs/webview.html | 73 ++++++++++-- img/buttonExample.png | Bin 0 -> 338276 bytes index.html | 6 +- releases/0.37/versions.html | 2 +- versions.html | 6 +- 127 files changed, 696 insertions(+), 836 deletions(-) delete mode 100644 docs/activityindicatorios.html create mode 100644 docs/button.html delete mode 100644 docs/intentandroid.html delete mode 100644 docs/nativemodules.html delete mode 100644 docs/sliderios.html delete mode 100644 docs/switchandroid.html delete mode 100644 docs/switchios.html create mode 100644 img/buttonExample.png diff --git a/docs/accessibility.html b/docs/accessibility.html index 86c12a9452e..766274a6013 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -1,4 +1,4 @@ -Accessibility
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Accessibility #

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 Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Accessibility #

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.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 5c69db6abe0..8586acf400b 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -1,4 +1,4 @@ -ActionSheetIOS
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

Display an iOS action sheet. The options object must contain one or more +ActionSheetIOS

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActionSheetIOS #

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 and url and can additionally have a subject or excludedActivityTypes:

  • url (string) - a URL to share
  • message (string) - a message to share
  • subject (string) - a subject for the message
  • excludedActivityTypes (array) - the activities to exclude from the ActionSheet

NOTE: if url points to a local file, or is a base64-encoded @@ -180,27 +180,27 @@ exports.description .examples = [ { title: 'Show Action Sheet', - render(): ReactElement<any> { return <ActionSheetExample />; } + render(): React.Element<any> { return <ActionSheetExample />; } }, { title: 'Show Action Sheet with tinted buttons', - render(): ReactElement<any> { return <ActionSheetTintExample />; } + render(): React.Element<any> { return <ActionSheetTintExample />; } }, { title: 'Show Share Action Sheet', - render(): ReactElement<any> { + render(): React.Element<any> { return <ShareActionSheetExample url="https://code.facebook.com" />; } }, { title: 'Share Local Image', - render(): ReactElement<any> { + render(): React.Element<any> { return <ShareActionSheetExample url="bunny.png" />; } }, { title: 'Share Screenshot', - render(): ReactElement<any> { + render(): React.Element<any> { return <ShareScreenshotExample />; } } @@ -220,6 +220,6 @@ exports.examples \ No newline at end of file diff --git a/docs/activityindicator.html b/docs/activityindicator.html index b9adcdb29ed..9042cb74a17 100644 --- a/docs/activityindicator.html +++ b/docs/activityindicator.html @@ -1,8 +1,5 @@ -ActivityIndicator

React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicator #

Displays a circular loading indicator.

Props #

View props... #

animating PropTypes.bool #

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

color color #

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

size PropTypes.oneOfType([ - PropTypes.oneOf([ 'small', 'large' ]), - PropTypes.number, -]) #

Size of the indicator (default is 'small'). -Passing a number to the size prop is only supported on Android.

ioshidesWhenStopped PropTypes.bool #

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

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; +ActivityIndicator
React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicator #

Displays a circular loading indicator.

Props #

View props... #

animating bool #

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

color color #

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

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

Size of the indicator (default is 'small'). +Passing a number to the size prop is only supported on Android.

ioshidesWhenStopped bool #

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

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; import React, { Component } from 'react'; import { ActivityIndicator, StyleSheet, View } from 'react-native'; @@ -183,7 +180,7 @@ const styles = StyleSheet: 'space-around', padding: 8, }, -});

Run this example

Run example in simulator

Powered by appetize.io

Next →
\ No newline at end of file diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html deleted file mode 100644 index fc735b093b8..00000000000 --- a/docs/activityindicatorios.html +++ /dev/null @@ -1,22 +0,0 @@ -ActivityIndicatorIOS
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ActivityIndicatorIOS #

Deprecated, use ActivityIndicator instead.

Props #

View props... #

animating PropTypes.bool #

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

color PropTypes.string #

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

hidesWhenStopped PropTypes.bool #

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

onLayout PropTypes.func #

Invoked on mount and layout changes with

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

size PropTypes.oneOf([ - 'small', - 'large', -]) #

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

You can edit the content above on GitHub and send us a pull request!

← PrevNext →
\ No newline at end of file diff --git a/docs/adsupportios.html b/docs/adsupportios.html index 6bf084d9e91..ab911e7a68b 100644 --- a/docs/adsupportios.html +++ b/docs/adsupportios.html @@ -1,4 +1,4 @@ -AdSupportIOS
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AdSupportIOS #

Methods #

static getAdvertisingId(onSuccess, onFailure) #

static getAdvertisingTrackingEnabled(onSuccess, onFailure) #

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; +AdSupportIOS
React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AdSupportIOS #

Methods #

static getAdvertisingId(onSuccess, onFailure) #

static getAdvertisingTrackingEnabled(onSuccess, onFailure) #

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -16,7 +16,7 @@ exports.description .examples = [ { title: 'Ad Support IOS', - render: function(): ReactElement<any> { + render: function(): React.Element<any> { return <AdSupportIOSExample />; }, } @@ -100,6 +100,6 @@ class AdSupportIOSExample extends \ No newline at end of file diff --git a/docs/alert.html b/docs/alert.html index 442b15153d6..7a56e2049b9 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -1,4 +1,4 @@ -Alert
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Alert #

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the +Alert

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Alert #

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?, options?, type?) #

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; +)

Methods #

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

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -164,6 +164,6 @@ module.exports \ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index b233e5db7fa..275c7f49faf 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AlertIOS #

AlertIOS provides functionality to create an iOS alert dialog with a +AlertIOS

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AlertIOS #

AlertIOS provides functionality to create an iOS alert dialog with a message or create a prompt for user input.

Creating an iOS alert:

AlertIOS.alert( 'Sync Complete', 'All your data are belong to us.' @@ -40,7 +40,7 @@ cross-platform support if you don't need to create iOS-only prompts.

=> console.log("Your username is "+text), null, 'default' -);

Type Definitions #

AlertType #

An Alert button type

Type:
$Enum

Constants:
ValueDescription
default

Default alert with no inputs

plain-text

Plain text input alert

secure-text

Secure text input alert

login-password

Login and password alert

AlertButtonStyle #

An Alert button style

Type:
$Enum

Constants:
ValueDescription
default

Default button style

cancel

Cancel button style

destructive

Destructive button style

ButtonsArray #

Array or buttons

Type:
Array

Properties:
Name and TypeDescription
[text]

string

Button label

[onPress]

function

Callback function when button pressed

[style]

Button style

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; +);

Type Definitions #

AlertType #

An Alert button type

Type:
$Enum

Constants:
ValueDescription
default

Default alert with no inputs

plain-text

Plain text input alert

secure-text

Secure text input alert

login-password

Login and password alert

AlertButtonStyle #

An Alert button style

Type:
$Enum

Constants:
ValueDescription
default

Default button style

cancel

Cancel button style

destructive

Destructive button style

ButtonsArray #

Array or buttons

Type:
Array

Properties:
Name and TypeDescription
[text]

string

Button label

[onPress]

function

Callback function when button pressed

[style]

Button style

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -65,7 +65,7 @@ exports.examples }, { title: 'Prompt Options', - render(): ReactElement<any> { + render(): React.Element<any> { return <PromptOptions />; } }, @@ -219,6 +219,6 @@ class PromptOptions extends \ No newline at end of file diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html index 1a4828835d8..0c287ec00fd 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 Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Building React Native from source #

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

Step 1: Set environment variables through your local shell.

Note: Files may vary based on shell flavor. See below for examples from common shells.

  • bash: .bash_profile or .bashrc
  • zsh: .zprofile or .zshrc
  • ksh: .profile or $ENV

Example:

export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx +Building React Native from source
React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Building React Native from source #

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

Step 1: Set environment variables through your local shell.

Note: Files may vary based on shell flavor. See below for examples from common shells.

  • bash: .bash_profile or .bashrc
  • zsh: .zprofile or .zshrc
  • ksh: .profile or $ENV

Example:

export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r10e

Step 2: Create a local.properties file in the android directory of your react-native app with the following contents:

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 { @@ -13,7 +13,7 @@ include ':ReactAndroid' project(':ReactAndroid').projectDir = new File( rootProject.projectDir, '../node_modules/react-native/ReactAndroid') -...

Modify your android/app/build.gradle to use the :ReactAndroid project instead of the pre-compiled library, e.g. - replace compile 'com.facebook.react:react-native:0.16.+' with compile project(':ReactAndroid'):

... +...

Modify your android/app/build.gradle to use the :ReactAndroid project instead of the pre-compiled library, e.g. - replace compile 'com.facebook.react:react-native:+' with compile project(':ReactAndroid'):

... dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' @@ -44,6 +44,6 @@ dependencies { apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/android-ui-performance.html b/docs/android-ui-performance.html index 3d61718d2e8..541dbd0c608 100644 --- a/docs/android-ui-performance.html +++ b/docs/android-ui-performance.html @@ -1,4 +1,4 @@ -Profiling Android UI Performance
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Profiling Android UI Performance #

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

If your trace .html file isn't opening correctly, check your browser console for the following:

ObjectObserveError

Since Object.observe was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:

  • Opening tab in chrome chrome://tracing
  • Selecting load
  • Selecting the html file generated from the previous command.

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.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Profiling Android UI Performance #

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

If your trace .html file isn't opening correctly, check your browser console for the following:

ObjectObserveError

Since Object.observe was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:

  • Opening tab in chrome chrome://tracing
  • Selecting load
  • Selecting the html file generated from the previous command.

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.

← PrevNext →

You can edit the content above on GitHub and send us a pull request!

\ No newline at end of file diff --git a/docs/animated.html b/docs/animated.html index 167d2d97a99..9c8d0b27622 100644 --- a/docs/animated.html +++ b/docs/animated.html @@ -1,4 +1,4 @@ -Animated
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Animated #

Animations are an important part of modern UX, and the Animated +Animated

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Animated #

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 @@ -366,6 +366,6 @@ exports.examples \ No newline at end of file diff --git a/docs/animations.html b/docs/animations.html index f90bf2935a6..d1a081cdfef 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,4 +1,4 @@ -Animations

React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Animations #

Fluid, meaningful animations are essential to the mobile user experience. Like +Animations

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Animations #

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 @@ -85,7 +85,10 @@ back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:

value.interpolate({ inputRange: [-300, -100, 0, 100, 101], outputRange: [300, 0, 1, 0, 0], -});

Which would map like so:

InputOutput
-400450
-300300
-200150
-1000
-500.5
01
500.5
1000
1010
2000

interpolation also supports arbitrary easing functions, many of which are +});

Which would map like so:

InputOutput
-400450
-300300
-200150
-1000
-500.5
01
500.5
1000
1010
2000

interpolate also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:

value.interpolate({ + inputRange: [0, 360], + outputRange: ['0deg', '360deg'] +})

interpolation also supports arbitrary easing functions, many of which are already implemented in the Easing class including quadratic, exponential, and bezier curves as well as functions @@ -391,6 +394,6 @@ source.

\ No newline at end of file diff --git a/docs/appregistry.html b/docs/appregistry.html index 3245a89a7d8..473c142be5d 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -1,4 +1,4 @@ -AppRegistry
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AppRegistry #

AppRegistry is the JS entry point to running all React Native apps. App +AppRegistry

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AppRegistry #

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 @@ -12,7 +12,7 @@ sure the JS execution environment is setup before other modules are the only argument; when the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context.

static startHeadlessTask(taskId, taskKey, data) #

Only called from native code. Starts a headless task.

@param taskId the native id for this task instance to keep track of its execution @param taskKey the key for the task to start -@param data the data to pass to the task

You can edit the content above on GitHub and send us a pull request!

← PrevNext →
\ No newline at end of file diff --git a/docs/appstate.html b/docs/appstate.html index 584732fd849..057a4bb5031 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,4 @@ -AppState
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AppState #

AppState can tell you if the app is in the foreground or background, +AppState

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AppState #

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 state that occurs when transitioning between @@ -105,17 +105,17 @@ exports.examples { title: 'Subscribed AppState:', description: 'This changes according to the current state, so you can only ever see it rendered as "active"', - render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={true} />; } + render(): React.Element<any> { return <AppStateSubscription showCurrentOnly={true} />; } }, { title: 'Previous states:', - render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={false} />; } + render(): React.Element<any> { return <AppStateSubscription showCurrentOnly={false} />; } }, { platform: 'ios', title: 'Memory Warnings', description: 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.', - render(): ReactElement<any> { return <AppStateSubscription showMemoryWarnings={true} />; } + render(): React.Element<any> { return <AppStateSubscription showMemoryWarnings={true} />; } }, ];

Run this example

Run example in simulator

Powered by appetize.io

← PrevNext →
\ No newline at end of file diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index 845bb3df0db..8c42aad44aa 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -AsyncStorage
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AsyncStorage #

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage +AsyncStorage

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

AsyncStorage #

AsyncStorage is a simple, unencrypted, 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 @@ -215,7 +215,7 @@ exports.description .examples = [ { title: 'Basics - getItem, setItem, removeItem', - render(): ReactElement<any> { return <BasicStorageExample />; } + render(): React.Element<any> { return <BasicStorageExample />; } }, ];

Run this example

Run example in simulator

Powered by appetize.io

← PrevNext →
\ No newline at end of file diff --git a/docs/backandroid.html b/docs/backandroid.html index 7d8d3467187..78b577598db 100644 --- a/docs/backandroid.html +++ b/docs/backandroid.html @@ -1,4 +1,4 @@ -BackAndroid
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

BackAndroid #

Detect hardware back button presses, and programmatically invoke the default back button +BackAndroid

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

BackAndroid #

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() { // this.onMainScreen and this.goBack are just examples, you need to use your own implementation here // Typically you would use the navigator here to go to the last state. @@ -24,6 +24,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.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/button.html b/docs/button.html new file mode 100644 index 00000000000..759998e4307 --- /dev/null +++ b/docs/button.html @@ -0,0 +1,118 @@ +Button
React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Button #

A basic button component that should render nicely on any platform. Supports +a minimal level of customization.

+ +

If this button doesn't look right for your app, you can build your own +button using TouchableOpacity +or TouchableNativeFeedback. +For inspiration, look at the source code for this button component. +Or, take a look at the wide variety of button components built by the community.

Example usage:

<Button + onPress={onPressLearnMore} + title="Learn More" + color="#841584" + accessibilityLabel="Learn more about this purple button" +/>

Props #

accessibilityLabel string #

Text to display for blindness accessibility features

color color #

Color of the text (iOS), or background color of the button (Android)

disabled bool #

If true, disable all interactions for this component.

onPress function #

Handler to be called when the user taps the button

title string #

Text to display inside the button

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; + +const React = require('react'); +const ReactNative = require('react-native'); +const { + Alert, + Button, + View, +} = ReactNative; + +const onButtonPress = () => { + Alert.alert('Button has been pressed!'); +}; + +exports.displayName = 'ButtonExample'; +exports.framework = 'React'; +exports.title = '<Button>'; +exports.description = 'Simple React Native button component.'; + +exports.examples = [ + { + title: 'Simple Button', + description: 'The title and onPress handler are required. It is ' + + 'recommended to set accessibilityLabel to help make your app usable by ' + + 'everyone.', + render: function() { + return ( + <Button + onPress={onButtonPress} + title="Press Me" + accessibilityLabel="See an informative alert" + /> + ); + }, + }, + { + title: 'Adjusted color', + description: 'Adjusts the color in a way that looks standard on each ' + + 'platform. On iOS, the color prop controls the color of the text. On ' + + 'Android, the color adjusts the background color of the button.', + render: function() { + return ( + <Button + onPress={onButtonPress} + title="Press Purple" + color="#841584" + accessibilityLabel="Learn more about purple" + /> + ); + }, + }, + { + title: 'Fit to text layout', + description: 'This layout strategy lets the title define the width of ' + + 'the button', + render: function() { + return ( + <View style={{flexDirection: 'row', justifyContent: 'space-between'}}> + <Button + onPress={onButtonPress} + title="This looks great!" + accessibilityLabel="This sounds great!" + /> + <Button + onPress={onButtonPress} + title="Ok!" + color="#841584" + accessibilityLabel="Ok, Great!" + /> + </View> + ); + }, + }, + { + title: 'Disabled Button', + description: 'All interactions for the component are disabled.', + render: function() { + return ( + <Button + disabled + onPress={onButtonPress} + title="I Am Disabled" + accessibilityLabel="See an informative alert" + /> + ); + }, + }, +];

Run this example

Run example in simulator

Powered by appetize.io

← PrevNext →
\ No newline at end of file diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 67d0118bf75..30d37533be3 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,6 +1,6 @@ -CameraRoll
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

CameraRoll #

CameraRoll provides access to the local camera roll / gallery. +CameraRoll

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

CameraRoll #

CameraRoll provides access to the local camera roll / gallery. Before using this you must link the RCTCameraRoll library. -You can refer to (Linking)[https://facebook.github.io/react-native/docs/linking-libraries-ios.html] for help.

Methods #

static saveImageWithTag(tag) #

static saveToCameraRoll(tag, type?) #

Saves the photo or video to the camera roll / gallery.

On Android, the tag must be a local image or video URI, such as "file:///sdcard/img.png".

On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) +You can refer to Linking for help.

Methods #

static saveImageWithTag(tag) #

static saveToCameraRoll(tag, type?) #

Saves the photo or video to the camera roll / gallery.

On Android, the tag must be a local image or video URI, such as "file:///sdcard/img.png".

On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time).

If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise it will be treated as a photo. To override the automatic choice, you can pass an optional type parameter that must be one of 'photo' or 'video'.

Returns a Promise which will resolve with the new URI.

static getPhotos(params) #

Returns a Promise with photo identifier objects from the local camera @@ -19,7 +19,7 @@ const { TouchableOpacity } = ReactNative; -const invariant = require('invariant'); +const invariant = require('fbjs/lib/invariant'); const CameraRollView = require('./CameraRollView'); @@ -127,7 +127,7 @@ exports.description .examples = [ { title: 'Photos', - render(): ReactElement<any> { return <CameraRollExample />; } + render(): React.Element<any> { return <CameraRollExample />; } } ];

Run this example

Run example in simulator

Powered by appetize.io

← PrevNext →
\ No newline at end of file diff --git a/docs/clipboard.html b/docs/clipboard.html index aacd22856a9..505722962f9 100644 --- a/docs/clipboard.html +++ b/docs/clipboard.html @@ -1,4 +1,4 @@ -Clipboard
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Clipboard #

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

Methods #

static getString(0) #

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

async _getContent() { +Clipboard
React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Clipboard #

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

Methods #

static getString(0) #

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'); @@ -66,6 +66,6 @@ exports.examples \ No newline at end of file diff --git a/docs/colors.html b/docs/colors.html index f794ba940c2..5719ac61eed 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -1,4 +1,4 @@ -Colors
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Colors #

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)
← PrevNext →

You can edit the content above on GitHub and send us a pull request!

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Colors #

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)
← PrevNext →

You can edit the content above on GitHub and send us a pull request!

\ No newline at end of file diff --git a/docs/communication-ios.html b/docs/communication-ios.html index bd8162c0965..f1ee8e97601 100644 --- a/docs/communication-ios.html +++ b/docs/communication-ios.html @@ -1,4 +1,4 @@ -Communication between native and React Native
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Communication between native and React Native #

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 Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Communication between native and React Native #

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}; @@ -90,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.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/datepickerandroid.html b/docs/datepickerandroid.html index 392b12131e1..adeae194a06 100644 --- a/docs/datepickerandroid.html +++ b/docs/datepickerandroid.html @@ -1,4 +1,4 @@ -DatePickerAndroid
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

DatePickerAndroid #

Opens the standard Android date picker dialog.

Example #

try { +DatePickerAndroid
React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

DatePickerAndroid #

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. @@ -131,6 +131,6 @@ module.exports \ No newline at end of file diff --git a/docs/datepickerios.html b/docs/datepickerios.html index fc8f86101b4..c4738094d70 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,10 +1,10 @@ -DatePickerIOS
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

DatePickerIOS #

Use DatePickerIOS to render a date/time picker (selector) on iOS. This is +DatePickerIOS

React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

DatePickerIOS #

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 -source of truth.

Props #

View props... #

date PropTypes.instanceOf(Date).isRequired #

The currently selected date.

maximumDate PropTypes.instanceOf(Date) #

Maximum date.

Restricts the range of possible date/time values.

minimumDate PropTypes.instanceOf(Date) #

Minimum date.

Restricts the range of possible date/time values.

minuteInterval PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]) #

The interval at which minutes can be selected.

mode PropTypes.oneOf(['date', 'time', 'datetime']) #

The date picker mode.

onDateChange PropTypes.func.isRequired #

Date change handler.

This is called when the user changes the date or time in the UI. +source of truth.

Props #

View props... #

date Date #

The currently selected date.

maximumDate Date #

Maximum date.

Restricts the range of possible date/time values.

minimumDate Date #

Minimum date.

Restricts the range of possible date/time values.

minuteInterval enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #

The interval at which minutes can be selected.

mode enum('date', 'time', 'datetime') #

The date picker mode.

onDateChange function #

Date change handler.

This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new -date and time.

timeZoneOffsetInMinutes PropTypes.number #

Timezone offset in minutes.

By default, the date picker will use the device's timezone. With this +date and time.

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.

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; @@ -121,7 +121,7 @@ exports.description .examples = [ { title: '<DatePickerIOS>', - render: function(): ReactElement<any> { + render: function(): React.Element<any> { return <DatePickerExample />; }, }]; @@ -155,7 +155,7 @@ exports.examples : '500', fontSize: 14, }, -});

Run this example

Run example in simulator

Powered by appetize.io

← PrevNext →
\ No newline at end of file diff --git a/docs/debugging.html b/docs/debugging.html index 11385c4ca9e..f1c0f589642 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -Debugging
React Native0.36

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Debugging #

Accessing the In-App Developer Menu #

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.

The Developer Menu is disabled in release (production) builds.

Reloading JavaScript #

Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.

If the Command⌘ + R keyboard shortcut does not seem to reload the iOS Simulator, go to the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Automatic reloading #

You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.

You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.

There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.

You will need to rebuild your app for changes to take effect in certain situations:

  • You have added new resources to your native app's bundle, such as an image in Images.xcassets on iOS or the res/drawable folder on Android.
  • You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).

In-app Errors and Warnings #

Errors and warnings are displayed inside your app in development builds.

Errors #

In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.

Warnings #

Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.

As with a RedBox, you can use console.warn() to trigger a YellowBox.

YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];

RedBoxes and YellowBoxes are automatically disabled in release (production) builds.

Accessing console logs #

You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:

$ react-native log-ios +Debugging
React Native0.37

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Debugging #

Accessing the In-App Developer Menu #

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the Command⌘ + D keyboard shortcut when your app is running in the iPhone Simulator, or Command⌘ + M when running in an Android emulator.

The Developer Menu is disabled in release (production) builds.

Reloading JavaScript #

Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press Command⌘ + R in the iOS Simulator, or press R twice on Android emulators.

If the Command⌘ + R keyboard shortcut does not seem to reload the iOS Simulator, go to the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.

Automatic reloading #

You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.

You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling Hot Reloading from the Developer Menu. This will allow you to persist the app's state through reloads.

There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.

You will need to rebuild your app for changes to take effect in certain situations:

  • You have added new resources to your native app's bundle, such as an image in Images.xcassets on iOS or the res/drawable folder on Android.
  • You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).

In-app Errors and Warnings #

Errors and warnings are displayed inside your app in development builds.

Errors #

In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use console.error() to manually trigger one.

Warnings #

Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.

As with a RedBox, you can use console.warn() to trigger a YellowBox.

YellowBoxes can be disabled during development by using console.disableYellowBox = true;. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: console.ignoredYellowBox = ['Warning: ...'];

RedBoxes and YellowBoxes are automatically disabled in release (production) builds.

Accessing console logs #

You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:

$ react-native log-ios $ react-native log-android

You may also access these through Debug → Open System Log... in the iOS Simulator or by running adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal while an Android app is running on a device or emulator.

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.

Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts (Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.

It is currently not possible to use the "React" tab in the Chrome Developer Tools to inspect app widgets. You can use Nuclide's "React Native Inspector" as a workaround.

Debugging on a device with Chrome Developer Tools #

On iOS devices, open the file RCTWebSocketExecutor.m and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.

On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:

adb reverse tcp:8081 tcp:8081

Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.

If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.

Debugging using a custom JavaScript debugger #

To use a custom JavaScript debugger in place of Chrome Developer Tools, set the REACT_DEBUGGER environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.

The debugger will receive a list of all project roots, separated by a space. For example, 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 be used to start your debugger.

Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.

Debugging with Stetho on Android #

  1. In android/app/build.gradle, add these lines in the dependencies section:

    compile 'com.facebook.stetho:stetho:1.3.1' compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'

  2. In android/app/src/main/java/com/{yourAppName}/MainApplication.java, add the following imports:

    import com.facebook.react.modules.network.ReactCookieJarContainer; import com.facebook.stetho.Stetho; @@ -32,6 +32,6 @@ import java.util \ No newline at end of file diff --git a/docs/dimensions.html b/docs/dimensions.html index 9986851d0bf..f337e520876 100644 --- a/docs/dimensions.html +++ b/docs/dimensions.html @@ -1,4 +1,4 @@ -Dimensions
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Dimensions #

    Methods #

    static set(dims) #

    This should only be called from native code by sending the +Dimensions

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Dimensions #

    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.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html index 6f32f1943e2..adf60353235 100644 --- a/docs/direct-manipulation.html +++ b/docs/direct-manipulation.html @@ -1,4 +1,4 @@ -Direct Manipulation

    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Direct Manipulation #

    It is sometimes necessary to make changes directly to a component +Direct Manipulation

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Direct Manipulation #

    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 @@ -152,6 +152,6 @@ use setState instead of setNativeProps.

    \ No newline at end of file diff --git a/docs/drawerlayoutandroid.html b/docs/drawerlayoutandroid.html index a9dabf28d84..114527309a4 100644 --- a/docs/drawerlayoutandroid.html +++ b/docs/drawerlayoutandroid.html @@ -1,4 +1,4 @@ -DrawerLayoutAndroid
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    DrawerLayoutAndroid #

    React component that wraps the platform DrawerLayout (Android only). The +DrawerLayoutAndroid

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    DrawerLayoutAndroid #

    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 @@ -24,28 +24,18 @@ be set by the drawerWidth prop.

    Example:

    return ( <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)"> </DrawerLayoutAndroid> -);

    drawerLockMode ReactPropTypes.oneOf([ - 'unlocked', - 'locked-closed', - 'locked-open' -]) #

    Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +);

    drawerLockMode enum('unlocked', 'locked-closed', 'locked-open') #

    Specifies the lock mode of the drawer. The drawer can be locked in 3 states: - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. - locked-closed, meaning that the drawer will stay closed and not respond to gestures. - locked-open, meaning that the drawer will stay opened and not respond to gestures. -The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).

    drawerPosition ReactPropTypes.oneOf([ - DrawerConsts.DrawerPosition.Left, - DrawerConsts.DrawerPosition.Right -]) #

    Specifies the side of the screen from which the drawer will slide in.

    drawerWidth ReactPropTypes.number #

    Specifies the width of the drawer, more precisely the width of the view that be pulled in -from the edge of the window.

    keyboardDismissMode ReactPropTypes.oneOf([ - 'none', // default - 'on-drag', -]) #

    Determines whether the keyboard gets dismissed in response to a drag. +The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).

    drawerPosition enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) #

    Specifies the side of the screen from which the drawer will slide in.

    drawerWidth number #

    Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window.

    keyboardDismissMode enum('none', 'on-drag') #

    Determines whether the keyboard gets dismissed in response to a drag. - 'none' (the default), drags do not dismiss the keyboard. - - 'on-drag', the keyboard is dismissed when a drag begins.

    onDrawerClose ReactPropTypes.func #

    Function called whenever the navigation view has been closed.

    onDrawerOpen ReactPropTypes.func #

    Function called whenever the navigation view has been opened.

    onDrawerSlide ReactPropTypes.func #

    Function called whenever there is an interaction with the navigation view.

    onDrawerStateChanged ReactPropTypes.func #

    Function called when the drawer state has changed. The drawer can be in 3 states: + - 'on-drag', the keyboard is dismissed when a drag begins.

    onDrawerClose function #

    Function called whenever the navigation view has been closed.

    onDrawerOpen function #

    Function called whenever the navigation view has been opened.

    onDrawerSlide function #

    Function called whenever there is an interaction with the navigation view.

    onDrawerStateChanged function #

    Function called when the drawer state has changed. The drawer can be in 3 states: - idle, meaning there is no interaction with the navigation view happening at the time - dragging, meaning there is currently an interaction with the navigation view - settling, meaning that there was an interaction with the navigation view, and the -navigation view is now finishing its closing or opening animation

    renderNavigationView ReactPropTypes.func.isRequired #

    The navigation view that will be rendered to the side of the screen and can be pulled in.

    statusBarBackgroundColor color #

    Make the drawer take the entire screen and draw the background of the +navigation view is now finishing its closing or opening animation

    renderNavigationView function #

    The navigation view that will be rendered to the side of the screen and can be pulled in.

    statusBarBackgroundColor color #

    Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.

    Methods #

    openDrawer(0) #

    Opens the drawer.

    closeDrawer(0) #

    Closes the drawer.

    You can edit the content above on GitHub and send us a pull request!

    ← PrevNext →
    \ No newline at end of file diff --git a/docs/easing.html b/docs/easing.html index 14098f6c492..e43b08844bd 100644 --- a/docs/easing.html +++ b/docs/easing.html @@ -1,4 +1,4 @@ -Easing
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Easing #

    This class implements common easing functions. The math is pretty obscure, +Easing

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Easing #

    This class implements common easing functions. The math is pretty obscure, but this cool website has nice visual illustrations of what they represent: http://xaedes.de/dev/transitions/

    Methods #

    static step0(n) #

    static step1(n) #

    static linear(t) #

    static ease(t) #

    static quad(t) #

    static cubic(t) #

    static poly(n) #

    static sin(t) #

    static circle(t) #

    static exp(t) #

    static elastic(bounciness) #

    A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot @@ -19,6 +19,6 @@ at all, and bounciness of N > 1 will overshoot about N times.

    Wolfram P apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/flexbox.html b/docs/flexbox.html index 3701765fc62..c5a7b64e26f 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -Layout with Flexbox

    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Layout with Flexbox #

    A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

    You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

    Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and alignItems defaulting to stretch instead of flex-start, and the flex parameter only supports a single number.

    Flex Direction #

    Adding flexDirection to a component's style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.

    import React, { Component } from 'react'; +Layout with Flexbox
    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Layout with Flexbox #

    A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

    You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

    Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and alignItems defaulting to stretch instead of flex-start, and the flex parameter only supports a single number.

    Flex Direction #

    Adding flexDirection to a component's style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.

    import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FlexDirectionBasics extends Component { @@ -74,6 +74,6 @@ AppRegistry. apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/geolocation.html b/docs/geolocation.html index 4acf5fdbb7c..16b8e4fb1b0 100644 --- a/docs/geolocation.html +++ b/docs/geolocation.html @@ -1,4 +1,4 @@ -Geolocation
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Geolocation #

    The Geolocation API extends the web spec: +Geolocation

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Geolocation #

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

    As a browser polyfill, this API is available through the navigator.geolocation global - you do not need to import it.

    iOS #

    You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation. Geolocation is enabled by default @@ -27,7 +27,7 @@ exports.description .examples = [ { title: 'navigator.geolocation', - render: function(): ReactElement<any> { + render: function(): React.Element<any> { return <GeolocationExample />; }, } @@ -96,6 +96,6 @@ class GeolocationExample extends \ No newline at end of file diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index b9084bfb9ca..d696554345d 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -Gesture Responder System

    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Gesture Responder System #

    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.

    ← PrevNext →

    You can edit the content above on GitHub and send us a pull request!

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Gesture Responder System #

    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.

    ← PrevNext →

    You can edit the content above on GitHub and send us a pull request!

    \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index ffa82e2e0e7..57b7fcb5647 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,4 +1,4 @@ -Getting Started
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Getting Started #

    Welcome to React Native! This page will help you install React Native on +Getting Started

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Getting Started #

    Welcome to React Native! This page will help you install React Native on your system, so that you can build apps with it right away. If you already have React Native installed, you can skip ahead to the Tutorial.

    The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you @@ -215,6 +215,6 @@ if (!foundHash) { apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/handling-text-input.html b/docs/handling-text-input.html index f32df1d8934..b059a7dd0f5 100644 --- a/docs/handling-text-input.html +++ b/docs/handling-text-input.html @@ -1,4 +1,4 @@ -Handling Text Input

    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Handling Text Input #

    TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes +Handling Text Input

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Handling Text Input #

    TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.

    For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕".

    import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; @@ -41,6 +41,6 @@ AppRegistry. apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/handling-touches.html b/docs/handling-touches.html index 9f5ec332bf4..2d08d68a7c3 100644 --- a/docs/handling-touches.html +++ b/docs/handling-touches.html @@ -1,4 +1,4 @@ -Handling Touches
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Handling Touches #

    Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.

    React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition.

    Tappable Components #

    You can use "Touchable" components when you want to capture a tapping gesture. They take a function through the onPress props which will be called when the touch begins and ends within the bounds of the component.

    Example:

    class MyButton extends Component { +Handling Touches
    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Handling Touches #

    Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.

    React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition.

    Tappable Components #

    You can use "Touchable" components when you want to capture a tapping gesture. They take a function through the onPress props which will be called when the touch begins and ends within the bounds of the component.

    Example:

    class MyButton extends Component { _onPressButton() { console.log("You tapped the button!"); } @@ -26,6 +26,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/headless-js-android.html b/docs/headless-js-android.html index 96cc32cea59..b0525ec9c4d 100644 --- a/docs/headless-js-android.html +++ b/docs/headless-js-android.html @@ -1,4 +1,4 @@ -Headless JS
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Headless JS #

    Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.

    The JS API #

    A task is a simple async function that you register on AppRegistry, similar to registering React applications:

    AppRegistry.registerHeadlessTask('SomeTaskName', () => require('SomeTaskName'));

    Then, in SomeTaskName.js:

    module.exports = async (taskData) => { +Headless JS
    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Headless JS #

    Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.

    The JS API #

    A task is a simple async function that you register on AppRegistry, similar to registering React applications:

    AppRegistry.registerHeadlessTask('SomeTaskName', () => require('SomeTaskName'));

    Then, in SomeTaskName.js:

    module.exports = async (taskData) => { // do stuff }

    You can do anything in your task as long as it doesn't touch UI: network requests, timers and so on. Once your task completes (i.e. the promise is resolved), React Native will go into "paused" mode (unless there are other tasks running, or there is a foreground app).

    The Java API #

    Yes, this does still require some native code, but it's pretty thin. You need to extend HeadlessJsTaskService and override getTaskConfig, e.g.:

    public class MyTaskService extends FbHeadlessJsTaskService { @@ -29,6 +29,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/height-and-width.html b/docs/height-and-width.html index 8456af75685..03579e7fdd5 100644 --- a/docs/height-and-width.html +++ b/docs/height-and-width.html @@ -1,4 +1,4 @@ -Height and Width
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Height and Width #

    A component's height and width determine its size on the screen.

    Fixed Dimensions #

    The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

    import React, { Component } from 'react'; +Height and Width
    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Height and Width #

    A component's height and width determine its size on the screen.

    Fixed Dimensions #

    The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

    import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component { @@ -47,6 +47,6 @@ AppRegistry. apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/image.html b/docs/image.html index a6a6e0120e4..491a7c3f7d6 100644 --- a/docs/image.html +++ b/docs/image.html @@ -1,4 +1,4 @@ -Image
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Image #

    A React component for displaying different types of images, +Image

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Image #

    A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.

    This example shows both fetching and displaying an image from local storage as well as on from network.

    import React, { Component } from 'react'; @@ -63,8 +63,8 @@ class DisplayAnImageWithStyle extends compile 'com.facebook.fresco:webpsupport:0.11.0' }

    Also, if you use GIF with ProGuard, you will need to add this rule in proguard-rules.pro :

    -keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); -}

    Props #

    onLayout PropTypes.func #

    Invoked on mount and layout changes with -{nativeEvent: {layout: {x, y, width, height}}}.

    onLoad PropTypes.func #

    Invoked when load completes successfully.

    onLoadEnd PropTypes.func #

    Invoked when load either succeeds or fails.

    onLoadStart PropTypes.func #

    Invoked on load start.

    e.g., onLoadStart={(e) => this.setState({loading: true})}

    resizeMode PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) #

    Determines how to resize the image when the frame doesn't match the raw +}

    Props #

    onLayout function #

    Invoked on mount and layout changes with +{nativeEvent: {layout: {x, y, width, height}}}.

    onLoad function #

    Invoked when load completes successfully.

    onLoadEnd function #

    Invoked when load either succeeds or fails.

    onLoadStart function #

    Invoked on load start.

    e.g., onLoadStart={(e) => this.setState({loading: true})}

    resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') #

    Determines how to resize the image when the frame doesn't match the raw image dimensions.

    • cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

    • contain: Scale the image uniformly (maintain the image's aspect ratio) @@ -74,7 +74,7 @@ aspect ratio of the src.

    • repeat: Repeat the image to image will keep it's size and aspect ratio. (iOS only)

    source ImageSourcePropType #

    The image source (either a remote URL or a local file resource).

    This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best uri to display based on the -measured size of the image container.

    style style #

    Layout Props...
    Shadow Props...
    Transforms...
    backfaceVisibility ReactPropTypes.oneOf(['visible', 'hidden'])
    backgroundColor color
    borderBottomLeftRadius ReactPropTypes.number
    borderBottomRightRadius ReactPropTypes.number
    borderColor color
    borderRadius ReactPropTypes.number
    borderTopLeftRadius ReactPropTypes.number
    borderTopRightRadius ReactPropTypes.number
    borderWidth ReactPropTypes.number
    opacity ReactPropTypes.number
    overflow ReactPropTypes.oneOf(['visible', 'hidden'])
    resizeMode ReactPropTypes.oneOf(Object.keys(ImageResizeMode))
    tintColor color

    Changes the color of all the non-transparent pixels to the tintColor.

    androidoverlayColor ReactPropTypes.string

    When the image has rounded corners, specifying an overlayColor will +measured size of the image container.

    style style #

    Layout Props...
    Shadow Props...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor color
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderColor color
    borderRadius number
    borderTopLeftRadius number
    borderTopRightRadius number
    borderWidth number
    opacity number
    overflow enum('visible', 'hidden')
    resizeMode Object.keys(ImageResizeMode)
    tintColor color

    Changes the color of all the non-transparent pixels to the tintColor.

    androidoverlayColor string

    When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: @@ -84,34 +84,25 @@ background and setting the overlayColor to the same color as the background.

    For details of how this works under the hood, see http://frescolib.org/docs/rounded-corners-and-circles.html

    ImageResizeMode is an Enum for different image resizing modes, set via the resizeMode style property on Image components. The values are contain, cover, -stretch, center, repeat.

    testID PropTypes.string #

    A unique identifier for this element to be used in UI Automation -testing scripts.

    androidresizeMethod PropTypes.oneOf(['auto', 'resize', 'scale']) #

    The mechanism that should be used to resize the image when the image's dimensions +stretch, center, repeat.

    testID string #

    A unique identifier for this element to be used in UI Automation +testing scripts.

    androidresizeMethod enum('auto', 'resize', 'scale') #

    The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to auto.

    • auto: Use heuristics to pick between resize and scale.

    • resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scale when the image is much larger than the view.

    • scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the -image is slightly bigger than the view.

    More details about resize and scale can be found at http://frescolib.org/docs/resizing-rotating.html.

    iosaccessibilityLabel PropTypes.string #

    The text that's read by the screen reader when the user interacts with -the image.

    iosaccessible PropTypes.bool #

    When true, indicates the image is an accessibility element.

    iosblurRadius PropTypes.number #

    blurRadius: the blur radius of the blur filter added to the image

    ioscapInsets {top: number, left: number, bottom: number, right: number} #

    When the image is resized, the corners of the size specified +image is slightly bigger than the view.

    3. More details about resize and scale can be found at http://frescolib.org/docs/resizing-rotating.html.

iosaccessibilityLabel string #

The text that's read by the screen reader when the user interacts with +the image.

iosaccessible bool #

When true, indicates the image is an accessibility element.

iosblurRadius number #

blurRadius: the blur radius of the blur filter added to the image

ioscapInsets {top: number, left: number, bottom: number, right: number} #

When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the -official Apple documentation.

iosdefaultSource PropTypes.oneOfType([ - // TODO: Tooling to support documenting these directly and having them display in the docs. - PropTypes.shape({ - uri: PropTypes.string, - width: PropTypes.number, - height: PropTypes.number, - scale: PropTypes.number, - }), - PropTypes.number, -]) #

A static image to display while loading the image source.

iosdefaultSource {uri: string, width: number, height: number, scale: number}, number #

A static image to display while loading the image source.

  • uri - a string representing the resource identifier for the image, which should be either a local file path or the name of a static image resource (which should be wrapped in the require('./path/to/image.png') function).
  • width, height - can be specified if known at build time, in which case these will be used to set the default <Image/> component dimensions.
  • scale - used to indicate the scale factor of the image. Defaults to 1.0 if -unspecified, meaning that one image pixel equates to one display point / DIP.
  • number - Opaque type returned by something like require('./image.jpg').

iosonError PropTypes.func #

Invoked on load error with {nativeEvent: {error}}.

iosonPartialLoad PropTypes.func #

Invoked when a partial load of the image is complete. The definition of +unspecified, meaning that one image pixel equates to one display point / DIP.

  • number - Opaque type returned by something like require('./image.jpg').

    • iosonError function #

    Invoked on load error with {nativeEvent: {error}}.

    iosonPartialLoad function #

    Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant -for progressive JPEG loads.

    iosonProgress PropTypes.func #

    Invoked on download progress with {nativeEvent: {loaded, total}}.

    Methods #

    static getSize(uri, success, failure): #

    Retrieve the width and height (in pixels) of an image prior to displaying it. +for progressive JPEG loads.

    iosonProgress function #

    Invoked on download progress with {nativeEvent: {loaded, total}}.

    Methods #

    static getSize(uri, success, failure): #

    Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail if the image cannot be found, or fails to download.

    In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not @@ -824,6 +815,6 @@ exports.examples \ No newline at end of file diff --git a/docs/imageeditor.html b/docs/imageeditor.html index e82c8b61cc6..0caae143209 100644 --- a/docs/imageeditor.html +++ b/docs/imageeditor.html @@ -1,4 +1,4 @@ -ImageEditor

    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    ImageEditor #

    Methods #

    static cropImage(uri, cropData, success, failure) #

    Crop the image specified by the URI param. If URI points to a remote +ImageEditor

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    ImageEditor #

    Methods #

    static cropImage(uri, cropData, success, failure) #

    Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the failure callback will be called.

    If the cropping process is successful, the resultant cropped image will be stored in the ImageStore, and the URI returned in the success @@ -19,6 +19,6 @@ cropped image from the ImageStore when you are done with it.

    \ No newline at end of file diff --git a/docs/imagepickerios.html b/docs/imagepickerios.html index 34aca712977..3167bf76d27 100644 --- a/docs/imagepickerios.html +++ b/docs/imagepickerios.html @@ -1,4 +1,4 @@ -ImagePickerIOS
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    ImagePickerIOS #

    Methods #

    static canRecordVideos(callback) #

    static canUseCamera(callback) #

    static openCameraDialog(config, successCallback, cancelCallback) #

    static openSelectDialog(config, successCallback, cancelCallback) #

    You can edit the content above on GitHub and send us a pull request!

    ← PrevNext →
    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    ImagePickerIOS #

    Methods #

    static canRecordVideos(callback) #

    static canUseCamera(callback) #

    static openCameraDialog(config, successCallback, cancelCallback) #

    static openSelectDialog(config, successCallback, cancelCallback) #

    You can edit the content above on GitHub and send us a pull request!

    ← PrevNext →
    \ No newline at end of file diff --git a/docs/images.html b/docs/images.html index 0ff8eea007f..0fc58985547 100644 --- a/docs/images.html +++ b/docs/images.html @@ -1,4 +1,4 @@ -Images
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Images #

    Static Image Resources #

    As of 0.14 release, React Native provides a unified way of managing images in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:

    <Image source={require('./my-icon.png')} />

    The image name is resolved the same way JS modules are resolved. In the example above the packager will look for my-icon.png in the same folder as the component that requires it. Also if you have my-icon.ios.png and my-icon.android.png, the packager will pick the file depending on the platform you are running on.

    You can also use @2x, @3x, etc. suffix in the file name to provide images for different screen densities. For example, if you have the following file structure:

    . +Images
    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Images #

    Static Image Resources #

    As of 0.14 release, React Native provides a unified way of managing images in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:

    <Image source={require('./my-icon.png')} />

    The image name is resolved the same way JS modules are resolved. In the example above the packager will look for my-icon.png in the same folder as the component that requires it. Also if you have my-icon.ios.png and my-icon.android.png, the packager will pick the file depending on the platform you are running on.

    You can also use @2x, @3x, etc. suffix in the file name to provide images for different screen densities. For example, if you have the following file structure:

    . ├── button.js └── img ├── check@2x.png @@ -37,6 +37,6 @@ using local resources that are outside of Images.xcassets.

    < apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.36" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.37" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/imagestore.html b/docs/imagestore.html index efea452fde1..017fa36b0fc 100644 --- a/docs/imagestore.html +++ b/docs/imagestore.html @@ -1,4 +1,4 @@ -ImageStore
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    ImageStore #

    Methods #

    static hasImageForTag(uri, callback) #

    Check if the ImageStore contains image data for the specified URI. +ImageStore

    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    ImageStore #

    Methods #

    static hasImageForTag(uri, callback) #

    Check if the ImageStore contains image data for the specified URI. @platform ios

    static removeImageForTag(uri) #

    Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to @@ -16,7 +16,7 @@ will be called.

    Note that it is very inefficient to transfer large quantit data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can just pass the URI to an <Image/> component; there is no need to retrieve the -base64 data.

    You can edit the content above on GitHub and send us a pull request!

    ← PrevNext →
    \ No newline at end of file diff --git a/docs/integration-with-existing-apps.html b/docs/integration-with-existing-apps.html index b61dc637bee..a996e26e9b7 100644 --- a/docs/integration-with-existing-apps.html +++ b/docs/integration-with-existing-apps.html @@ -1,4 +1,4 @@ -Integration With Existing Apps
    React Native0.36

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Integration With Existing Apps #

    +Integration With Existing Apps
    React Native0.37

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Integration With Existing Apps #