From d89fa488ef401c2e257fbd33ee9107be93a85aa3 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Wed, 7 Jun 2017 23:06:33 +0000 Subject: [PATCH] Updated docs for 0.46 --- releases/0.46/css/prism.css | 1 - releases/0.46/css/react-native.css | 45 ++++ releases/0.46/docs/accessibility.html | 4 +- releases/0.46/docs/accessibilityinfo.html | 2 +- releases/0.46/docs/actionsheetios.html | 2 +- releases/0.46/docs/activityindicator.html | 2 +- releases/0.46/docs/adsupportios.html | 2 +- releases/0.46/docs/alert.html | 2 +- releases/0.46/docs/alertios.html | 2 +- .../docs/android-building-from-source.html | 4 +- releases/0.46/docs/animated.html | 2 +- releases/0.46/docs/animations.html | 4 +- releases/0.46/docs/appregistry.html | 2 +- releases/0.46/docs/appstate.html | 2 +- releases/0.46/docs/asyncstorage.html | 2 +- releases/0.46/docs/backandroid.html | 2 +- releases/0.46/docs/backhandler.html | 2 +- releases/0.46/docs/building-for-apple-tv.html | 4 +- releases/0.46/docs/button.html | 2 +- releases/0.46/docs/cameraroll.html | 2 +- releases/0.46/docs/clipboard.html | 2 +- releases/0.46/docs/colors.html | 2 +- releases/0.46/docs/communication-ios.html | 2 +- releases/0.46/docs/components-and-apis.html | 209 ++++++++++++++++++ releases/0.46/docs/datepickerandroid.html | 2 +- releases/0.46/docs/datepickerios.html | 2 +- releases/0.46/docs/debugging.html | 4 +- releases/0.46/docs/dimensions.html | 2 +- releases/0.46/docs/direct-manipulation.html | 4 +- releases/0.46/docs/drawerlayoutandroid.html | 2 +- releases/0.46/docs/easing.html | 2 +- releases/0.46/docs/flatlist.html | 2 +- releases/0.46/docs/flexbox.html | 2 +- releases/0.46/docs/geolocation.html | 2 +- .../0.46/docs/gesture-responder-system.html | 2 +- releases/0.46/docs/getting-started.html | 2 +- releases/0.46/docs/handling-text-input.html | 4 +- releases/0.46/docs/handling-touches.html | 127 ++++++++++- releases/0.46/docs/headless-js-android.html | 2 +- releases/0.46/docs/height-and-width.html | 2 +- releases/0.46/docs/image.html | 2 +- releases/0.46/docs/imageeditor.html | 2 +- releases/0.46/docs/imagepickerios.html | 2 +- releases/0.46/docs/images.html | 4 +- releases/0.46/docs/imagestore.html | 2 +- releases/0.46/docs/imagestyleproptypes.html | 2 +- .../docs/integration-with-existing-apps.html | 4 +- releases/0.46/docs/interactionmanager.html | 2 +- .../0.46/docs/javascript-environment.html | 2 +- releases/0.46/docs/keyboard.html | 2 +- releases/0.46/docs/keyboardavoidingview.html | 2 +- releases/0.46/docs/layout-props.html | 2 +- releases/0.46/docs/layoutanimation.html | 2 +- releases/0.46/docs/linking-libraries-ios.html | 2 +- releases/0.46/docs/linking.html | 2 +- releases/0.46/docs/listview.html | 2 +- releases/0.46/docs/listviewdatasource.html | 2 +- releases/0.46/docs/modal.html | 2 +- releases/0.46/docs/more-resources.html | 2 +- .../0.46/docs/native-components-android.html | 2 +- releases/0.46/docs/native-components-ios.html | 2 +- .../0.46/docs/native-modules-android.html | 4 +- releases/0.46/docs/native-modules-ios.html | 2 +- releases/0.46/docs/navigation.html | 5 +- releases/0.46/docs/navigatorios.html | 2 +- releases/0.46/docs/netinfo.html | 2 +- releases/0.46/docs/network.html | 5 +- releases/0.46/docs/panresponder.html | 2 +- releases/0.46/docs/performance.html | 4 +- releases/0.46/docs/permissionsandroid.html | 2 +- releases/0.46/docs/picker.html | 2 +- releases/0.46/docs/pickerios.html | 2 +- releases/0.46/docs/pixelratio.html | 2 +- .../0.46/docs/platform-specific-code.html | 8 +- releases/0.46/docs/progressbarandroid.html | 2 +- releases/0.46/docs/progressviewios.html | 2 +- releases/0.46/docs/props.html | 2 +- releases/0.46/docs/pushnotificationios.html | 2 +- releases/0.46/docs/refreshcontrol.html | 2 +- releases/0.46/docs/running-on-device.html | 4 +- .../0.46/docs/running-on-simulator-ios.html | 2 +- releases/0.46/docs/scrollview.html | 2 +- releases/0.46/docs/sectionlist.html | 2 +- releases/0.46/docs/segmentedcontrolios.html | 2 +- releases/0.46/docs/settings.html | 2 +- releases/0.46/docs/shadow-props.html | 2 +- releases/0.46/docs/share.html | 2 +- releases/0.46/docs/signed-apk-android.html | 2 +- releases/0.46/docs/slider.html | 2 +- releases/0.46/docs/snapshotviewios.html | 2 +- releases/0.46/docs/state.html | 2 +- releases/0.46/docs/statusbar.html | 2 +- releases/0.46/docs/statusbarios.html | 2 +- releases/0.46/docs/style.html | 2 +- releases/0.46/docs/stylesheet.html | 2 +- releases/0.46/docs/switch.html | 2 +- releases/0.46/docs/systrace.html | 2 +- releases/0.46/docs/tabbarios-item.html | 2 +- releases/0.46/docs/tabbarios.html | 2 +- releases/0.46/docs/testing.html | 4 +- releases/0.46/docs/text.html | 2 +- releases/0.46/docs/textinput.html | 2 +- releases/0.46/docs/textstyleproptypes.html | 2 +- releases/0.46/docs/timepickerandroid.html | 2 +- releases/0.46/docs/timers.html | 4 +- releases/0.46/docs/toastandroid.html | 2 +- releases/0.46/docs/toolbarandroid.html | 2 +- releases/0.46/docs/touchablehighlight.html | 2 +- .../0.46/docs/touchablenativefeedback.html | 2 +- releases/0.46/docs/touchableopacity.html | 2 +- .../0.46/docs/touchablewithoutfeedback.html | 2 +- releases/0.46/docs/transforms.html | 2 +- releases/0.46/docs/troubleshooting.html | 2 +- releases/0.46/docs/tutorial.html | 14 +- releases/0.46/docs/understanding-cli.html | 4 +- releases/0.46/docs/upgrading.html | 4 +- releases/0.46/docs/using-a-listview.html | 4 +- releases/0.46/docs/using-a-scrollview.html | 4 +- releases/0.46/docs/vibration.html | 2 +- releases/0.46/docs/vibrationios.html | 2 +- releases/0.46/docs/view.html | 2 +- releases/0.46/docs/viewpagerandroid.html | 2 +- releases/0.46/docs/viewproptypes.html | 2 +- releases/0.46/docs/viewstyleproptypes.html | 2 +- releases/0.46/docs/virtualizedlist.html | 2 +- releases/0.46/docs/webview.html | 2 +- releases/0.46/img/Button.png | Bin 0 -> 19232 bytes versions.html | 4 +- 128 files changed, 533 insertions(+), 157 deletions(-) create mode 100644 releases/0.46/docs/components-and-apis.html create mode 100644 releases/0.46/img/Button.png diff --git a/releases/0.46/css/prism.css b/releases/0.46/css/prism.css index 5e0382b9324..e1b64e2eea8 100644 --- a/releases/0.46/css/prism.css +++ b/releases/0.46/css/prism.css @@ -136,4 +136,3 @@ pre[class*="language-"] { .token.entity { cursor: help; } - diff --git a/releases/0.46/css/react-native.css b/releases/0.46/css/react-native.css index 8c4a8b13389..6a5756c9de4 100644 --- a/releases/0.46/css/react-native.css +++ b/releases/0.46/css/react-native.css @@ -1699,6 +1699,51 @@ input#algolia-doc-search:focus { .buttons-unit.downloads { margin: 30px 0; } +.component-grid { + max-width: 800px; +} + +.component { + border: 1px solid #05A5D1; + border-radius: 3px; + margin: 0 auto 10px; + width: 100%; + display: inline-block; + background-color: white; +} + +.component h3 { + font-size: 16px; + margin: 0; + padding: 0 10px; + background-color: #05A5D1; + color: white; +} + +.component h3 a { + color: white; +} + +.component p { + padding: 10px; + margin: 2px; +} + +@media only screen and (min-device-width: 768px) { + .component-grid { + width: 768px; + } + .component-grid.component-grid-border { + border-bottom: 1px solid #f1eff0; + } + .component { + width: 30%; + height: 150px; + margin: 0 22px 22px auto; + vertical-align: top; + } +} + /** Showcase **/ .home-showcase-section { max-width: 800px; diff --git a/releases/0.46/docs/accessibility.html b/releases/0.46/docs/accessibility.html index 6df360614ea..c0dfc8415bc 100644 --- a/releases/0.46/docs/accessibility.html +++ b/releases/0.46/docs/accessibility.html @@ -1,4 +1,4 @@ -Accessibility

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.

In addition to this documentation, you might find this blog post about React Native accessibility to be useful.

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

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.

In addition to this documentation, you might find this blog post about React Native accessibility to be useful.

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}> @@ -39,7 +39,7 @@ On the other hand, if view B contains a child view C a <CustomRadioButton accessibleComponentType={this.state.radioButton} - onPress={this._onPress}/>

In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.

Testing VoiceOver Support (iOS) #

To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.

To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.

At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.

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

AccessibilityInfo #

Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The +AccessibilityInfo

AccessibilityInfo #

Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The AccessibilityInfo API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.

Here's a small example illustrating how to use AccessibilityInfo:

class ScreenReaderStatusExample extends React.Component { state = { diff --git a/releases/0.46/docs/actionsheetios.html b/releases/0.46/docs/actionsheetios.html index 36a635d7c9f..d65278671b6 100644 --- a/releases/0.46/docs/actionsheetios.html +++ b/releases/0.46/docs/actionsheetios.html @@ -1,4 +1,4 @@ -ActionSheetIOS

ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

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

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 diff --git a/releases/0.46/docs/activityindicator.html b/releases/0.46/docs/activityindicator.html index 2f462d19165..24faa625bf9 100644 --- a/releases/0.46/docs/activityindicator.html +++ b/releases/0.46/docs/activityindicator.html @@ -1,4 +1,4 @@ -ActivityIndicator

ActivityIndicator #

Displays a circular loading indicator.

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([ +ActivityIndicator

ActivityIndicator #

Displays a circular loading indicator.

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'). diff --git a/releases/0.46/docs/adsupportios.html b/releases/0.46/docs/adsupportios.html index 346ea31c8c1..63c87b667e6 100644 --- a/releases/0.46/docs/adsupportios.html +++ b/releases/0.46/docs/adsupportios.html @@ -1,4 +1,4 @@ -AdSupportIOS

AdSupportIOS #

AdSupport provides access to the "advertising identifier". If you link this library +AdSupportIOS

AdSupportIOS #

AdSupport provides access to the "advertising identifier". If you link this library in your project, you may need to justify your use for this identifier when submitting your application to the App Store.

In order to use AdSupport in your project, you must link the RCTAdSupport library. In Xcode, you can manually add the RCTAdSupport.m and RCTAdSupport.h files from diff --git a/releases/0.46/docs/alert.html b/releases/0.46/docs/alert.html index a2e94340669..ec3b3c1c05a 100644 --- a/releases/0.46/docs/alert.html +++ b/releases/0.46/docs/alert.html @@ -1,4 +1,4 @@ -Alert

Alert #

Launches an alert dialog with the specified title and message.

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

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, diff --git a/releases/0.46/docs/alertios.html b/releases/0.46/docs/alertios.html index 318933ffaaf..52d02923afc 100644 --- a/releases/0.46/docs/alertios.html +++ b/releases/0.46/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS

AlertIOS #

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

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.' diff --git a/releases/0.46/docs/android-building-from-source.html b/releases/0.46/docs/android-building-from-source.html index 3cb88a2084f..fe0ae3bb9a0 100644 --- a/releases/0.46/docs/android-building-from-source.html +++ b/releases/0.46/docs/android-building-from-source.html @@ -1,4 +1,4 @@ -Building React Native from source

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

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. 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 { @@ -28,7 +28,7 @@ dependencies { rootProject.allprojects { buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}" } -}

Building for Maven/Nexus deployment #

If you find that you need to push up a locally compiled React Native .aar and related files to a remote Nexus repository, you can.

Start by following the Point Gradle to your Android SDK section of this page. Once you do this, assuming you have Gradle configured properly, you can then run the following command from the root of your React Native checkout to build and package all required files:

./gradlew ReactAndroid:installArchives

This will package everything that would typically be included in the android directory of your node_modules/react-native/ installation in the root directory of your React Native checkout.

Testing #

If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see Testing.

Troubleshooting #

Gradle build fails in ndk-build. See the section about local.properties file above.

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

Animated #

The Animated library is designed to make animations fluid, powerful, and +Animated

Animated #

The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.

The simplest workflow for creating an animation is to to create an diff --git a/releases/0.46/docs/animations.html b/releases/0.46/docs/animations.html index b59de295361..228aa07abb1 100644 --- a/releases/0.46/docs/animations.html +++ b/releases/0.46/docs/animations.html @@ -1,4 +1,4 @@ -Animations

Animations #

Animations are very important to create a great user experience. +Animations

Animations #

Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.

React Native provides two complementary animation systems: @@ -285,7 +285,7 @@ option. You may also want to defer any computationally intensive work until after animations are complete, using the InteractionManager. You can monitor the -frame rate by using the In-App Developer Menu "FPS Monitor" tool.

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

AppRegistry #