From 85b485f338eac5a7191da9b741c1f69276c41a4d Mon Sep 17 00:00:00 2001 From: Travis CI Date: Sat, 19 Dec 2015 01:16:00 +0000 Subject: [PATCH] update website --- docs/accessibility.html | 2 +- docs/actionsheetios.html | 4 +- docs/activityindicatorios.html | 2 +- docs/alert.html | 149 +++++++++++++++++++++++++ docs/alertios.html | 2 +- docs/android-building-from-source.html | 2 +- docs/android-setup.html | 2 +- docs/android-ui-performance.html | 2 +- docs/animated.html | 2 +- docs/animations.html | 2 +- docs/appregistry.html | 2 +- docs/appstateios.html | 2 +- docs/asyncstorage.html | 2 +- docs/backandroid.html | 2 +- docs/cameraroll.html | 2 +- docs/communication-ios.html | 2 +- docs/datepickerios.html | 2 +- docs/debugging.html | 2 +- docs/dimensions.html | 2 +- docs/direct-manipulation.html | 2 +- docs/drawerlayoutandroid.html | 2 +- docs/embedded-app-android.html | 2 +- docs/embedded-app-ios.html | 2 +- docs/flexbox.html | 2 +- docs/geolocation.html | 2 +- docs/gesture-responder-system.html | 2 +- docs/getting-started.html | 2 +- docs/image.html | 2 +- docs/images.html | 2 +- docs/intentandroid.html | 2 +- docs/interactionmanager.html | 2 +- docs/javascript-environment.html | 2 +- docs/known-issues.html | 2 +- docs/layoutanimation.html | 2 +- docs/linking-libraries-ios.html | 2 +- docs/linkingios.html | 2 +- docs/linux-windows-support.html | 2 +- docs/listview.html | 2 +- docs/mapview.html | 2 +- docs/modal.html | 2 +- docs/native-components-android.html | 2 +- docs/native-components-ios.html | 2 +- docs/native-modules-android.html | 2 +- docs/native-modules-ios.html | 2 +- docs/nativemethodsmixin.html | 2 +- docs/navigator-comparison.html | 2 +- docs/navigator.html | 2 +- docs/navigatorios.html | 2 +- docs/netinfo.html | 2 +- docs/network.html | 2 +- docs/panresponder.html | 2 +- docs/performance.html | 2 +- docs/pickerios.html | 2 +- docs/pixelratio.html | 2 +- docs/platform-specific-code.html | 2 +- docs/progressbarandroid.html | 2 +- docs/progressviewios.html | 2 +- docs/pulltorefreshviewandroid.html | 2 +- docs/pushnotificationios.html | 2 +- docs/running-on-device-android.html | 2 +- docs/running-on-device-ios.html | 2 +- docs/scrollview.html | 2 +- docs/segmentedcontrolios.html | 2 +- docs/signed-apk-android.html | 2 +- docs/sliderios.html | 2 +- docs/statusbarios.html | 2 +- docs/style.html | 2 +- docs/stylesheet.html | 2 +- docs/switchandroid.html | 2 +- docs/switchios.html | 2 +- docs/tabbarios-item.html | 2 +- docs/tabbarios.html | 2 +- docs/testing.html | 2 +- docs/text.html | 2 +- docs/textinput.html | 2 +- docs/timers.html | 2 +- docs/toastandroid.html | 2 +- docs/toolbarandroid.html | 2 +- docs/touchablehighlight.html | 2 +- docs/touchablenativefeedback.html | 2 +- docs/touchableopacity.html | 2 +- docs/touchablewithoutfeedback.html | 2 +- docs/transforms.html | 2 +- docs/troubleshooting.html | 2 +- docs/tutorial.html | 2 +- docs/upgrading.html | 2 +- docs/vibrationios.html | 2 +- docs/videos.html | 2 +- docs/view.html | 2 +- docs/viewpagerandroid.html | 2 +- docs/webview.html | 2 +- 91 files changed, 240 insertions(+), 91 deletions(-) create mode 100644 docs/alert.html diff --git a/docs/accessibility.html b/docs/accessibility.html index eec51d2e48f..060926e5133 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -1,4 +1,4 @@ -Accessibility – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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}> diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 62c89fd1d87..90d7a6104ce 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -1,4 +1,4 @@ -ActionSheetIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActionSheetIOS

Methods #

static showActionSheetWithOptions(options: Object, callback: Function) #

static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function) #

Edit on GitHubExamples #

'use strict'; +ActionSheetIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActionSheetIOS

Methods #

static showActionSheetWithOptions(options: Object, callback: Function) #

static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function) #

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { @@ -150,7 +150,7 @@ exports.examples : 'Show Share Action Sheet', render(): ReactElement { return <ShareActionSheetExample />; } } -];
Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicatorIOS

Edit on GitHubProps #

View props... #

animating bool #

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

color string #

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

hidesWhenStopped bool #

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

onLayout function #

Invoked on mount and layout changes with

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

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

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

Edit on GitHubExamples #

'use strict'; +ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicatorIOS

Edit on GitHubProps #

View props... #

animating bool #

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

color string #

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

hidesWhenStopped bool #

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

onLayout function #

Invoked on mount and layout changes with

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

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

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/alert.html b/docs/alert.html new file mode 100644 index 00000000000..8d1110eccaf --- /dev/null +++ b/docs/alert.html @@ -0,0 +1,149 @@ +Alert – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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, +see AlertIOS; entering text in an alert is common on iOS only.

iOS #

On iOS you can specify any number of buttons. Each button can optionally +specify a style and you can also specify type of the alert. Refer to +AlertIOS for details.

Android #

On Android at most three buttons can be specified. Android has a concept +of a neutral, negative and a positive button:

  • If you specify one button, it will be the 'positive' one (such as 'OK')
  • Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
  • Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
// Works on both iOS and Android +Alert.alert( + 'Alert Title', + 'My Alert Msg', + [ + {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'OK', onPress: () => console.log('OK Pressed')}, + ] +)

Methods #

static alert(title: string, message?: string, buttons?: Buttons, type?: AlertType) #

Edit on GitHubExamples #

'use strict'; + +var React = require('react-native'); +var { + Alert, + Platform, + StyleSheet, + Text, + TouchableHighlight, + View, +} = React; + +var UIExplorerBlock = require('./UIExplorerBlock'); + +// corporate ipsum > lorem ipsum +var alertMessage = 'Credibly reintermediate next-generation potentialities after goal-oriented ' + + 'catalysts for change. Dynamically revolutionize.'; + +/** + * Simple alert examples. + */ +var SimpleAlertExampleBlock = React.createClass({ + + render: function() { + return ( + <View> + <TouchableHighlight style={styles.wrapper} + onPress={() => Alert.alert( + 'Alert Title', + alertMessage, + )}> + <View style={styles.button}> + <Text>Alert with message and default button</Text> + </View> + </TouchableHighlight> + <TouchableHighlight style={styles.wrapper} + onPress={() => Alert.alert( + 'Alert Title', + alertMessage, + [ + {text: 'OK', onPress: () => console.log('OK Pressed!')}, + ] + )}> + <View style={styles.button}> + <Text>Alert with one button</Text> + </View> + </TouchableHighlight> + <TouchableHighlight style={styles.wrapper} + onPress={() => Alert.alert( + 'Alert Title', + alertMessage, + [ + {text: 'Cancel', onPress: () => console.log('Cancel Pressed!')}, + {text: 'OK', onPress: () => console.log('OK Pressed!')}, + ] + )}> + <View style={styles.button}> + <Text>Alert with two buttons</Text> + </View> + </TouchableHighlight> + <TouchableHighlight style={styles.wrapper} + onPress={() => Alert.alert( + 'Alert Title', + null, + [ + {text: 'Foo', onPress: () => console.log('Foo Pressed!')}, + {text: 'Bar', onPress: () => console.log('Bar Pressed!')}, + {text: 'Baz', onPress: () => console.log('Baz Pressed!')}, + ] + )}> + <View style={styles.button}> + <Text>Alert with three buttons</Text> + </View> + </TouchableHighlight> + <TouchableHighlight style={styles.wrapper} + onPress={() => Alert.alert( + 'Foo Title', + alertMessage, + '..............'.split('').map((dot, index) => ({ + text: 'Button ' + index, + onPress: () => console.log('Pressed ' + index) + })) + )}> + <View style={styles.button}> + <Text>Alert with too many buttons</Text> + </View> + </TouchableHighlight> + </View> + ); + }, +}); + +var AlertExample = React.createClass({ + statics: { + title: 'Alert', + description: 'Alerts display a concise and informative message ' + + 'and prompt the user to make a decision.', + }, + render: function() { + return ( + <UIExplorerBlock title={'Alert'}> + <SimpleAlertExampleBlock /> + </UIExplorerBlock> + ); + } +}); + +var styles = StyleSheet.create({ + wrapper: { + borderRadius: 5, + marginBottom: 5, + }, + button: { + backgroundColor: '#eeeeee', + padding: 10, + }, +}); + +module.exports = { + AlertExample, + SimpleAlertExampleBlock, +}
Next →
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index acd01bd6339..5022e79b80d 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS

Launches an alert dialog with the specified title and message.

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

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS

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.

Use this API for iOS-specific features, such as prompting the user to enter some information. In other cases, especially to show static alerts, use diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html index 79b988226f7..b75ddf3e41c 100644 --- a/docs/android-building-from-source.html +++ b/docs/android-building-from-source.html @@ -1,4 +1,4 @@ -Building React Native from source – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 & extraction instructions here)

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

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

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 & extraction instructions here)

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

sdk.dir=absolute_path_to_android_sdk ndk.dir=absolute_path_to_android_ndk

Example:

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

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 { diff --git a/docs/android-setup.html b/docs/android-setup.html index 7feeb3d61b8..25462d46e3a 100644 --- a/docs/android-setup.html +++ b/docs/android-setup.html @@ -1,4 +1,4 @@ -Android Setup – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Android Setup

This guide describes basic steps of the Android development environment setup that are required to run React Native android apps on an android emulator. We don't discuss developer tool configuration such as IDEs here.

Install Git #

  • On Mac, if you have installed XCode, Git is already installed, otherwise run the following:

    brew install git

  • On Linux, install Git via your package manager.

  • On Windows, download and install Git for Windows. During the setup process, choose "Run Git from Windows Command Prompt", which will add Git to your PATH environment variable.

Install the Android SDK (unless you have it) #

  1. Install the latest JDK
  2. Install the Android SDK:

Define the ANDROID_HOME environment variable #

IMPORTANT: Make sure the ANDROID_HOME environment variable points to your existing Android SDK: