From e1a0ba960fdd3fd19430777d328ebddc32ecf5ba Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Fri, 12 Feb 2016 20:02:41 +0000 Subject: [PATCH] Updated docs for 0.19 --- css/react-native.css | 68 ++---- docs/accessibility.html | 2 +- docs/actionsheetios.html | 2 +- docs/activityindicatorios.html | 2 +- docs/alert.html | 10 +- docs/alertios.html | 142 ++++++----- docs/android-building-from-source.html | 2 +- docs/android-setup.html | 2 +- docs/android-ui-performance.html | 2 +- docs/animated.html | 4 +- docs/animations.html | 2 +- docs/appregistry.html | 2 +- docs/appstate.html | 7 +- docs/appstateios.html | 4 +- docs/asyncstorage.html | 4 +- docs/backandroid.html | 2 +- docs/cameraroll.html | 11 +- docs/colors.html | 12 - docs/communication-ios.html | 2 +- docs/datepickerios.html | 6 +- docs/debugging.html | 2 +- docs/dimensions.html | 2 +- docs/direct-manipulation.html | 2 +- docs/drawerlayoutandroid.html | 6 +- docs/embedded-app-android.html | 2 +- docs/embedded-app-ios.html | 2 +- docs/flexbox.html | 2 +- docs/geolocation.html | 4 +- docs/gesture-responder-system.html | 2 +- docs/getting-started.html | 2 +- docs/image.html | 51 ++-- docs/images.html | 2 +- docs/intentandroid.html | 25 +- docs/interactionmanager.html | 2 +- docs/javascript-environment.html | 2 +- docs/known-issues.html | 7 +- docs/layoutanimation.html | 4 +- docs/linking-libraries-ios.html | 2 +- docs/linking.html | 56 ----- docs/linkingios.html | 8 +- docs/linux-windows-support.html | 2 +- docs/listview.html | 12 +- docs/mapview.html | 36 +-- docs/modal.html | 4 +- docs/native-components-android.html | 2 +- docs/native-components-ios.html | 4 +- docs/native-modules-android.html | 2 +- docs/native-modules-ios.html | 2 +- docs/nativemethodsmixin.html | 2 +- docs/navigator-comparison.html | 2 +- docs/navigator.html | 10 +- docs/navigatorios.html | 6 +- docs/netinfo.html | 4 +- docs/network.html | 2 +- docs/panresponder.html | 4 +- docs/performance.html | 2 +- docs/picker.html | 20 -- docs/pickerios.html | 4 +- docs/pixelratio.html | 4 +- docs/platform-specific-code.html | 2 +- docs/progressbarandroid.html | 6 +- docs/progressviewios.html | 2 +- docs/pulltorefreshviewandroid.html | 4 +- docs/pushnotificationios.html | 4 +- docs/refreshcontrol.html | 8 +- docs/running-on-device-android.html | 2 +- docs/running-on-device-ios.html | 2 +- docs/scrollview.html | 81 ++----- docs/segmentedcontrolios.html | 4 +- docs/signed-apk-android.html | 2 +- docs/sliderios.html | 6 +- docs/statusbar.html | 222 ------------------ docs/statusbarios.html | 2 +- docs/style.html | 2 +- docs/stylesheet.html | 2 +- docs/switch.html | 4 +- docs/tabbarios-item.html | 2 +- docs/tabbarios.html | 2 +- docs/testing.html | 2 +- docs/text.html | 10 +- docs/textinput.html | 16 +- docs/timers.html | 4 +- docs/toastandroid.html | 4 +- docs/toolbarandroid.html | 6 +- docs/touchablehighlight.html | 6 +- docs/touchablenativefeedback.html | 4 +- docs/touchableopacity.html | 4 +- docs/touchablewithoutfeedback.html | 4 +- docs/transforms.html | 2 +- docs/troubleshooting.html | 2 +- docs/tutorial.html | 82 +++---- docs/upgrading.html | 2 +- docs/vibrationios.html | 4 +- docs/videos.html | 2 +- docs/view.html | 17 +- docs/viewpagerandroid.html | 26 +- docs/webview.html | 100 +------- img/Warning.png | Bin 758 -> 0 bytes index.html | 4 +- releases/0.19/css/react-native.css | 17 ++ releases/0.19/docs/accessibility.html | 2 +- releases/0.19/docs/actionsheetios.html | 2 +- releases/0.19/docs/activityindicatorios.html | 2 +- releases/0.19/docs/alert.html | 2 +- releases/0.19/docs/alertios.html | 2 +- .../docs/android-building-from-source.html | 2 +- releases/0.19/docs/android-setup.html | 2 +- .../0.19/docs/android-ui-performance.html | 2 +- releases/0.19/docs/animated.html | 2 +- releases/0.19/docs/animations.html | 2 +- releases/0.19/docs/appregistry.html | 2 +- releases/0.19/docs/appstate.html | 2 +- releases/0.19/docs/appstateios.html | 2 +- releases/0.19/docs/asyncstorage.html | 2 +- releases/0.19/docs/backandroid.html | 2 +- releases/0.19/docs/cameraroll.html | 2 +- releases/0.19/docs/communication-ios.html | 2 +- releases/0.19/docs/datepickerios.html | 2 +- releases/0.19/docs/debugging.html | 2 +- releases/0.19/docs/dimensions.html | 2 +- releases/0.19/docs/direct-manipulation.html | 2 +- releases/0.19/docs/drawerlayoutandroid.html | 2 +- releases/0.19/docs/embedded-app-android.html | 2 +- releases/0.19/docs/embedded-app-ios.html | 2 +- releases/0.19/docs/flexbox.html | 2 +- releases/0.19/docs/geolocation.html | 2 +- .../0.19/docs/gesture-responder-system.html | 2 +- releases/0.19/docs/getting-started.html | 2 +- releases/0.19/docs/image.html | 2 +- releases/0.19/docs/images.html | 2 +- releases/0.19/docs/intentandroid.html | 2 +- releases/0.19/docs/interactionmanager.html | 2 +- .../0.19/docs/javascript-environment.html | 2 +- releases/0.19/docs/known-issues.html | 2 +- releases/0.19/docs/layoutanimation.html | 2 +- releases/0.19/docs/linking-libraries-ios.html | 2 +- releases/0.19/docs/linkingios.html | 2 +- releases/0.19/docs/linux-windows-support.html | 2 +- releases/0.19/docs/listview.html | 2 +- releases/0.19/docs/mapview.html | 2 +- releases/0.19/docs/modal.html | 2 +- .../0.19/docs/native-components-android.html | 2 +- releases/0.19/docs/native-components-ios.html | 2 +- .../0.19/docs/native-modules-android.html | 2 +- releases/0.19/docs/native-modules-ios.html | 2 +- releases/0.19/docs/nativemethodsmixin.html | 2 +- releases/0.19/docs/navigator-comparison.html | 2 +- releases/0.19/docs/navigator.html | 2 +- releases/0.19/docs/navigatorios.html | 2 +- releases/0.19/docs/netinfo.html | 2 +- releases/0.19/docs/network.html | 2 +- releases/0.19/docs/panresponder.html | 2 +- releases/0.19/docs/performance.html | 2 +- releases/0.19/docs/pickerios.html | 2 +- releases/0.19/docs/pixelratio.html | 2 +- .../0.19/docs/platform-specific-code.html | 2 +- releases/0.19/docs/progressbarandroid.html | 2 +- releases/0.19/docs/progressviewios.html | 2 +- .../0.19/docs/pulltorefreshviewandroid.html | 2 +- releases/0.19/docs/pushnotificationios.html | 2 +- releases/0.19/docs/refreshcontrol.html | 2 +- .../0.19/docs/running-on-device-android.html | 2 +- releases/0.19/docs/running-on-device-ios.html | 2 +- releases/0.19/docs/scrollview.html | 2 +- releases/0.19/docs/segmentedcontrolios.html | 2 +- releases/0.19/docs/signed-apk-android.html | 2 +- releases/0.19/docs/sliderios.html | 2 +- releases/0.19/docs/statusbarios.html | 2 +- releases/0.19/docs/style.html | 2 +- releases/0.19/docs/stylesheet.html | 2 +- releases/0.19/docs/switch.html | 2 +- releases/0.19/docs/tabbarios-item.html | 2 +- releases/0.19/docs/tabbarios.html | 2 +- releases/0.19/docs/testing.html | 2 +- releases/0.19/docs/text.html | 2 +- releases/0.19/docs/textinput.html | 2 +- releases/0.19/docs/timers.html | 2 +- releases/0.19/docs/toastandroid.html | 2 +- releases/0.19/docs/toolbarandroid.html | 2 +- releases/0.19/docs/touchablehighlight.html | 2 +- .../0.19/docs/touchablenativefeedback.html | 2 +- releases/0.19/docs/touchableopacity.html | 2 +- .../0.19/docs/touchablewithoutfeedback.html | 2 +- releases/0.19/docs/transforms.html | 2 +- releases/0.19/docs/troubleshooting.html | 2 +- releases/0.19/docs/tutorial.html | 2 +- releases/0.19/docs/upgrading.html | 2 +- releases/0.19/docs/vibrationios.html | 2 +- releases/0.19/docs/videos.html | 2 +- releases/0.19/docs/view.html | 2 +- releases/0.19/docs/viewpagerandroid.html | 2 +- releases/0.19/docs/webview.html | 2 +- releases/0.19/index.html | 2 +- releases/0.19/showcase.html | 2 +- releases/0.19/support.html | 2 +- releases/0.19/versions.html | 12 + showcase.html | 2 +- support.html | 2 +- versions.html | 2 +- 199 files changed, 512 insertions(+), 970 deletions(-) delete mode 100644 docs/colors.html delete mode 100644 docs/linking.html delete mode 100644 docs/picker.html delete mode 100644 docs/statusbar.html delete mode 100644 img/Warning.png create mode 100644 releases/0.19/versions.html diff --git a/css/react-native.css b/css/react-native.css index 59b4fa3391e..34bd28c95fd 100644 --- a/css/react-native.css +++ b/css/react-native.css @@ -312,6 +312,14 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li display: inline; } +.nav-main a.nav-version { + font-size: 16px; + font-weight: 800; + color: #05A5D1; + margin-left: 5px; + text-decoration: underline; +} + .hero { background: #05A5D1; padding: 50px 0; @@ -478,6 +486,15 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li box-shadow: 5px 5px 5px #888888; } +.versions ul { + list-style: none; +} + +.versions li { + font-size: 16px; + padding-top: 10px; +} + #examples h3, .home-presentation h3 { color: #2d2d2d; font-size: 24px; @@ -1041,11 +1058,6 @@ div[data-twttr-id] iframe { margin-top: 0; } -.compactProps .propTitle div { - font-weight: normal; - margin-left: 20px; -} - .prop { padding: 5px 10px; } @@ -1076,46 +1088,16 @@ div[data-twttr-id] iframe { -ms-user-select: none; } -.color { - display: inline-block; - width: 20px; - height: 20px; - margin-right: 5px; - position: relative; - top: 5px; +.edit-github { + font-size: 15px; + font-weight: normal; + float: right; } -.color::before { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 1px solid rgba(0, 0, 0, 0.2); -} - -.deprecated { - margin-bottom: 24px; -} - -.deprecatedTitle { - margin-bottom: 6px; - line-height: 18px; - font-weight: bold; - color: #ffa500; -} - -.deprecatedIcon { - width: 18px; - height: 18px; - margin-right: 8px; - vertical-align: top; -} - -.deprecatedMessage { - margin-left: 26px; +.run-example { + font-size: 15px; + float: right; + margin-right: 20px; } #content { diff --git a/docs/accessibility.html b/docs/accessibility.html index f6848ee7af2..ac5891597af 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 #

Edit on GitHub

Native App Accessibility (iOS and Android) #

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

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

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

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

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

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 ea0161bdbd0..22cb2450ec9 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 #

Edit on GitHub

Methods #

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

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

Examples #

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

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 { diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 6e7aec55bb9..2d237d0cdbe 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicatorIOS #

Edit on GitHub

Props #

View props... #

animating bool #

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

color string #

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

hidesWhenStopped bool #

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

onLayout function #

Invoked on mount and layout changes with

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

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

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

Examples #

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

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 index 22205e10073..376dc6831b2 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -1,9 +1,10 @@ -Alert – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Alert #

Edit on GitHub

Launches an alert dialog with the specified title and message.

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

React Native0.19

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, which is one of 'default', 'cancel' or 'destructive'.

Android #

On Android at most three buttons can be specified. Android has a concept +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', @@ -13,11 +14,12 @@ 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: string, message?: string, buttons?: Buttons, type?: AlertType) #

Examples #

Edit on GitHub
'use strict'; +)

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, @@ -133,7 +135,7 @@ of a neutral, negative and a positive button:

  • If you specify one butt module.exports = { AlertExample, SimpleAlertExampleBlock, -};
Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS #

Edit on GitHub

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

AlertIOS.prompt allows you to prompt the user for input inside of an -alert popup.

Methods #

static alert(title: string, message?: string, callbackOrButtons?: ?(() => void) | ButtonsArray, type?: AlertType) #

Creates a popup to alert the user. See -Alert.

  • title: string -- The dialog's title.
  • message: string -- An optional message that appears above the text input.

  • callbackOrButtons -- This optional argument should be either a -single-argument function or an array of buttons. If passed a function, -it will be called when the user taps 'OK'.

    If passed an array of button configurations, each button should include -a text key, as well as optional onPress and style keys. -style should be one of 'default', 'cancel' or 'destructive'.

  • type -- deprecated, do not use

Example:

AlertIOS.alert( - 'Sync Complete', - 'All your data are belong to us.' -);

static prompt(title: string, message?: string, callbackOrButtons?: ?((text: string) => void) | ButtonsArray, type?: AlertType, defaultValue?: string) #

Prompt the user to enter some text.

  • title: string -- The dialog's title.
  • message: string -- An optional message that appears above the text input.

  • callbackOrButtons -- This optional argument should be either a -single-argument function or an array of buttons. If passed a function, -it will be called with the prompt's value when the user taps 'OK'.

    If passed an array of button configurations, each button should include -a text key, as well as optional onPress and style keys (see example). -style should be one of 'default', 'cancel' or 'destructive'.

  • type: string -- This configures the text input. One of 'plain-text', -'secure-text' or 'login-password'.
  • defaultValue: string -- the default value for the text field.

Example with custom buttons:

AlertIOS.prompt( +AlertIOS – React Native | A framework for building native apps using React
React Native0.19

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 +the cross-platform Alert API.

AlertIOS.alert( 'Enter password', - 'Enter your password to claim your $1.5B in lottery winnings', + null, [ - {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, - {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, + {text: 'Submit', onPress: (text) => console.log('Password: ' + text)}, ], 'secure-text' -);

Example with the default button and a custom callback:

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

Examples #

Edit on GitHub
'use strict'; +)

Methods #

static alert(title: string, message?: string, buttons?: Array<{ + text?: string; + onPress?: ?Function; + style?: AlertButtonStyle; + }>, type?: AlertType) #

static prompt(title: string, value?: string, buttons?: Array<{ + text?: string; + onPress?: ?Function; + style?: AlertButtonStyle; + }>, callback?: Function) #

Prompt the user to enter some text.

Edit on GitHubRun this exampleExamples #

'use strict'; var React = require('react-native'); var { @@ -52,19 +40,37 @@ exports.examples } }, { - title: 'Prompt Options', - render(): React.Component { - return <PromptOptions />; - } -}, -{ - title: 'Prompt Types', + title: 'Alert Types', render() { return ( <View> <TouchableHighlight style={styles.wrapper} - onPress={() => AlertIOS.prompt('Plain Text Entry')}> + onPress={() => AlertIOS.alert( + 'Hello World', + null, + [ + {text: 'OK', onPress: (text) => console.log('OK pressed'), type: 'default'} + ] + )}> + + <View style={styles.button}> + <Text> + {'default'} + </Text> + </View> + + </TouchableHighlight> + <TouchableHighlight + style={styles.wrapper} + onPress={() => AlertIOS.alert( + 'Plain Text Entry', + null, + [ + {text: 'Submit', onPress: (text) => console.log('Text: ' + text), type: 'plain-text'}, + {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'} + ] + )}> <View style={styles.button}> <Text> @@ -75,7 +81,14 @@ exports.examples /TouchableHighlight> <TouchableHighlight style={styles.wrapper} - onPress={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}> + onPress={() => AlertIOS.alert( + 'Secure Text Entry', + null, + [ + {text: 'Submit', onPress: (text) => console.log('Password: ' + text), type: 'secure-text'}, + {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'} + ] + )}> <View style={styles.button}> <Text> @@ -86,7 +99,14 @@ exports.examples /TouchableHighlight> <TouchableHighlight style={styles.wrapper} - onPress={() => AlertIOS.prompt('Login & Password', null, null, 'login-password')}> + onPress={() => AlertIOS.alert( + 'Login & Password', + null, + [ + {text: 'Submit', onPress: (details) => console.log('Login: ' + details.login + '; Password: ' + details.password), type: 'login-password'}, + {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'} + ] + )}> <View style={styles.button}> <Text> @@ -98,25 +118,32 @@ exports.examples /View> ); } +}, +{ + title: 'Prompt', + render(): React.Component { + return <PromptExample />; + } }]; -class PromptOptions extends React.Component { +class PromptExample extends React.Component { constructor(props) { super(props); - this.saveResponse = this.saveResponse.bind(this); + this.promptResponse = this.promptResponse.bind(this); + this.state = { + promptValue: undefined, + }; - this.customButtons = [{ + this.title = 'Type a value'; + this.defaultValue = 'Default value'; + this.buttons = [{ text: 'Custom OK', - onPress: this.saveResponse + onPress: this.promptResponse }, { text: 'Custom Cancel', style: 'cancel', }]; - - this.state = { - promptValue: undefined, - }; } render() { @@ -128,7 +155,7 @@ class PromptOptions extends ={styles.wrapper} - onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse)}> + onPress={this.prompt.bind(this, this.title, null, null, this.promptResponse)}> <View style={styles.button}> <Text> @@ -139,7 +166,7 @@ class PromptOptions extends ={styles.wrapper} - onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons)}> + onPress={this.prompt.bind(this, this.title, null, this.buttons, null)}> <View style={styles.button}> <Text> @@ -150,22 +177,22 @@ class PromptOptions extends ={styles.wrapper} - onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}> + onPress={this.prompt.bind(this, this.title, this.defaultValue, null, this.promptResponse)}> <View style={styles.button}> <Text> - prompt with title, callback & default value + prompt with title, default value & callback </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} - onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}> + onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons, null)}> <View style={styles.button}> <Text> - prompt with title, custom buttons, login/password & default value + prompt with title, default value & custom buttons </Text> </View> </TouchableHighlight> @@ -173,8 +200,13 @@ class PromptOptions extends ); } - saveResponse(promptValue) { - this.setState({ promptValue: JSON.stringify(promptValue) }); + prompt() { + // Flow's apply support is broken: #7035621 + ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments); + } + + promptResponse(promptValue) { + this.setState({ promptValue }); } } @@ -187,7 +219,7 @@ class PromptOptions extends : '#eeeeee', padding: 10, }, -});
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Building React Native from source #

Edit on GitHub

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

Prerequisites #

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

Make sure you have the following installed:

  1. Android SDK version 23 (compileSdkVersion in build.gradle)
  2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
  3. Android Support Repository >= 17 (for Android Support Library)
  4. Android NDK (download & 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 Native0.19

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 1d1f2cd1b4f..39d4428151c 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 #

Edit on GitHub

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:

Examples #

Edit on GitHub
'use strict'; + }}

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/animations.html b/docs/animations.html index c080d1cfe4a..f7f31148479 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,4 +1,4 @@ -Animations – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animations #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 diff --git a/docs/appregistry.html b/docs/appregistry.html index 66b2df85700..172f6736e27 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -1,4 +1,4 @@ -AppRegistry – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppRegistry #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 diff --git a/docs/appstate.html b/docs/appstate.html index 2ffa624ec15..10259477b6a 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,4 @@ -AppState – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppState #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 transition state that currently never happens for @@ -26,7 +26,10 @@ render: funct },

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

Methods #

static addEventListener(type: string, handler: Function) #

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

static removeEventListener(type: string, handler: Function) #

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

Properties #

currentState: TypeCastExpression #

Examples #

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

static removeEventListener(type: string, handler: Function) #

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

Properties #

currentState: TypeCastExpression #

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/appstateios.html b/docs/appstateios.html index 8117fd02866..77c70ab734d 100644 --- a/docs/appstateios.html +++ b/docs/appstateios.html @@ -1,4 +1,4 @@ -AppStateIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppStateIOS #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppStateIOS

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

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

iOS App States #

  • active - The app is running in the foreground
  • background - The app is running in the background. The user is either in another app or on the home screen
  • inactive - This is a transition state that currently never happens for @@ -29,7 +29,7 @@ state will happen only momentarily.

static removeEventListener(type: string, handler: Function) #

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

Properties #

currentState: TypeCastExpression #

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

Examples #

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index b8e49d9f07d..59ce419bc4e 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -AsyncStorage – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AsyncStorage #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AsyncStorage

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

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

This JS code is a simple facade over the native iOS implementation to provide @@ -11,7 +11,7 @@ don't want to call this - use removeItem or multiRemove to clear only your own keys instead. Returns a Promise object.

static getAllKeys(callback?: ?(error: ?Error, keys: ?Array<string>) => void) #

Gets all keys known to the app, for all callers, libraries, etc. Returns a Promise object.

static flushGetRequests() #

Flushes any pending requests using a single multiget

static multiGet(keys: Array<string>, callback?: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void) #

multiGet invokes callback with an array of key-value pair arrays that matches the input format of multiSet. Returns a Promise object.

multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])

static multiSet(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) #

multiSet and multiMerge take arrays of key-value array pairs that match the output of multiGet, e.g. Returns a Promise object.

multiSet([['k1', 'val1'], ['k2', 'val2']], cb);

static multiRemove(keys: Array<string>, callback?: ?(errors: ?Array<Error>) => void) #

Delete all the keys in the keys array. Returns a Promise object.

static multiMerge(keyValuePairs: Array<Array<string>>, callback?: ?(errors: ?Array<Error>) => void) #

Merges existing values with input values, assuming they are stringified -json. Returns a Promise object.

Not supported by all native implementations.

Properties #

Examples #

Edit on GitHub
'use strict'; +json. Returns a Promise object.

Not supported by all native implementations.

Properties #

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/backandroid.html b/docs/backandroid.html index dd637c3a19c..411242077da 100644 --- a/docs/backandroid.html +++ b/docs/backandroid.html @@ -1,4 +1,4 @@ -BackAndroid – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

BackAndroid #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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() { if (!this.onMainScreen()) { this.goBack(); diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 2debe5a2b74..f1c9fbe8446 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,6 +1,11 @@ -CameraRoll – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

CameraRoll #

Edit on GitHub

CameraRoll provides access to the local camera roll / gallery.

Methods #

static saveImageWithTag(tag) #

Saves the image to the camera roll / gallery.

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

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

  • local URI
  • assets-library tag
  • a tag not matching any of the above, which means the image data will -be stored in memory (and consume memory as long as the process is alive)

Returns a Promise which when resolved will be passed the new URI.

static getPhotos(params: object) #

Returns a Promise with photo identifier objects from the local camera -roll of the device matching shape defined by getPhotosReturnChecker.

@param {object} params See getPhotosParamChecker.

Returns a Promise which when resolved will be of shape getPhotosReturnChecker.

Examples #

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

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

CameraRoll

CameraRoll provides access to the local camera roll / gallery.

Methods #

static saveImageWithTag(tag, successCallback, errorCallback) #

Saves the image to the camera roll / gallery.

The CameraRoll API is not yet implemented for Android.

@param {string} tag On Android, this is a local URI, such +as "file:///sdcard/img.png".

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

  • local URI
  • assets-library tag
  • a tag not matching any of the above, which means the image data will +be stored in memory (and consume memory as long as the process is alive)

@param successCallback Invoked with the value of tag on success. +@param errorCallback Invoked with error message on error.

static getPhotos(params, callback, errorCallback) #

Invokes callback with photo identifier objects from the local camera + roll of the device matching shape defined by getPhotosReturnChecker.

@param {object} params See getPhotosParamChecker. + @param {function} callback Invoked with arg of shape defined by + getPhotosReturnChecker on success. + @param {function} errorCallback Invoked with error message on error.

Edit on GitHubExamples #

'use strict'; const React = require('react-native'); const { diff --git a/docs/colors.html b/docs/colors.html deleted file mode 100644 index 39f3b3c5deb..00000000000 --- a/docs/colors.html +++ /dev/null @@ -1,12 +0,0 @@ -Colors – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Colors #

Edit on GitHub

The following formats are supported:

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

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)
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/communication-ios.html b/docs/communication-ios.html index efbf758058e..3b18b49eb11 100644 --- a/docs/communication-ios.html +++ b/docs/communication-ios.html @@ -1,4 +1,4 @@ -Communication between native and React Native – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Communication between native and React Native #

Edit on GitHub

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

Introduction #

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

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

Properties #

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

Passing properties from native to React Native #

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

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

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

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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}; diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 232a5d91885..21fa0d77502 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,12 +1,12 @@ -DatePickerIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

DatePickerIOS #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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

Edit on GitHubProps #

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

Timezone offset in minutes.

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

Examples #

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/debugging.html b/docs/debugging.html index 921f0cc41f5..ef3fdb543eb 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -Debugging – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Debugging #

Edit on GitHub

Debugging React Native Apps #

To access the in-app developer menu:

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

Hint

To disable the developer menu for production builds:

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

Reload #

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

Chrome Developer Tools #

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

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

To debug on a real device:

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

React Developer Tools (optional) #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the React in the developer tools (see facebook/react-devtools for more information).

Live Reload #

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

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

FPS (Frames per Second) Monitor #

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

Next →
© 2015 Facebook Inc.
React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Debugging

Debugging React Native Apps #

To access the in-app developer menu:

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

Hint

To disable the developer menu for production builds:

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

Reload #

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

Chrome Developer Tools #

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

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

To debug on a real device:

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

React Developer Tools (optional) #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the React in the developer tools (see facebook/react-devtools for more information).

Live Reload #

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

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

FPS (Frames per Second) Monitor #

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

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Dimensions #

Edit on GitHub

Methods #

static set(dims: {[key:string]: any}) #

This should only be called from native code.

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

static get(dim: string) #

Initial dimensions are set before runApplication is called so they should +Dimensions – React Native | A framework for building native apps using React

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Dimensions

Methods #

static set(dims: {[key:string]: any}) #

This should only be called from native code.

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

static get(dim: string) #

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 these constants should try to call this function on every render, rather diff --git a/docs/direct-manipulation.html b/docs/direct-manipulation.html index 0d199e340f8..ed17b582c25 100644 --- a/docs/direct-manipulation.html +++ b/docs/direct-manipulation.html @@ -1,4 +1,4 @@ -Direct Manipulation – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Direct Manipulation #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 diff --git a/docs/drawerlayoutandroid.html b/docs/drawerlayoutandroid.html index 594e05d7e8c..49f9eb7070b 100644 --- a/docs/drawerlayoutandroid.html +++ b/docs/drawerlayoutandroid.html @@ -1,4 +1,4 @@ -DrawerLayoutAndroid – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

DrawerLayoutAndroid #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 @@ -20,8 +20,8 @@ be set by the drawerWidth prop.

Example:

/View> </DrawerLayoutAndroid> ); -},

Props #

View props... #

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. +},

Edit on GitHubProps #

View props... #

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 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 diff --git a/docs/embedded-app-android.html b/docs/embedded-app-android.html index b828087ba7b..922992a7ce1 100644 --- a/docs/embedded-app-android.html +++ b/docs/embedded-app-android.html @@ -1,4 +1,4 @@ -Integrating with Existing Apps – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps #

Edit on GitHub

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

Requirements #

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

Prepare your app #

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

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

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

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

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

Add native code #

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

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

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps

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

Requirements #

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

Prepare your app #

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

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

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

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

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

Add native code #

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

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index 0e012497442..68957763c2c 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -1,4 +1,4 @@ -Integrating with Existing Apps – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps #

Edit on GitHub

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

Requirements #

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

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

Install React Native Using CocoaPods #

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

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

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

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps

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

Requirements #

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

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

Install React Native Using CocoaPods #

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

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

# Depending on how your project is organized, your node_modules directory may be # somewhere else; tell CocoaPods where you've installed react-native from npm pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', diff --git a/docs/flexbox.html b/docs/flexbox.html index 2970b8f6532..310080d63ab 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -Flexbox – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Flexbox #

Edit on GitHub

Props #

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

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

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

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

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

height number #

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

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

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

right number #

top number #

width number #

Next →
© 2015 Facebook Inc.
React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Flexbox

Edit on GitHubProps #

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

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

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

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

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

height number #

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

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

maxHeight number #

maxWidth number #

minHeight number #

minWidth number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

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

right number #

top number #

width number #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Geolocation #

Edit on GitHub

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

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Geolocation

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

iOS #

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

Android #

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

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

Methods #

static getCurrentPosition(geo_success: Function, geo_error?: Function, geo_options?: GeoOptions) #

Invokes the success callback once with the latest location info. Supported options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool)

static watchPosition(success: Function, error?: Function, options?: GeoOptions) #

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

static clearWatch(watchID: number) #

static stopObserving() #

Examples #

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

static clearWatch(watchID: number) #

static stopObserving() #

Edit on GitHubExamples #

/* eslint no-console: 0 */ 'use strict'; diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index 19048dd89c2..b57f09f6d2c 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -Gesture Responder System – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Gesture Responder System #

Edit on GitHub

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

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

Best Practices #

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

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

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

TouchableHighlight and Touchable* #

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

Responder Lifecycle #

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

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

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

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

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

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

evt is a synthetic touch event with the following form:

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

Capture ShouldSet Handlers #

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

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

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

PanResponder #

For higher-level gesture interpretation, check out PanResponder.

Next →
© 2015 Facebook Inc.
React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Getting Started #

Edit on GitHub

Requirements #

  1. OS X - This guide assumes OS X which is needed for iOS development.
  2. Homebrew is the recommended way to install Watchman and Flow.
  3. Install Node.js 4.0 or newer.
    • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
    • New to npm?
  4. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
  5. brew install flow, if you want to use flow.

We recommend periodically running brew update && brew upgrade to keep your programs up-to-date.

iOS Setup #

Xcode 7.0 or higher is required. It can be installed from the App Store.

Android Setup #

To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See Android setup guide for instructions on how to set up your Android environment.

NOTE: There is experimental Windows and Linux support for Android development.

Quick start #

$ npm install -g react-native-cli +Getting Started – React Native | A framework for building native apps using React
React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Getting Started

Requirements #

  1. OS X - This guide assumes OS X which is needed for iOS development.
  2. Homebrew is the recommended way to install Watchman and Flow.
  3. Install Node.js 4.0 or newer.
    • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
    • New to npm?
  4. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
  5. brew install flow, if you want to use flow.

We recommend periodically running brew update && brew upgrade to keep your programs up-to-date.

iOS Setup #

Xcode 7.0 or higher is required. It can be installed from the App Store.

Android Setup #

To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See Android setup guide for instructions on how to set up your Android environment.

NOTE: There is experimental Windows and Linux support for Android development.

Quick start #

$ npm install -g react-native-cli $ react-native init AwesomeProject

To run the iOS app:

  • $ cd AwesomeProject
  • Open ios/AwesomeProject.xcodeproj and hit run in Xcode.
  • Open index.ios.js in your text editor of choice and edit some lines.
  • Hit ⌘-R in your iOS simulator to reload the app and see your change!

Note: If you are using an iOS device, see the Running on iOS Device page.

To run the Android app:

  • $ cd AwesomeProject
  • $ react-native run-android
  • Open index.android.js in your text editor of choice and edit some lines.
  • Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
  • Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logs

Note: If you are using an Android device, see the Running on Android Device page.

Congratulations! You've successfully run and modified your first React Native app.

If you run into any issues getting started, see the troubleshooting page.

Adding Android to an existing React Native project #

If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:

  1. Update the react-native dependency in your package.json file to the latest version
  2. $ npm install
  3. $ react-native android
Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Image #

Edit on GitHub

A React component for displaying different types of images, +Image – React Native | A framework for building native apps using React

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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.

Example usage:

renderImages: function() { return ( @@ -13,7 +13,7 @@ images from local disk, such as the camera roll.

Example usage:

/> </View> ); -},

Props #

onLayout function #

Invoked on mount and layout changes with +},

Edit on GitHubProps #

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

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

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 @@ -22,22 +22,13 @@ so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

'stretch': Scale width and height independently, This may change the aspect ratio of the src.

source {uri: string}, number #

uri is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image -resource (which should be wrapped in the require('./path/to/image.png') function).

style style #

Flexbox...
ShadowPropTypesIOS#style...
Transforms...
backfaceVisibility enum('visible', 'hidden')
backgroundColor color
borderColor color
borderRadius number
borderWidth number
opacity number
overflow enum('visible', 'hidden')
resizeMode Object.keys(ImageResizeMode)
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: - - Certain resize modes, such as 'contain' - - Animated GIFs

A typical way to use this prop is with images displayed on a solid -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

iostintColor color

iOS-Specific style to "tint" an image. -Changes the color of all the non-transparent pixels to the tintColor.

testID string #

A unique identifier for this element to be used in UI Automation +resource (which should be wrapped in the require('./path/to/image.png') function).

style style #

Flexbox...
ShadowPropTypesIOS#style...
Transforms...
resizeMode Object.keys(ImageResizeMode)
backfaceVisibility enum('visible', 'hidden')
backgroundColor ColorPropType
borderColor ColorPropType
borderWidth number
borderRadius number
overflow enum('visible', 'hidden')
tintColor ColorPropType
opacity number

testID string #

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

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.

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 on -Apple documentation

iosdefaultSource {uri: string}, number #

A static image to display while loading the image source.

iosonError function #

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

iosonProgress function #

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

Examples #

Edit on GitHub
'use strict'; +Apple documentation

iosdefaultSource {uri: string}, number #

A static image to display while loading the image source.

iosonError function #

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

iosonProgress function #

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { @@ -172,15 +163,15 @@ exports.examples }, { title: 'Plain Static Image', - description: 'Static assets should be placed in the source code tree, and ' + - 'required in the same way as JavaScript modules.', + description: 'Static assets should be required by prefixing with `image!` ' + + 'and are located in the app bundle.', render: function() { return ( <View style={styles.horizontal}> - <Image source={require('./uie_thumb_normal.png')} style={styles.icon} /> - <Image source={require('./uie_thumb_selected.png')} style={styles.icon} /> - <Image source={require('./uie_comment_normal.png')} style={styles.icon} /> - <Image source={require('./uie_comment_highlighted.png')} style={styles.icon} /> + <Image source={require('image!uie_thumb_normal')} style={styles.icon} /> + <Image source={require('image!uie_thumb_selected')} style={styles.icon} /> + <Image source={require('image!uie_comment_normal')} style={styles.icon} /> + <Image source={require('image!uie_comment_highlighted')} style={styles.icon} /> </View> ); }, @@ -211,20 +202,6 @@ exports.examples }, platform: 'ios', }, - { - title: 'defaultSource', - description: 'Show a placeholder image when a network image is loading', - render: function() { - return ( - <Image - defaultSource={require('./bunny.png')} - source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}} - style={styles.base} - /> - ); - }, - platform: 'ios', - }, { title: 'Border Color', render: function() { @@ -358,19 +335,19 @@ exports.examples > <View style={styles.horizontal}> <Image - source={require('./uie_thumb_normal.png')} + source={require('image!uie_thumb_normal')} style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]} /> <Image - source={require('./uie_thumb_normal.png')} + source={require('image!uie_thumb_normal')} style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]} /> <Image - source={require('./uie_thumb_normal.png')} + source={require('image!uie_thumb_normal')} style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]} /> <Image - source={require('./uie_thumb_normal.png')} + source={require('image!uie_thumb_normal')} style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]} /> </View> diff --git a/docs/images.html b/docs/images.html index 90ca4dcb544..8e54b3ea74b 100644 --- a/docs/images.html +++ b/docs/images.html @@ -1,4 +1,4 @@ -Images – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Images #

Edit on GitHub

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

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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 diff --git a/docs/intentandroid.html b/docs/intentandroid.html index 4d62d877d59..bf7900d2346 100644 --- a/docs/intentandroid.html +++ b/docs/intentandroid.html @@ -1,25 +1,12 @@ -IntentAndroid – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

IntentAndroid #

Edit on GitHub

NOTE: IntentAndroid is being deprecated. Use Linking instead.

IntentAndroid gives you a general interface to handle external links.

Basic Usage #

Handling deep links #

If your app was launched from an external url registered to your app you can +IntentAndroid – React Native | A framework for building native apps using React

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

IntentAndroid

IntentAndroid gives you a general interface to handle external links.

Basic Usage #

Handling deep links #

If your app was launched from an external url registered to your app you can access and handle it from any component you want with

componentDidMount() { var url = IntentAndroid.getInitialURL(url => { if (url) { console.log('Initial url is: ' + url); } }); -}

Example to add support for deep linking inside your React Native app. -More Info: Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links.

Edit in android/app/src/main/AndroidManifest.xml

<intent-filter> - <action android:name="android.intent.action.VIEW" /> - <category android:name="android.intent.category.DEFAULT" /> - <category android:name="android.intent.category.BROWSABLE" /> - - <!-- Accepts URIs that begin with "http://www.facebook.com/react --> - <data android:scheme="http" - android:host="www.facebook.com" - android:pathPrefix="/react" /> - <!-- note that the leading "/" is required for pathPrefix--> - - <!-- Accepts URIs that begin with "facebook://react --> - <!-- <data android:scheme="facebook" android:host="react" /> --> - </intent-filter>

Opening external links #

To start the corresponding activity for a link (web URL, email, contact etc.), call

IntentAndroid.openURL(url)

If you want to check if any installed app can handle a given URL beforehand you can call

IntentAndroid.canOpenURL(url, (supported) => { +}

NOTE: For instructions on how to add support for deep linking, +refer Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links.

Opening external links #

To start the corresponding activity for a link (web URL, email, contact etc.), call

IntentAndroid.openURL(url)

If you want to check if any installed app can handle a given URL beforehand you can call

IntentAndroid.canOpenURL(url, (supported) => { if (!supported) { console.log('Can\'t handle url: ' + url); } else { @@ -28,9 +15,9 @@ More Info: });

Methods #

static openURL(url: string) #

Starts a corresponding external activity for the given URL.

For example, if the URL is "https://www.facebook.com", the system browser will be opened, or the "choose application" dialog will be shown.

You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with {@code Intent.ACTION_VIEW}.

NOTE: This method will fail if the system doesn't know how to open the specified URL. -If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.

NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

@deprecated

static canOpenURL(url: string, callback: Function) #

Determine whether or not an installed app can handle a given URL.

You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, -or any other URL that can be opened with {@code Intent.ACTION_VIEW}.

NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

@param URL the URL to open

@deprecated

static getInitialURL(callback: Function) #

If the app launch was triggered by an app link with {@code Intent.ACTION_VIEW}, -it will give the link url, otherwise it will give null

Refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

@deprecated

Examples #

Edit on GitHub
'use strict'; +If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.

NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

static canOpenURL(url: string, callback: Function) #

Determine whether or not an installed app can handle a given URL.

You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, +or any other URL that can be opened with {@code Intent.ACTION_VIEW}.

NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

@param URL the URL to open

static getInitialURL(callback: Function) #

If the app launch was triggered by an app link with {@code Intent.ACTION_VIEW}, +it will give the link url, otherwise it will give null

Refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index d1db470aaa1..8f0e7cc8794 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -InteractionManager – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

InteractionManager #

Edit on GitHub

InteractionManager allows long-running work to be scheduled after any +InteractionManager – React Native | A framework for building native apps using React

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

InteractionManager

InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.

Applications can schedule tasks to run after interactions with the following:

InteractionManager.runAfterInteractions(() => { // ...long-running synchronous task... diff --git a/docs/javascript-environment.html b/docs/javascript-environment.html index 266e5c4ffe1..54c21e43df5 100644 --- a/docs/javascript-environment.html +++ b/docs/javascript-environment.html @@ -1,4 +1,4 @@ -JavaScript Environment – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

JavaScript Environment #

Edit on GitHub

JavaScript Runtime #

When using React Native, you're going to be running your JavaScript code in two environments:

  • On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
  • When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.

While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.

JavaScript Syntax Transformers #

Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.

As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.

Here's a full list of React Native's enabled transformations.

ES5

  • Reserved Words: promise.catch(function() { });

ES6

ES7

Next →
© 2015 Facebook Inc.
React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

JavaScript Environment

JavaScript Runtime #

When using React Native, you're going to be running your JavaScript code in two environments:

  • On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
  • When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.

While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.

JavaScript Syntax Transformers #

Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.

As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.

Here's a full list of React Native's enabled transformations.

ES5

  • Reserved Words: promise.catch(function() { });

ES6

ES7

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Known Issues #

Edit on GitHub

Devtools "React" Tab Does Not Work #

It's currently not possible to use the "React" tab in the devtools to inspect app widgets. This is due to a change in how the application scripts are evaluated in the devtools plugin; they are now run inside a Web Worker, and the plugin is unaware of this and so unable to communicate properly with React Native.

However, you can still use the Console feature of the devtools, and debugging JavaScript with breakpoints works too. To use the console, make sure to select the ⚙debuggerWorker.js entry in the devtools dropdown that by default is set to <top frame>.

Missing Modules and Native Views #

This is an initial release of React Native Android and therefore not all of the views present on iOS are released on Android. We are very much interested in the communities' feedback on the next set of modules and views for Open Source. Not all native views between iOS and Android have a 100% equivalent representation, here it will be necessary to use a counterpart eg using ProgressBar on Android in place of ActivityIndicator on iOS.

Our provisional plan for common views and modules includes:

Views #

Maps +Known Issues – React Native | A framework for building native apps using React
React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Known Issues

Devtools "React" Tab Does Not Work #

It's currently not possible to use the "React" tab in the devtools to inspect app widgets. This is due to a change in how the application scripts are evaluated in the devtools plugin; they are now run inside a Web Worker, and the plugin is unaware of this and so unable to communicate properly with React Native.

However, you can still use the Console feature of the devtools, and debugging JavaScript with breakpoints works too. To use the console, make sure to select the ⚙debuggerWorker.js entry in the devtools dropdown that by default is set to <top frame>.

Missing Modules and Native Views #

This is an initial release of React Native Android and therefore not all of the views present on iOS are released on Android. We are very much interested in the communities' feedback on the next set of modules and views for Open Source. Not all native views between iOS and Android have a 100% equivalent representation, here it will be necessary to use a counterpart eg using ProgressBar on Android in place of ActivityIndicator on iOS.

Our provisional plan for common views and modules includes:

Views #

Maps Modal Spinner (http://developer.android.com/guide/topics/ui/controls/spinner.html) -Slider (known as SeekBar)

Modules #

Camera Roll +Slider (known as SeekBar)

Modules #

App State +Camera Roll Media -PushNotificationIOS

Some props are only supported on one platform #

There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with @platform in JS docs and have a small badge next to them on the website. See e.g. Image.

Platform parity #

There are known cases where the APIs could be made more consistent across iOS and Android:

  • <ViewPagerAndroid> and <ScrollView pagingEnabled={true}> on iOS do a similar thing. We might want to unify them to <ViewPager>.
  • ActivityIndicator could render a native spinning indicator on both platforms (currently this is done using ActivityIndicatorIOS on iOS and ProgressBarAndroid on Android).
  • ProgressBar could render a horizontal progress bar on both platforms (on iOS this is ProgressViewIOS, on Android it's ProgressBarAndroid).

Using 3rd-party native modules #

There are many awesome 3rd-party modules: JS.coach

Adding these to your apps should be made simpler. Here's an example how this is done currently.

The overflow style property defaults to hidden and cannot be changed on Android #

This is a result of how Android rendering works. This feature is not being worked on as it would be a significant undertaking and there are many more important tasks.

Another issue with overflow: 'hidden' on Android: a view is not clipped by the parent's borderRadius even if the parent has overflow: 'hidden' enabled – the corners of the inner view will be visible outside of the rounded corners. This is only on Android; it works as expected on iOS. See a demo of the bug and the corresponding issue.

View shadows #

The shadow* view styles apply on iOS, and the elevation view prop is available on Android. Setting elevation on Android is equivalent to using the native elevation API, and has the same limitations (most significantly, it only works on Android 5.0+). Setting elevation on Android also affects the z-order for overlapping views.

Android M permissions #

The open source version of React Native doesn't yet support the Android M permission model.

Layout-only nodes on Android #

An optimization feature of the Android version of React Native is for views which only contribute to the layout to not have a native view, only their layout properties are propagated to their children views. This optimization is to provide stability in deep view hierarchies for React Native and is therefore enabled by default. Should you depend on a view being present or internal tests incorrectly detect a view is layout only it will be necessary to turn off this behavior. To do this, set collapsable to false as in this example:

<View collapsable={false}> +PushNotificationIOS

Some props are only supported on one platform #

There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with @platform in JS docs and have a small badge next to them on the website. See e.g. Image.

Platform parity #

There are known cases where the APIs could be made more consistent across iOS and Android:

  • <AndroidViewPager> and <ScrollView pagingEnabled={true}> on iOS do a similar thing. We might want to unify them to <ViewPager>.
  • It might be possible to bring LinkingIOS and IntentAndroid closer together.
  • ActivityIndicator could render a native spinning indicator on both platforms (currently this is done using ActivityIndicatorIOS on iOS and ProgressBarAndroid on Android).
  • ProgressBar could render a horizontal progress bar on both platforms (on iOS this is ProgressViewIOS, on Android it's ProgressBarAndroid).

Using 3rd-party native modules #

There are many awesome 3rd-party modules: https://react.parts/native

Adding these to your apps should be made simpler. Here's an example how this is done currently.

The overflow style property defaults to hidden and cannot be changed on Android #

This is a result of how Android rendering works. This feature is not being worked on as it would be a significant undertaking and there are many more important tasks.

Another issue with overflow: 'hidden' on Android: a view is not clipped by the parent's borderRadius even if the parent has overflow: 'hidden' enabled – the corners of the inner view will be visible outside of the rounded corners. This is only on Android; it works as expected on iOS. See a demo of the bug and the corresponding issue.

View shadows #

The shadow* view styles apply on iOS, and the elevation view prop is available on Android. Setting elevation on Android is equivalent to using the native elevation API, and has the same limitations (most significantly, it only works on Android 5.0+). Setting elevation on Android also affects the z-order for overlapping views.

Android M permissions #

The open source version of React Native doesn't yet support the Android M permission model.

Layout-only nodes on Android #

An optimization feature of the Android version of React Native is for views which only contribute to the layout to not have a native view, only their layout properties are propagated to their children views. This optimization is to provide stability in deep view hierarchies for React Native and is therefore enabled by default. Should you depend on a view being present or internal tests incorrectly detect a view is layout only it will be necessary to turn off this behavior. To do this, set collapsable to false as in this example:

<View collapsable={false}> ... </View>

Memory issues with PNG images #

React Native Android depends on Fresco for loading and displaying images. Currently we have disabled downsampling because it is experimental, so you may run into memory issues when loading large PNG images.

react-native init hangs #

Try running react-native init with --verbose and see #2797 for common causes.

Text Input Border #

The text input has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColor to transparent.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

LayoutAnimation #

Edit on GitHub

Automatically animates views to their new positions when the +LayoutAnimation – React Native | A framework for building native apps using React

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

LayoutAnimation

Automatically animates views to their new positions when the next layout happens.

A common way to use this API is to call LayoutAnimation.configureNext before calling setState.

Methods #

static configureNext(config: Config, onAnimationDidEnd?: Function) #

Schedules an animation to happen on the next layout.

@param config Specifies animation properties:

  • duration in milliseconds
  • create, config for animating in new views (see Anim type)
  • update, config for animating views that have been updated (see Anim type)

@param onAnimationDidEnd Called when the animation finished. Only supported on iOS. -@param onError Called on error. Only supported on iOS.

static create(duration: number, type, creationProp) #

Helper for creating a config for configureNext.

Properties #

Types: CallExpression #

Properties: CallExpression #

configChecker: CallExpression #

Presets: ObjectExpression #

easeInEaseOut: CallExpression #

linear: CallExpression #

spring: CallExpression #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Linking Libraries #

Edit on GitHub

Not every app uses all the native capabilities, and including the code to support +Linking Libraries – React Native | A framework for building native apps using React

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Linking Libraries

Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it easy to add these features whenever you need them.

With that in mind we exposed many of these features as independent static libraries.

For most of the libs it will be as simple as dragging two files, sometimes a third step will be necessary, but no more than that.

All the libraries we ship with React Native live on the Libraries folder in diff --git a/docs/linking.html b/docs/linking.html deleted file mode 100644 index f35622e3c54..00000000000 --- a/docs/linking.html +++ /dev/null @@ -1,56 +0,0 @@ -Linking – React Native | A framework for building native apps using React

React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Linking #

Edit on GitHub

Linking gives you a general interface to interact with both incoming -and outgoing app links.

Basic Usage #

Handling deep links #

If your app was launched from an external url registered to your app you can -access and handle it from any component you want with

componentDidMount() { - var url = Linking.getInitialURL().then(url) => { - if (url) { - console.log('Initial url is: ' + url); - } - }).catch(err => console.error('An error occurred', err)); -}

NOTE: For instructions on how to add support for deep linking on Android, -refer Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links.

NOTE: For iOS, in case you also want to listen to incoming app links during your app's -execution you'll need to add the following lines to you *AppDelegate.m:

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url - sourceApplication:(NSString *)sourceApplication annotation:(id)annotation -{ - return [LinkingManager application:application openURL:url - sourceApplication:sourceApplication annotation:annotation]; -} - -// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). -- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity - restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler -{ - return [LinkingManager application:application - continueUserActivity:userActivity - restorationHandler:restorationHandler]; -}

And then on your React component you'll be able to listen to the events on -Linking as follows

componentDidMount() { - Linking.addEventListener('url', this._handleOpenURL); -}, -componentWillUnmount() { - Linking.removeEventListener('url', this._handleOpenURL); -}, -_handleOpenURL(event) { - console.log(event.url); -}

Note that this is only supported on iOS.

Opening external links #

To start the corresponding activity for a link (web URL, email, contact etc.), call

Linking.openURL(url).catch(err => console.error('An error occurred', err));

If you want to check if any installed app can handle a given URL beforehand you can call

Linking.canOpenURL(url).then(supported => { - if (!supported) { - console.log('Can\'t handle url: ' + url); - } else { - return Linking.openURL(url); - } -}).catch(err => console.error('An error occurred', err));

Methods #

static addEventListener(type: string, handler: Function) #

Add a handler to Linking changes by listening to the url event type -and providing the handler

@platform ios

static removeEventListener(type: string, handler: Function) #

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

@platform ios

static openURL(url: string) #

Try to open the given url with any of the installed apps.

You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, -or any other URL that can be opened with the installed apps.

NOTE: This method will fail if the system doesn't know how to open the specified URL. -If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.

NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

static canOpenURL(url: string) #

Determine whether or not an installed app can handle a given URL.

NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

NOTE: As of iOS 9, your app needs to provide the LSApplicationQueriesSchemes key -inside Info.plist.

@param URL the URL to open

static getInitialURL() #

If the app launch was triggered by an app link with, -it will give the link url, otherwise it will give null

NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

Next →
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/linkingios.html b/docs/linkingios.html index 7da820c154d..05edb38d5c6 100644 --- a/docs/linkingios.html +++ b/docs/linkingios.html @@ -1,4 +1,4 @@ -LinkingIOS – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

LinkingIOS #

Edit on GitHub

NOTE: LinkingIOS is being deprecated. Use Linking instead.

LinkingIOS gives you a general interface to interact with both incoming +LinkingIOS – React Native | A framework for building native apps using React

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

LinkingIOS

LinkingIOS gives you a general interface to interact with both incoming and outgoing app links.

Basic Usage #

Handling deep links #

If your app was launched from an external url registered to your app you can access and handle it from any component you want with

componentDidMount() { var url = LinkingIOS.popInitialURL(); @@ -33,10 +33,10 @@ execution you'll need to add the following lines to you *AppDelegate. LinkingIOS.openURL(url); } });

Methods #

static addEventListener(type: string, handler: Function) #

Add a handler to LinkingIOS changes by listening to the url event type -and providing the handler

@deprecated

static removeEventListener(type: string, handler: Function) #

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

@deprecated

static openURL(url: string) #

Try to open the given url with any of the installed apps.

@deprecated

static canOpenURL(url: string, callback: Function) #

Determine whether or not an installed app can handle a given URL. +and providing the handler

static removeEventListener(type: string, handler: Function) #

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

static openURL(url: string) #

Try to open the given url with any of the installed apps.

static canOpenURL(url: string, callback: Function) #

Determine whether or not an installed app can handle a given URL. The callback function will be called with bool supported as the only argument

NOTE: As of iOS 9, your app needs to provide the LSApplicationQueriesSchemes key -inside Info.plist.

@deprecated

static popInitialURL() #

If the app launch was triggered by an app link, it will pop the link url, -otherwise it will return null

@deprecated

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Linux and Windows Support #

Edit on GitHub

NOTE: This guide focuses on Android development. You'll need a Mac to build iOS apps.

As React Native on iOS requires a Mac and most of the engineers at Facebook and contributors use Macs, support for OS X is a top priority. However, we would like to support developers using Linux and Windows too. We believe we'll get the best Linux and Windows support from people using these operating systems on a daily basis.

Therefore, Linux and Windows support for the development environment is an ongoing community responsibility. This can mean filing issues and submitting PRs, and we'll help review and merge them. We are looking forward to your contributions and appreciate your patience.

As of version 0.14 Android development with React native is mostly possible on Linux and Windows. You'll need to install Node.js 4.0 or newer. On Linux we recommend installing watchman, otherwise you might hit a node file watching bug.

What's missing on Windows #

On Windows the packager won't be started automatically when you run react-native run-android. You can start it manually using:

cd MyAwesomeApp +Linux and Windows Support – React Native | A framework for building native apps using React
React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Linux and Windows Support

NOTE: This guide focuses on Android development. You'll need a Mac to build iOS apps.

As React Native on iOS requires a Mac and most of the engineers at Facebook and contributors use Macs, support for OS X is a top priority. However, we would like to support developers using Linux and Windows too. We believe we'll get the best Linux and Windows support from people using these operating systems on a daily basis.

Therefore, Linux and Windows support for the development environment is an ongoing community responsibility. This can mean filing issues and submitting PRs, and we'll help review and merge them. We are looking forward to your contributions and appreciate your patience.

As of version 0.14 Android development with React native is mostly possible on Linux and Windows. You'll need to install Node.js 4.0 or newer. On Linux we recommend installing watchman, otherwise you might hit a node file watching bug.

What's missing on Windows #

On Windows the packager won't be started automatically when you run react-native run-android. You can start it manually using:

cd MyAwesomeApp react-native start

If you hit a ERROR Watcher took too long to load on Windows, try increasing the timeout in this file (under your node_modules/react-native).

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ListView #

Edit on GitHub

ListView - A core component designed for efficient display of vertically +ListView – React Native | A framework for building native apps using React

React Native0.19

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ListView

ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow @@ -28,7 +28,7 @@ data source tells the ListView if it needs to re-render a row because the source data has changed - see ListViewDataSource for more details.

  • Rate-limited row rendering - By default, only one row is rendered per event-loop (customizable with the pageSize prop). This breaks up the work into smaller chunks to reduce the chance of dropping frames while -rendering rows.

    • Props #

    ScrollView props... #

    dataSource ListViewDataSource #

    initialListSize number #

    How many rows to render on initial component mount. Use this to make +rendering rows.

    Edit on GitHubProps #

    ScrollView props... #

    dataSource ListViewDataSource #

    initialListSize number #

    How many rows to render on initial component mount. Use this to make it so that the first screen worth of data appears at one time instead of over the course of multiple frames.

    onChangeVisibleRows function #

    (visibleRows, changedRows) => void

    Called when the set of visible rows changes. visibleRows maps { sectionID: { rowID: true }} for all the visible rows, and @@ -60,7 +60,7 @@ pixels.

    stickyHeaderIndices={[0]} will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction -with horizontal={true}.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { @@ -77,7 +77,7 @@ with horizontal={true}.

    var ListViewSimpleExample = React.createClass({ statics: { - title: '<ListView>', + title: '<ListView> - Simple', description: 'Performant, scrollable list of data.' }, @@ -97,14 +97,13 @@ with horizontal={true}.

    : function() { return ( <UIExplorerPage - title={this.props.navigator ? null : '<ListView>'} + title={this.props.navigator ? null : '<ListView> - Simple'} noSpacer={true} noScroll={true}> <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />} - renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />} /> </UIExplorerPage> ); @@ -122,6 +121,7 @@ with horizontal={true}.

    {rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)} </Text> </View> + <View style={styles.separator} /> </View> </TouchableHighlight> ); diff --git a/docs/mapview.html b/docs/mapview.html index 1a51998e7ec..0b9e0e1410b 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -MapView – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    MapView #

    		Edit on GitHub

    Props #

    View props... #

    onAnnotationPress function #

    Deprecated. Use annotation onFocus and onBlur instead.

    onRegionChange function #

    Callback that is called continuously when the user is dragging the map.

    onRegionChangeComplete function #

    Callback that is called once, when the user is done moving the map.

    pitchEnabled bool #

    When this property is set to true and a valid camera is associated +MapView – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    MapView

    Edit on GitHubProps #

    View props... #

    onAnnotationPress function #

    Callback that is called once, when the user taps an annotation.

    onRegionChange function #

    Callback that is called continuously when the user is dragging the map.

    onRegionChangeComplete function #

    Callback that is called once, when the user is done moving the map.

    pitchEnabled bool #

    When this property is set to true and a valid camera is associated with the map, the camera’s pitch angle is used to tilt the plane of the map. When this property is set to false, the camera’s pitch angle is ignored and the map is always displayed as if the user @@ -12,24 +12,12 @@ Default value is true.

    style View#style #

    Used to style and layout the MapView. See StyleSheet.js and ViewStylePropTypes.js for more info.

    zoomEnabled bool #

    If false the user won't be able to pinch/zoom the map. -Default value is true.

    androidactive bool #

    iosannotations [{latitude: number, longitude: number, animateDrop: bool, draggable: bool, onDragStateChange: function, onFocus: function, onBlur: function, title: string, subtitle: string, leftCalloutView: element, rightCalloutView: element, detailCalloutView: element, tintColor: [object Object], image: Image.propTypes.source, view: element, id: string, hasLeftCallout: deprecatedPropType( - React.PropTypes.bool, - 'Use `leftCalloutView` instead.' -), hasRightCallout: deprecatedPropType( - React.PropTypes.bool, - 'Use `rightCalloutView` instead.' -), onLeftCalloutPress: deprecatedPropType( - React.PropTypes.func, - 'Use `leftCalloutView` instead.' -), onRightCalloutPress: deprecatedPropType( - React.PropTypes.func, - 'Use `rightCalloutView` instead.' -)}] #

    Map annotations with title/subtitle.

    iosfollowUserLocation bool #

    If true the map will follow the user's location whenever it changes. +Default value is true.

    androidactive bool #

    iosannotations [{latitude: number, longitude: number, animateDrop: bool, draggable: bool, onDragStateChange: function, title: string, subtitle: string, leftCalloutView: element, rightCalloutView: element, detailCalloutView: element, tintColor: ColorPropType, image: Image.propTypes.source, view: element, id: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function}] #

    Map annotations with title/subtitle.

    iosfollowUserLocation bool #

    If true the map will follow the user's location whenever it changes. Note that this has no effect unless showsUserLocation is enabled. Default value is true.

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

    Insets for the map's legal label, originally at bottom left of the map. -See EdgeInsetsPropType.js for more information.

    iosmapType enum('standard', 'satellite', 'hybrid') #

    The map type to be displayed.

    • standard: standard road map (default)
    • satellite: satellite view
    • hybrid: satellite view with roads and points of interest overlaid

    iosmaxDelta number #

    Maximum size of area that can be displayed.

    iosminDelta number #

    Minimum size of area that can be displayed.

    iosoverlays [{coordinates: [{latitude: number, longitude: number}], lineWidth: number, strokeColor: [object Object], fillColor: [object Object], id: string}] #

    Map overlays

    iosshowsCompass bool #

    If false compass won't be displayed on the map. +See EdgeInsetsPropType.js for more information.

    iosmapType enum('standard', 'satellite', 'hybrid') #

    The map type to be displayed.

    • standard: standard road map (default)
    • satellite: satellite view
    • hybrid: satellite view with roads and points of interest overlaid

    iosmaxDelta number #

    Maximum size of area that can be displayed.

    iosminDelta number #

    Minimum size of area that can be displayed.

    iosoverlays [{coordinates: [{latitude: number, longitude: number}], lineWidth: number, strokeColor: ColorPropType, fillColor: ColorPropType, id: string}] #

    Map overlays

    iosshowsCompass bool #

    If false compass won't be displayed on the map. Default value is true.

    iosshowsPointsOfInterest bool #

    If false points of interest won't be displayed on the map. -Default value is true.

    Examples #

    		Edit on GitHub
    'use strict'; +Default value is true.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { @@ -329,27 +317,13 @@ exports.examples }}> <Image style={{width:30, height:30}} - source={require('./uie_thumb_selected.png')} + source={require('image!uie_thumb_selected')} /> </TouchableOpacity> ), }}/>; } }, - { - title: 'Annotation focus example', - render() { - return <AnnotationExample style={styles.map} annotation={{ - title: 'More Info...', - onFocus: () => { - alert('Annotation gets focus'); - }, - onBlur: () => { - alert('Annotation lost focus'); - } - }}/>; - } - }, { title: 'Draggable pin', render() { diff --git a/docs/modal.html b/docs/modal.html index d77db479fef..164d0a41a5d 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -1,10 +1,10 @@ -Modal – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Modal #

    		Edit on GitHub

    A Modal component covers the native view (e.g. UIViewController, Activity) +Modal – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Modal

    A Modal component covers the native view (e.g. UIViewController, Activity) that contains the React Native root.

    Use Modal in hybrid apps that embed React Native; Modal allows the portion of your app written in React Native to present content above the enclosing native view hierarchy.

    In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the -configureScene property.

    This component is only available in iOS at this time.

    Props #

    animated bool #

    onDismiss function #

    transparent bool #

    visible bool #

    Examples #

    		Edit on GitHub
    'use strict'; +configureScene property.

    This component is only available in iOS at this time.

    Edit on GitHubProps #

    animated bool #

    onDismiss function #

    transparent bool #

    visible bool #

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/native-components-android.html b/docs/native-components-android.html index 48657def2da..21dd3da50cc 100644 --- a/docs/native-components-android.html +++ b/docs/native-components-android.html @@ -1,4 +1,4 @@ -Native UI Components – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Native UI Components #

    		Edit on GitHub

    There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.

    Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing ImageViewcomponent available in the core React Native library.

    ImageView example #

    For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.

    Native views are created and manipulated by extending ViewManager or more commonly SimpleViewManager . A SimpleViewManager is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.

    These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend native views to the NativeViewHierarchyManager, which delegates back to them to set and update the properties of the views as necessary. The ViewManagers are also typically the delegates for the views, sending events back to JavaScript via the bridge.

    Vending a view is simple:

    1. Create the ViewManager subclass.
    2. Implement the createViewInstance method
    3. Expose view property setters using @ReactProp (or @ReactPropGroup) annotation
    4. Register the manager in createViewManagers of the applications package.
    5. Implement the JavaScript module

    1. Create the ViewManager subclass #

    In this example we create view manager class ReactImageManager that extends SimpleViewManager of type ReactImageView. ReactImageView is the type of object managed by the manager, this will be the custom native view. Name returned by getName is used to reference the native view type from JavaScript.

    ... +Native UI Components – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Native UI Components

    There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.

    Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing ImageViewcomponent available in the core React Native library.

    ImageView example #

    For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.

    Native views are created and manipulated by extending ViewManager or more commonly SimpleViewManager . A SimpleViewManager is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.

    These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend native views to the NativeViewHierarchyManager, which delegates back to them to set and update the properties of the views as necessary. The ViewManagers are also typically the delegates for the views, sending events back to JavaScript via the bridge.

    Vending a view is simple:

    1. Create the ViewManager subclass.
    2. Implement the createViewInstance method
    3. Expose view property setters using @ReactProp (or @ReactPropGroup) annotation
    4. Register the manager in createViewManagers of the applications package.
    5. Implement the JavaScript module

    1. Create the ViewManager subclass #

    In this example we create view manager class ReactImageManager that extends SimpleViewManager of type ReactImageView. ReactImageView is the type of object managed by the manager, this will be the custom native view. Name returned by getName is used to reference the native view type from JavaScript.

    ... public class ReactImageManager extends SimpleViewManager<ReactImageView> { diff --git a/docs/native-components-ios.html b/docs/native-components-ios.html index d825844787a..928a6e0bd77 100644 --- a/docs/native-components-ios.html +++ b/docs/native-components-ios.html @@ -1,4 +1,4 @@ -Native UI Components – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Native UI Components #

    		Edit on GitHub

    There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.

    Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing MapView component available in the core React Native library.

    iOS MapView example #

    Let's say we want to add an interactive Map to our app - might as well use MKMapView, we just need to make it usable from JavaScript.

    Native views are created and manipulated by subclasses of RCTViewManager. These subclasses are similar in function to view controllers, but are essentially singletons - only one instance of each is created by the bridge. They vend native views to the RCTUIManager, which delegates back to them to set and update the properties of the views as necessary. The RCTViewManagers are also typically the delegates for the views, sending events back to JavaScript via the bridge.

    Vending a view is simple:

    • Create the basic subclass.
    • Add the RCT_EXPORT_MODULE() marker macro.
    • Implement the -(UIView *)view method
    // RCTMapManager.m +Native UI Components – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Native UI Components

    There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.

    Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing MapView component available in the core React Native library.

    iOS MapView example #

    Let's say we want to add an interactive Map to our app - might as well use MKMapView, we just need to make it usable from JavaScript.

    Native views are created and manipulated by subclasses of RCTViewManager. These subclasses are similar in function to view controllers, but are essentially singletons - only one instance of each is created by the bridge. They vend native views to the RCTUIManager, which delegates back to them to set and update the properties of the views as necessary. The RCTViewManagers are also typically the delegates for the views, sending events back to JavaScript via the bridge.

    Vending a view is simple:

    • Create the basic subclass.
    • Add the RCT_EXPORT_MODULE() marker macro.
    • Implement the -(UIView *)view method
    // RCTMapManager.m #import <MapKit/MapKit.h> #import "RCTViewManager.h" @@ -191,7 +191,7 @@ MapView.propTypes ... };

    Styles #

    Since all our native react views are subclasses of UIView, most style attributes will work like you would expect out of the box. Some components will want a default style, however, for example UIDatePicker which is a fixed size. This default style is important for the layout algorithm to work as expected, but we also want to be able to override the default style when using the component. DatePickerIOS does this by wrapping the native component in an extra view, which has flexible styling, and using a fixed style (which is generated with constants passed in from native) on the inner native component:

    // DatePickerIOS.ios.js -var RCTDatePickerIOSConsts = require('react-native').UIManager.RCTDatePicker.Constants; +var RCTDatePickerIOSConsts = require('react-native').NativeModules.UIManager.RCTDatePicker.Constants; ... render: function() { return ( diff --git a/docs/native-modules-android.html b/docs/native-modules-android.html index e0685c4631f..845a15db65e 100644 --- a/docs/native-modules-android.html +++ b/docs/native-modules-android.html @@ -1,4 +1,4 @@ -Native Modules – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Native Modules #

    		Edit on GitHub

    Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.

    We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.

    The Toast Module #

    This guide will use the Toast example. Let's say we would like to be able to create a toast message from JavaScript.

    We start by creating a native module. A native module is a Java class that usually extends the ReactContextBaseJavaModule class and implements the functionality required by the JavaScript. Our goal here is to be able to write ToastAndroid.show('Awesome', ToastAndroid.SHORT); from JavaScript to display a short toast on the screen.

    package com.facebook.react.modules.toast; +Native Modules – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Native Modules

    Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.

    We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.

    The Toast Module #

    This guide will use the Toast example. Let's say we would like to be able to create a toast message from JavaScript.

    We start by creating a native module. A native module is a Java class that usually extends the ReactContextBaseJavaModule class and implements the functionality required by the JavaScript. Our goal here is to be able to write ToastAndroid.show('Awesome', ToastAndroid.SHORT); from JavaScript to display a short toast on the screen.

    package com.facebook.react.modules.toast; import android.widget.Toast; diff --git a/docs/native-modules-ios.html b/docs/native-modules-ios.html index b08335bba33..8c1836791d0 100644 --- a/docs/native-modules-ios.html +++ b/docs/native-modules-ios.html @@ -1,4 +1,4 @@ -Native Modules – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Native Modules #

    		Edit on GitHub

    Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.

    We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.

    This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C or Swift and core libraries (Foundation, UIKit).

    iOS Calendar Module Example #

    This guide will use the iOS Calendar API example. Let's say we would like to be able to access the iOS calendar from JavaScript.

    A native module is just an Objective-C class that implements the RCTBridgeModule protocol. If you are wondering, RCT is an abbreviation of ReaCT.

    // CalendarManager.h +Native Modules – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Native Modules

    Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.

    We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.

    This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C or Swift and core libraries (Foundation, UIKit).

    iOS Calendar Module Example #

    This guide will use the iOS Calendar API example. Let's say we would like to be able to access the iOS calendar from JavaScript.

    A native module is just an Objective-C class that implements the RCTBridgeModule protocol. If you are wondering, RCT is an abbreviation of ReaCT.

    // CalendarManager.h #import "RCTBridgeModule.h" @interface CalendarManager : NSObject <RCTBridgeModule> diff --git a/docs/nativemethodsmixin.html b/docs/nativemethodsmixin.html index 3239634dbdc..bfd657a18fa 100644 --- a/docs/nativemethodsmixin.html +++ b/docs/nativemethodsmixin.html @@ -1,4 +1,4 @@ -NativeMethodsMixin – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NativeMethodsMixin #

    		Edit on GitHub

    NativeMethodsMixin provides methods to access the underlying native +NativeMethodsMixin – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NativeMethodsMixin

    NativeMethodsMixin provides methods to access the underlying native component directly. This can be useful in cases when you want to focus a view or measure its on-screen dimensions, for example.

    The methods described here are available on most of the default components provided by React Native. Note, however, that they are not available on diff --git a/docs/navigator-comparison.html b/docs/navigator-comparison.html index 87a86e02c75..685f170ee18 100644 --- a/docs/navigator-comparison.html +++ b/docs/navigator-comparison.html @@ -1,4 +1,4 @@ -Navigator Comparison – React Native | A framework for building native apps using React

    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Navigator Comparison #

    		Edit on GitHub

    The differences between Navigator +Navigator Comparison – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Navigator Comparison

    The differences between Navigator and NavigatorIOS are a common source of confusion for newcomers.

    Both Navigator and NavigatorIOS are components that allow you to manage the navigation in your app between various "scenes" (another word diff --git a/docs/navigator.html b/docs/navigator.html index d9c54ac4882..7b574797512 100644 --- a/docs/navigator.html +++ b/docs/navigator.html @@ -1,4 +1,4 @@ -Navigator – React Native | A framework for building native apps using React

    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Navigator #

    		Edit on GitHub

    Use Navigator to transition between different scenes in your app. To +Navigator – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Navigator

    Use Navigator to transition between different scenes in your app. To accomplish this, provide route objects to the navigator to identify each scene, and also a renderScene function that the navigator can use to render the scene for a given route.

    To change the animation or gesture properties of the scene, provide a @@ -28,7 +28,7 @@ on it to trigger navigation:

    • getCurrentRoutes() - return that you could jumpForward to
    • pop() - Transition back and unmount the current scene
    • replace(route) - Replace the current scene with a new route
    • replaceAtIndex(route, index) - Replace a scene as specified by an index
    • replacePrevious(route) - Replace the previous scene
    • resetTo(route) - Navigate to a new scene and reset route stack
    • immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes
    • popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted
    • popToTop() - Pop to the first scene in the stack, unmounting every - other scene

    Props #

    configureScene function #

    Optional function that allows configuration about scene animations and + other scene

    Edit on GitHubProps #

    configureScene function #

    Optional function that allows configuration about scene animations and gestures. Will be invoked with the route and the routeStack and should return a scene configuration object

    (route, routeStack) => Navigator.SceneConfigs.FloatFromRight

    initialRoute object #

    Specify a route to start on. A route is an object that the navigator will use to identify each scene to render. initialRoute must be @@ -36,8 +36,10 @@ a route in the initialRouteStack if both props are provided. The initialRoute will default to the last item in the initialRouteStack.

    initialRouteStack [object] #

    Provide a set of routes to initially mount. Required if no initialRoute is provided. Otherwise, it will default to an array containing only the initialRoute

    navigationBar node #

    Optionally provide a navigation bar that persists across scene -transitions

    navigator object #

    Optionally provide the navigator object from a parent Navigator

    onDidFocus function #

    Deprecated

    Use navigationContext.addListener('didfocus', callback) instead.

    Will be called with the new route of each scene after the transition is -complete or after the initial mounting

    onWillFocus function #

    Deprecated

    Use navigationContext.addListener('willfocus', callback) instead.

    Will emit the target route upon mounting and before each nav transition

    renderScene function #

    Required function which renders the scene for a given route. Will be +transitions

    navigator object #

    Optionally provide the navigator object from a parent Navigator

    onDidFocus function #

    @deprecated +Use navigationContext.addListener('didfocus', callback) instead.

    Will be called with the new route of each scene after the transition is +complete or after the initial mounting

    onWillFocus function #

    @deprecated +Use navigationContext.addListener('willfocus', callback) instead.

    Will emit the target route upon mounting and before each nav transition

    renderScene function #

    Required function which renders the scene for a given route. Will be invoked with the route and the navigator object

    (route, navigator) => <MySceneComponent title={route.title} navigator={navigator} />

    sceneStyle View#style #

    Styles to apply to the container of each scene

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NavigatorIOS #

    		Edit on GitHub

    NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +NavigatorIOS – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NavigatorIOS

    NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app.

    NOTE: This Component is not maintained by Facebook

    This component is under community responsibility. If a pure JavaScript solution fits your needs you may try the Navigator component instead.

    Routes #

    A route is an object used to describe each page in the navigator. The first @@ -38,10 +38,10 @@ transitions back to it

  • resetTo(route) - Replaces the top it });

    • Props passed to the NavigatorIOS component will set the default configuration for the navigation bar. Props passed as properties to a route object will set the configuration for that route's navigation bar, overriding any props -passed to the NavigatorIOS component.

    Props #

    barTintColor string #

    The default background color of the navigation bar

    initialRoute {component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object], navigationBarHidden: bool, shadowHidden: bool, tintColor: string, barTintColor: string, titleTextColor: string, translucent: bool} #

    NavigatorIOS uses "route" objects to identify child views, their props, +passed to the NavigatorIOS component.

    Edit on GitHubProps #

    barTintColor string #

    The default background color of the navigation bar

    initialRoute {component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object], navigationBarHidden: bool, shadowHidden: bool, tintColor: string, barTintColor: string, titleTextColor: string, translucent: bool} #

    NavigatorIOS uses "route" objects to identify child views, their props, and navigation bar configuration. "push" and all the other navigation operations expect routes to be like this:

    itemWrapperStyle View#style #

    The default wrapper style for components in the navigator. -A common use case is to set the backgroundColor for every page

    navigationBarHidden bool #

    A Boolean value that indicates whether the navigation bar is hidden by default

    shadowHidden bool #

    A Boolean value that indicates whether to hide the 1px hairline shadow by default

    tintColor string #

    The default color used for buttons in the navigation bar

    titleTextColor string #

    The default text color of the navigation bar title

    translucent bool #

    A Boolean value that indicates whether the navigation bar is translucent by default

    Examples #

    		Edit on GitHub
    'use strict'; +A common use case is to set the backgroundColor for every page

    navigationBarHidden bool #

    A Boolean value that indicates whether the navigation bar is hidden by default

    shadowHidden bool #

    A Boolean value that indicates whether to hide the 1px hairline shadow by default

    tintColor string #

    The default color used for buttons in the navigation bar

    titleTextColor string #

    The default text color of the navigation bar title

    translucent bool #

    A Boolean value that indicates whether the navigation bar is translucent by default

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var ViewExample = require('./ViewExample'); diff --git a/docs/netinfo.html b/docs/netinfo.html index 7976a401156..868d7806f08 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,4 +1,4 @@ -NetInfo – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NetInfo #

    		Edit on GitHub

    NetInfo exposes info about online/offline status

    NetInfo.fetch().done((reach) => { +NetInfo – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NetInfo

    NetInfo exposes info about online/offline status

    NetInfo.fetch().done((reach) => { console.log('Initial: ' + reach); }); function handleFirstConnectivityChange(reach) { @@ -31,7 +31,7 @@ internet connectivity.

    NetInfo.isConnected.addEventListener( 'change', handleFirstConnectivityChange -);

    Methods #

    static addEventListener(eventName: ChangeEventName, handler: Function) #

    static removeEventListener(eventName: ChangeEventName, handler: Function) #

    static fetch() #

    static isConnectionExpensive(callback: (metered: ?boolean, error?: string) => void) #

    Properties #

    isConnected: ObjectExpression #

    Examples #

    		Edit on GitHub
    'use strict'; +);

    Methods #

    static addEventListener(eventName: ChangeEventName, handler: Function) #

    static removeEventListener(eventName: ChangeEventName, handler: Function) #

    static fetch() #

    static isConnectionExpensive(callback: (metered: ?boolean, error?: string) => void) #

    Properties #

    isConnected: ObjectExpression #

    Edit on GitHubExamples #

    'use strict'; const React = require('react-native'); const { diff --git a/docs/network.html b/docs/network.html index b2425a5315f..699b817518a 100644 --- a/docs/network.html +++ b/docs/network.html @@ -1,4 +1,4 @@ -Network – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Network #

    		Edit on GitHub

    One of React Native's goals is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change anything, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.

    Fetch #

    fetch is a better networking API being worked on by the standards committee and is already available in Chrome. It is available in React Native by default.

    Usage #

    fetch('https://mywebsite.com/endpoint/')

    Include a request object as the optional second argument to customize the HTTP request:

    fetch('https://mywebsite.com/endpoint/', { +Network – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Network

    One of React Native's goals is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change anything, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.

    Fetch #

    fetch is a better networking API being worked on by the standards committee and is already available in Chrome. It is available in React Native by default.

    Usage #

    fetch('https://mywebsite.com/endpoint/')

    Include a request object as the optional second argument to customize the HTTP request:

    fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', diff --git a/docs/panresponder.html b/docs/panresponder.html index bfe1abcb1cb..97be15d221d 100644 --- a/docs/panresponder.html +++ b/docs/panresponder.html @@ -1,4 +1,4 @@ -PanResponder – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PanResponder #

    		Edit on GitHub

    PanResponder reconciles several touches into a single gesture. It makes +PanResponder – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PanResponder

    PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.

    It provides a predictable wrapper of the responder handlers provided by the gesture responder system. @@ -57,7 +57,7 @@ as well.

    Be careful with onStartShould* callbacks. They only reflect updat Once the node is the responder, you can rely on every start/end event being processed by the gesture and gestureState being updated accordingly. (numberActiveTouches) may not be totally accurate unless you -are the responder.

    Examples #

    		Edit on GitHub
    'use strict'; +are the responder.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/performance.html b/docs/performance.html index 9ffd2903a94..6f8f7552bd4 100644 --- a/docs/performance.html +++ b/docs/performance.html @@ -1,4 +1,4 @@ -Performance – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Performance #

    		Edit on GitHub

    A compelling reason for using React Native instead of WebView-based +Performance – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Performance

    A compelling reason for using React Native instead of WebView-based tools is to achieve 60 FPS and a native look & feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there diff --git a/docs/picker.html b/docs/picker.html deleted file mode 100644 index 0ff9ad346e3..00000000000 --- a/docs/picker.html +++ /dev/null @@ -1,20 +0,0 @@ -Picker – React Native | A framework for building native apps using React

    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Picker #

    		Edit on GitHub

    Renders the native picker component on iOS and Android. Example:

    <Picker - selectedValue={this.state.language} - onValueChange={(lang) => this.setState({language: lang})}> - <Picker.Item label="Java" value="java" /> - <Picker.Item label="JavaScript" value="js" /> -</Picker>

    Props #

    View props... #

    onValueChange function #

    Callback for when an item is selected. This is called with the following parameters: - - itemValue: the value prop of the item that was selected - - itemPosition: the index of the selected item in this picker

    selectedValue any #

    Value matching value of one of the items. Can be a string or an integer.

    style pickerStyleType #

    testID string #

    Used to locate this view in end-to-end tests.

    androidenabled bool #

    If set to false, the picker will be disabled, i.e. the user will not be able to make a -selection.

    androidmode enum('dialog', 'dropdown') #

    On Android, specifies how to display the selection items when the user taps on the picker:

    • 'dialog': Show a modal dialog. This is the default.
    • 'dropdown': Shows a dropdown anchored to the picker view

    androidprompt string #

    Prompt string for this picker, used on Android in dialog mode as the title of the dialog.

    iositemStyle itemStylePropType #

    Style to apply to each of the item labels.

    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file diff --git a/docs/pickerios.html b/docs/pickerios.html index 3ac943aca21..0514ed3f257 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,4 +1,4 @@ -PickerIOS – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PickerIOS #

    		Edit on GitHub

    Props #

    View props... #

    itemStyle itemStylePropType #

    onValueChange function #

    selectedValue any #

    Examples #

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

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PickerIOS

    Edit on GitHubProps #

    View props... #

    itemStyle itemStylePropType #

    onValueChange function #

    selectedValue any #

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { @@ -137,7 +137,7 @@ exports.examples : function(): ReactElement { return <PickerStyleExample />; }, -}];
    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PixelRatio #

    		Edit on GitHub

    PixelRatio class gives access to the device pixel density.

    Fetching a correctly sized image #

    You should get a higher resolution image if you are on a high pixel density +PixelRatio – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PixelRatio

    PixelRatio class gives access to the device pixel density.

    Fetching a correctly sized image #

    You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.

    var image = getImage({ width: PixelRatio.getPixelSizeForLayoutSize(200), @@ -11,7 +11,7 @@ Settings > Display > Font size, on iOS it will always return the default p @platform android

    static getPixelSizeForLayoutSize(layoutSize: number) #

    Converts a layout size (dp) to pixel size (px).

    Guaranteed to return an integer number.

    static roundToNearestPixel(layoutSize: number) #

    Rounds a layout size (dp) to the nearest layout size that corresponds to an integer number of pixels. For example, on a device with a PixelRatio of 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, which corresponds to -exactly (8.33 * 3) = 25 pixels.

    static startDetecting() #

    // No-op for iOS, but used on the web. Should not be documented.

    Description #

    		Edit on GitHub

    Pixel Grid Snapping #

    In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.

    In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

    We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

    In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Platform Specific Code #

    		Edit on GitHub

    When building a cross-platform app, the need to write different code for different platforms may arise. This can always be achieved by organizing the various components in different folders:

    /common/components/ +Platform Specific Code – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Platform Specific Code

    When building a cross-platform app, the need to write different code for different platforms may arise. This can always be achieved by organizing the various components in different folders:

    /common/components/ /android/components/ /ios/components/

    Another option may be naming the components differently depending on the platform they are going to be used in:

    BigButtonIOS.js BigButtonAndroid.js

    But React Native provides two alternatives to easily organize your code separating it by platform:

    Platform specific extensions #

    React Native will detect when a file has a .ios. or .android. extension and load the right file for each platform when requiring them from other components.

    For example, you can have these files in your project:

    BigButton.ios.js diff --git a/docs/progressbarandroid.html b/docs/progressbarandroid.html index 19432f12f10..e135972eb66 100644 --- a/docs/progressbarandroid.html +++ b/docs/progressbarandroid.html @@ -1,4 +1,4 @@ -ProgressBarAndroid – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ProgressBarAndroid #

    		Edit on GitHub

    React component that wraps the Android-only ProgressBar. This component is used to indicate +ProgressBarAndroid – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ProgressBarAndroid

    React component that wraps the Android-only ProgressBar. This component is used to indicate that the app is loading or there is some activity in the app.

    Example:

    render: function() { var progressBar = <View style={styles.container}> @@ -12,8 +12,8 @@ that the app is loading or there is some activity in the app.

    Example:

    style={styles.loadingComponent} /> ); -},

    Props #

    View props... #

    color color #

    Color of the progress bar.

    indeterminate indeterminateType #

    If the progress bar will show indeterminate progress. Note that this -can only be false if styleAttr is Horizontal.

    progress number #

    The progress value (between 0 and 1).

    styleAttr STYLE_ATTRIBUTES #

    Style of the ProgressBar. One of:

    • Horizontal
    • Normal (default)
    • Small
    • Large
    • Inverse
    • SmallInverse
    • LargeInverse

    testID string #

    Used to locate this view in end-to-end tests.

    Examples #

    		Edit on GitHub
    'use strict'; +},

    Edit on GitHubProps #

    View props... #

    color ColorPropType #

    Color of the progress bar.

    indeterminate indeterminateType #

    If the progress bar will show indeterminate progress. Note that this +can only be false if styleAttr is Horizontal.

    progress number #

    The progress value (between 0 and 1).

    styleAttr STYLE_ATTRIBUTES #

    Style of the ProgressBar. One of:

    • Horizontal
    • Normal (default)
    • Small
    • Large
    • Inverse
    • SmallInverse
    • LargeInverse

    testID string #

    Used to locate this view in end-to-end tests.

    Edit on GitHubExamples #

    'use strict'; var ProgressBar = require('ProgressBarAndroid'); var React = require('React'); diff --git a/docs/progressviewios.html b/docs/progressviewios.html index 1e12372fff4..4276489bc86 100644 --- a/docs/progressviewios.html +++ b/docs/progressviewios.html @@ -1,4 +1,4 @@ -ProgressViewIOS – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ProgressViewIOS #

    		Edit on GitHub

    Use ProgressViewIOS to render a UIProgressView on iOS.

    Props #

    View props... #

    progress number #

    The progress value (between 0 and 1).

    progressImage Image.propTypes.source #

    A stretchable image to display as the progress bar.

    progressTintColor string #

    The tint color of the progress bar itself.

    progressViewStyle enum('default', 'bar') #

    The progress bar style.

    trackImage Image.propTypes.source #

    A stretchable image to display behind the progress bar.

    trackTintColor string #

    The tint color of the progress bar track.

    Examples #

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

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ProgressViewIOS

    Use ProgressViewIOS to render a UIProgressView on iOS.

    Edit on GitHubProps #

    View props... #

    progress number #

    The progress value (between 0 and 1).

    progressImage Image.propTypes.source #

    A stretchable image to display as the progress bar.

    progressTintColor string #

    The tint color of the progress bar itself.

    progressViewStyle enum('default', 'bar') #

    The progress bar style.

    trackImage Image.propTypes.source #

    A stretchable image to display behind the progress bar.

    trackTintColor string #

    The tint color of the progress bar track.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/pulltorefreshviewandroid.html b/docs/pulltorefreshviewandroid.html index 97af8fcf316..6ddf049c376 100644 --- a/docs/pulltorefreshviewandroid.html +++ b/docs/pulltorefreshviewandroid.html @@ -1,6 +1,6 @@ -PullToRefreshViewAndroid – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PullToRefreshViewAndroid #

    		Edit on GitHub

    React view that supports a single scrollable child view (e.g. ScrollView). When this child +PullToRefreshViewAndroid – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PullToRefreshViewAndroid

    React view that supports a single scrollable child view (e.g. ScrollView). When this child view is at scrollY: 0, swiping down triggers an onRefresh event.

    The style {flex: 1} might be required to ensure the expected behavior of the child component -(e.g. when the child is expected to scroll with ScrollView or ListView).

    Props #

    View props... #

    colors [[object Object]] #

    The colors (at least one) that will be used to draw the refresh indicator

    enabled bool #

    Whether the pull to refresh functionality is enabled

    progressBackgroundColor color #

    The background color of the refresh indicator

    refreshing bool #

    Whether the view should be indicating an active refresh

    size RefreshLayoutConsts.SIZE.DEFAULT #

    Size of the refresh indicator, see PullToRefreshViewAndroid.SIZE

    Examples #

    		Edit on GitHub
    'use strict'; +(e.g. when the child is expected to scroll with ScrollView or ListView).

    Edit on GitHubProps #

    View props... #

    colors [ColorPropType] #

    The colors (at least one) that will be used to draw the refresh indicator

    enabled bool #

    Whether the pull to refresh functionality is enabled

    progressBackgroundColor ColorPropType #

    The background color of the refresh indicator

    refreshing bool #

    Whether the view should be indicating an active refresh

    size RefreshLayoutConsts.SIZE.DEFAULT #

    Size of the refresh indicator, see PullToRefreshViewAndroid.SIZE

    Edit on GitHubExamples #

    'use strict'; const React = require('react-native'); const { diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html index 2a0cc5037c2..f179e8f412a 100644 --- a/docs/pushnotificationios.html +++ b/docs/pushnotificationios.html @@ -1,4 +1,4 @@ -PushNotificationIOS – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PushNotificationIOS #

    		Edit on GitHub

    Handle push notifications for your app, including permission handling and +PushNotificationIOS – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PushNotificationIOS

    Handle push notifications for your app, including permission handling and icon badge number.

    To get up and running, configure your notifications with Apple and your server-side system. To get an idea, this is the Parse guide.

    Manually link the PushNotificationIOS library

    • Be sure to add the following to your Header Search Paths: $(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS
    • Set the search to recursive

    Finally, to enable support for notification and register events you need to augment your AppDelegate.

    At the top of your AppDelegate.m:

    #import "RCTPushNotificationManager.h"

    And then in your AppDelegate implementation add the following:

    // Required to register for notifications @@ -36,7 +36,7 @@ memory leaks

    constructor(nativeNotif: Object) #

    You will never need to instantiate PushNotificationIOS yourself. Listening to the notification event and invoking -popInitialNotification is sufficient

    getMessage() #

    An alias for getAlert to get the notification's main message string

    getSound() #

    Gets the sound string from the aps object

    getAlert() #

    Gets the notification's main message from the aps object

    getBadgeCount() #

    Gets the badge count number from the aps object

    getData() #

    Gets the data object on the notif

    Examples #

    		Edit on GitHub
    'use strict'; +popInitialNotification is sufficient

    getMessage() #

    An alias for getAlert to get the notification's main message string

    getSound() #

    Gets the sound string from the aps object

    getAlert() #

    Gets the notification's main message from the aps object

    getBadgeCount() #

    Gets the badge count number from the aps object

    getData() #

    Gets the data object on the notif

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/refreshcontrol.html b/docs/refreshcontrol.html index 9ff67f648e4..eb3bb92115e 100644 --- a/docs/refreshcontrol.html +++ b/docs/refreshcontrol.html @@ -1,6 +1,6 @@ -RefreshControl – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    RefreshControl #

    		Edit on GitHub

    This component is used inside a ScrollView to add pull to refresh +RefreshControl – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    RefreshControl

    This component is used inside a ScrollView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down -triggers an onRefresh event.

    Props #

    View props... #

    onRefresh function #

    Called when the view starts refreshing.

    refreshing bool #

    Whether the view should be indicating an active refresh.

    androidcolors [[object Object]] #

    The colors (at least one) that will be used to draw the refresh indicator.

    androidenabled bool #

    Whether the pull to refresh functionality is enabled.

    androidprogressBackgroundColor color #

    The background color of the refresh indicator.

    androidsize RefreshLayoutConsts.SIZE.DEFAULT #

    Size of the refresh indicator, see RefreshControl.SIZE.

    iostintColor color #

    The color of the refresh indicator.

    iostitle string #

    The title displayed under the refresh indicator.

    Examples #

    		Edit on GitHub
    'use strict'; +triggers an onRefresh event.

    Edit on GitHubProps #

    onRefresh function #

    Called when the view starts refreshing.

    refreshing bool #

    Whether the view should be indicating an active refresh.

    androidcolors [ColorPropType] #

    The colors (at least one) that will be used to draw the refresh indicator.

    androidenabled bool #

    Whether the pull to refresh functionality is enabled.

    androidprogressBackgroundColor ColorPropType #

    The background color of the refresh indicator.

    androidsize RefreshLayoutConsts.SIZE.DEFAULT #

    Size of the refresh indicator, see RefreshControl.SIZE.

    iostintColor ColorPropType #

    The color of the refresh indicator.

    iostitle string #

    The title displayed under the refresh indicator.

    Edit on GitHubExamples #

    'use strict'; const React = require('react-native'); const { @@ -57,7 +57,7 @@ const RefreshControlExample = React: false, loaded: 0, rowData: Array.from(new Array(20)).map( - (val, i) => ({text: 'Initial row ' + i, clicks: 0})), + (val, i) => ({text: 'Initial row' + i, clicks: 0})), }; }, @@ -96,7 +96,7 @@ const RefreshControlExample = React // prepend 10 items const rowData = Array.from(new Array(10)) .map((val, i) => ({ - text: 'Loaded row ' + (+this.state.loaded + i), + text: 'Loaded row' + (+this.state.loaded + i), clicks: 0, })) .concat(this.state.rowData); diff --git a/docs/running-on-device-android.html b/docs/running-on-device-android.html index 879e7814be9..2995470ca7f 100644 --- a/docs/running-on-device-android.html +++ b/docs/running-on-device-android.html @@ -1,4 +1,4 @@ -Running On Device – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Running On Device #

    		Edit on GitHub

    Prerequisite: USB Debugging #

    You'll need this in order to install your app on your device. First, make sure you have USB debugging enabled on your device.

    Check that your device has been successfully connected by running adb devices:

    $ adb devices +Running On Device – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Running On Device

    Prerequisite: USB Debugging #

    You'll need this in order to install your app on your device. First, make sure you have USB debugging enabled on your device.

    Check that your device has been successfully connected by running adb devices:

    $ adb devices List of devices attached emulator-5554 offline # Google emulator 14ed2fcc device # Physical device

    Seeing device in the right column means the device is connected. Android - go figure :) You must have only one device connected.

    Now you can use react-native run-android to install and launch your app on the device.

    Accessing development server from device #

    You can also iterate quickly on device using the development server. Follow one of the steps described below to make your development server running on your laptop accessible for your device.

    Hint

    Most modern android devices don't have a hardware menu button, which we use to trigger the developer menu. In that case you can shake the device to open the dev menu (to reload, debug, etc.). Alternatively, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

    Using adb reverse #

    Note that this option is available on devices running android 5.0+ (API 21).

    Have your device connected via USB with debugging enabled (see paragraph above on how to enable USB debugging on your device).

    1. Run adb reverse tcp:8081 tcp:8081
    2. You can use Reload JS and other development options with no extra configuration

    Configure your app to connect to the local dev server via Wi-Fi #

    1. Make sure your laptop and your phone are on the same Wi-Fi network.
    2. Open your React Native app on your device. You can do this the same way you'd open any other app.
    3. You'll see a red screen with an error. This is OK. The following steps will fix that.
    4. Open the Developer menu by shaking the device or running adb shell input keyevent 82 from the command line.
    5. Go to Dev Settings.
    6. Go to Debug server host for device.
    7. Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). On Mac, you can find the IP address in System Preferences / Network. On Windows, open the command prompt and type ipconfig to find your machine's IP address (more info).
    8. Go back to the Developer menu and select Reload JS.
    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Running On Device #

    		Edit on GitHub

    Note that running on device requires Apple Developer account and provisioning your iPhone. This guide covers only React Native specific topic.

    Accessing development server from device #

    You can iterate quickly on device using development server. To do that, your laptop and your phone have to be on the same wifi network.

    1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
    2. Change the IP in the URL from localhost to your laptop's IP. On Mac, you can find the IP address in System Preferences / Network.
    3. In Xcode select your phone as build target and press "Build and run"

    Hint

    Shake the device to open development menu (reload, debug, etc.)

    Using offline bundle #

    When you run your app on device, we pack all the JavaScript code and the images used into the app's resources. This way you can test it without development server running and submit the app to the AppStore.

    1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
    2. Uncomment jsCodeLocation = [[NSBundle mainBundle] ...
    3. The JS bundle will be built for dev or prod depending on your app's scheme (Debug = development build with warnings, Release = minified prod build with perf optimizations). To change the scheme navigate to Product > Scheme > Edit Scheme... in xcode and change Build Configuration between Debug and Release.

    Disabling in-app developer menu #

    When building your app for production, your app's scheme should be set to Release as detailed in the debugging documentation in order to disable the in-app developer menu.

    Troubleshooting #

    If curl command fails make sure the packager is running. Also try adding --ipv4 flag to the end of it.

    Note that since v0.14 JS and images are automatically packaged into the iOS app using Bundle React Native code and images Xcode build phase.

    Next →
    © 2015 Facebook Inc.
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Running On Device

    Note that running on device requires Apple Developer account and provisioning your iPhone. This guide covers only React Native specific topic.

    Accessing development server from device #

    You can iterate quickly on device using development server. To do that, your laptop and your phone have to be on the same wifi network.

    1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
    2. Change the IP in the URL from localhost to your laptop's IP. On Mac, you can find the IP address in System Preferences / Network.
    3. In Xcode select your phone as build target and press "Build and run"

    Hint

    Shake the device to open development menu (reload, debug, etc.)

    Using offline bundle #

    You can also pack all the JavaScript code within the app itself. This way you can test it without development server running and submit the app to the AppStore.

    1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
    2. Follow the instructions for "OPTION 2":
      • Uncomment jsCodeLocation = [[NSBundle mainBundle] ...
      • Run the react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output iOS/main.jsbundle command in terminal from the root directory of your app

    The bundle script supports a couple of flags:

    • --dev - a boolean with a default value of true. With the --dev true flag, the bundled JavaScript code turns on useful development warnings and limits performance optimizations. For production it is recommended to pass --dev false. Also for production, be sure to have your native build configuration set to Release (e.g., Xcode's Release configuration for iOS and gradle's assembleRelease task for Android) in order to disable things like the shake-to-show developer menu.
    • --minify - pipe the JS code through UglifyJS.

    Note that on 0.14 we'll change the API of react-native bundle. The major changes are:

    • API is now entry-file <path> based instead of url based.
    • Need to specify which platform you're bundling for --platform <ios|android>.
    • Option --out has been renamed for --bundle-output.
    • Source maps are no longer automatically generated. Need to specify --sourcemap-output <path>

    Disabling in-app developer menu #

    When building your app for production, your app's scheme should be set to Release as detailed in the debugging documentation in order to disable the in-app developer menu.

    Troubleshooting #

    If curl command fails make sure the packager is running. Also try adding --ipv4 flag to the end of it.

    If you started your project a while ago, main.jsbundle might not be included into Xcode project. To add it, right click on your project directory and click "Add Files to ..." - choose the main.jsbundle file that you generated.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ScrollView #

    		Edit on GitHub

    Component that wraps platform ScrollView while providing +ScrollView – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ScrollView

    Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

    Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either @@ -6,7 +6,7 @@ set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.

    Doesn't yet support other contained responders from blocking this scroll -view from becoming the responder.

    Props #

    View props... #

    contentContainerStyle StyleSheetPropType(ViewStylePropTypes) #

    These styles will be applied to the scroll view content container which +view from becoming the responder.

    Edit on GitHubProps #

    View props... #

    contentContainerStyle StyleSheetPropType(ViewStylePropTypes) #

    These styles will be applied to the scroll view content container which wraps all of the child views. Example:

    return ( <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView> @@ -17,7 +17,7 @@ wraps all of the child views. Example:

    return ( paddingVertical: 20 } });

    horizontal bool #

    When true, the scroll view's children are arranged horizontally in a row -instead of vertically in a column. The default value is false.

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

    Determines whether the keyboard gets dismissed in response to a drag. +instead of vertically in a column. The default value is false.

    keyboardDismissMode enum('none', "interactive", '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. - 'interactive', the keyboard is dismissed interactively with the drag and moves in @@ -32,13 +32,7 @@ events can be controlled using the scrollEventThrottle prop.

    See RefreshControl.

    removeClippedSubviews bool #

    Experimental: When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is -true.

    scrollEnabled bool #

    When false, the content does not scroll. -The default value is true.

    showsHorizontalScrollIndicator bool #

    When true, shows a horizontal scroll indicator.

    showsVerticalScrollIndicator bool #

    When true, shows a vertical scroll indicator.

    style style #

    Flexbox...
    ShadowPropTypesIOS#style...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor color
    borderBottomColor color
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderBottomWidth number
    borderColor color
    borderLeftColor color
    borderLeftWidth number
    borderRadius number
    borderRightColor color
    borderRightWidth number
    borderStyle enum('solid', 'dotted', 'dashed')
    borderTopColor color
    borderTopLeftRadius number
    borderTopRightRadius number
    borderTopWidth number
    borderWidth number
    opacity number
    overflow enum('visible', 'hidden')
    androidelevation number

    (Android-only) Sets the elevation of a view, using Android's underlying -elevation API. -This adds a drop shadow to the item and affects z-order for overlapping views. -Only supported on Android 5.0+, has no effect on earlier versions.

    androidsendMomentumEvents bool #

    When true, momentum events will be sent from Android -This is internal and set automatically by the framework if you have -onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView

    iosalwaysBounceHorizontal bool #

    When true, the scroll view bounces horizontally when it reaches the end +true.

    showsHorizontalScrollIndicator bool #

    When true, shows a horizontal scroll indicator.

    showsVerticalScrollIndicator bool #

    When true, shows a vertical scroll indicator.

    style style #

    Flexbox...
    ShadowPropTypesIOS#style...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor ColorPropType
    borderColor ColorPropType
    borderTopColor ColorPropType
    borderRightColor ColorPropType
    borderBottomColor ColorPropType
    borderLeftColor ColorPropType
    borderRadius number
    borderTopLeftRadius number
    borderTopRightRadius number
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderStyle enum('solid', 'dotted', 'dashed')
    borderWidth number
    borderTopWidth number
    borderRightWidth number
    borderBottomWidth number
    borderLeftWidth number
    opacity number
    overflow enum('visible', 'hidden')
    elevation number

    iosalwaysBounceHorizontal bool #

    When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when horizontal={true} and false otherwise.

    iosalwaysBounceVertical bool #

    When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default @@ -55,19 +49,14 @@ content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect. The default value is false.

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

    The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to {0, 0, 0, 0}.

    ioscontentOffset PointPropType #

    Used to manually set the starting scroll offset. -The default value is {x: 0, y: 0}.

    iosdecelerationRate enum('fast', 'normal'), number #

    A floating-point number that determines how quickly the scroll view -decelerates after the user lifts their finger. You may also use string -shortcuts "normal" and "fast" which match the underlying iOS settings -for UIScrollViewDecelerationRateNormal and -UIScrollViewDecelerationRateFast respectively. +The default value is {x: 0, y: 0}.

    iosdecelerationRate number #

    A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. Reasonable choices include - Normal: 0.998 (the default) - Fast: 0.9

    iosdirectionalLockEnabled bool #

    When true, the ScrollView will try to lock to only vertical or horizontal -scrolling while dragging. The default value is false.

    iosindicatorStyle enum('default', 'black', 'white') #

    The style of the scroll indicators. - - default (the default), same as black. - - black, scroll indicator is black. This style is good against a white content background. - - white, scroll indicator is white. This style is good against a black content background.

    iosmaximumZoomScale number #

    The maximum allowed zoom scale. The default value is 1.0.

    iosminimumZoomScale number #

    The minimum allowed zoom scale. The default value is 1.0.

    iosonRefreshStart function #

    Deprecated

    Use the refreshControl prop instead.

    iosonScrollAnimationEnd function #

    Called when a scrolling animation ends.

    iospagingEnabled bool #

    When true, the scroll view stops on multiples of the scroll view's size +scrolling while dragging. The default value is false.

    iosmaximumZoomScale number #

    The maximum allowed zoom scale. The default value is 1.0.

    iosminimumZoomScale number #

    The minimum allowed zoom scale. The default value is 1.0.

    iosonRefreshStart function #

    Deprecated - use refreshControl property instead.

    iosonScrollAnimationEnd function #

    Called when a scrolling animation ends.

    iospagingEnabled bool #

    When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. The default -value is false.

    iosscrollEventThrottle number #

    This controls how often the scroll event will be fired while scrolling +value is false.

    iosscrollEnabled bool #

    When false, the content does not scroll. +The default value is true.

    iosscrollEventThrottle number #

    This controls how often the scroll event will be fired while scrolling (in events per seconds). A higher number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. @@ -75,7 +64,9 @@ The default value is zero, which means the scroll event will be sent only once each time the view is scrolled.

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

    The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the contentInset. Defaults to {0, 0, 0, 0}.

    iosscrollsToTop bool #

    When true, the scroll view scrolls to top when the status bar is tapped. -The default value is true.

    iossnapToAlignment enum('start', 'center', 'end') #

    When snapToInterval is set, snapToAlignment will define the relationship +The default value is true.

    androidsendMomentumEvents bool #

    When true, momentum events will be sent from Android +This is internal and set automatically by the framework if you have +onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView

    iossnapToAlignment enum('start', "center", 'end') #

    When snapToInterval is set, snapToAlignment will define the relationship of the the snapping to the scroll view. - start (the default) will align the snap at the left (horizontal) or top (vertical) - center will align the snap in the center @@ -86,14 +77,12 @@ with snapToAlignment.

    ioszoomScale number #

    The current scale of the scroll view content. The default value is 1.0.

    Examples #

    		Edit on GitHub
    'use strict'; +with horizontal={true}.

    ioszoomScale number #

    The current scale of the scroll view content. The default value is 1.0.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { ScrollView, StyleSheet, - Text, - TouchableOpacity, View, Image } = React; @@ -106,45 +95,27 @@ exports.examples : '<ScrollView>', description: 'To make content scrollable, wrap it within a <ScrollView> component', render: function() { - var _scrollView: ScrollView; return ( - <View> - <ScrollView - ref={(scrollView) => { _scrollView = scrollView; }} - automaticallyAdjustContentInsets={false} - onScroll={() => { console.log('onScroll!'); }} - scrollEventThrottle={200} - style={styles.scrollView}> - {THUMBS.map(createThumbRow)} - </ScrollView> - <TouchableOpacity - style={styles.button} - onPress={() => { _scrollView.scrollTo({y: 0}); }}> - <Text>Scroll to top</Text> - </TouchableOpacity> - </View> + <ScrollView + automaticallyAdjustContentInsets={false} + onScroll={() => { console.log('onScroll!'); }} + scrollEventThrottle={200} + style={styles.scrollView}> + {THUMBS.map(createThumbRow)} + </ScrollView> ); } }, { title: '<ScrollView> (horizontal = true)', description: 'You can display <ScrollView>\'s child components horizontally rather than vertically', render: function() { - var _scrollView: ScrollView; return ( - <View> - <ScrollView - ref={(scrollView) => { _scrollView = scrollView; }} - automaticallyAdjustContentInsets={false} - horizontal={true} - style={[styles.scrollView, styles.horizontalScrollView]}> - {THUMBS.map(createThumbRow)} - </ScrollView> - <TouchableOpacity - style={styles.button} - onPress={() => { _scrollView.scrollTo({x: 0}); }}> - <Text>Scroll to start</Text> - </TouchableOpacity> - </View> + <ScrollView + automaticallyAdjustContentInsets={false} + horizontal={true} + style={[styles.scrollView, styles.horizontalScrollView]}> + {THUMBS.map(createThumbRow)} + </ScrollView> ); } }]; diff --git a/docs/segmentedcontrolios.html b/docs/segmentedcontrolios.html index c981e6f76d4..2a788a68169 100644 --- a/docs/segmentedcontrolios.html +++ b/docs/segmentedcontrolios.html @@ -1,8 +1,8 @@ -SegmentedControlIOS – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    SegmentedControlIOS #

    		Edit on GitHub

    Use SegmentedControlIOS to render a UISegmentedControl iOS.

    Props #

    View props... #

    enabled bool #

    If false the user won't be able to interact with the control. +SegmentedControlIOS – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    SegmentedControlIOS

    Use SegmentedControlIOS to render a UISegmentedControl iOS.

    Edit on GitHubProps #

    View props... #

    enabled bool #

    If false the user won't be able to interact with the control. Default value is true.

    momentary bool #

    If true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected.

    onChange function #

    Callback that is called when the user taps a segment; passes the event as an argument

    onValueChange function #

    Callback that is called when the user taps a segment; -passes the segment's value as an argument

    selectedIndex number #

    The index in props.values of the segment to be pre-selected

    tintColor string #

    Accent color of the control.

    values [string] #

    The labels for the control's segment buttons, in order.

    Examples #

    		Edit on GitHub
    'use strict'; +passes the segment's value as an argument

    selectedIndex number #

    The index in props.values of the segment to be pre-selected

    tintColor string #

    Accent color of the control.

    values [string] #

    The labels for the control's segment buttons, in order.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/signed-apk-android.html b/docs/signed-apk-android.html index 2580ddfed92..83a505553ca 100644 --- a/docs/signed-apk-android.html +++ b/docs/signed-apk-android.html @@ -1,4 +1,4 @@ -Generating Signed APK – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Generating Signed APK #

    		Edit on GitHub

    To distribute your Android application via Google Play store, you'll need to generate a signed release APK. The Signing Your Applications page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to packaging the JavaScript bundle.

    Generating a signing key #

    You can generate a private signing key using keytool.

    $ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

    This command prompts you for passwords for the keystore and key, and to provide the Distinguished Name fields for your key. It then generates the keystore as a file called my-release-key.keystore.

    The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later when signing your app, so remember to take note of the alias.

    Note: Remember to keep your keystore file private and never commit it to version control.

    Setting up gradle variables #

    1. Place the my-release-key.keystore file under the android/app directory in your project folder.
    2. Edit the file ~/.gradle/gradle.properties and add the following (replace ***** with the correct keystore password, alias and key password),
    MYAPP_RELEASE_STORE_FILE=my-release-key.keystore +Generating Signed APK – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Generating Signed APK

    To distribute your Android application via Google Play store, you'll need to generate a signed release APK. The Signing Your Applications page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to packaging the JavaScript bundle.

    Generating a signing key #

    You can generate a private signing key using keytool.

    $ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

    This command prompts you for passwords for the keystore and key, and to provide the Distinguished Name fields for your key. It then generates the keystore as a file called my-release-key.keystore.

    The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later when signing your app, so remember to take note of the alias.

    Note: Remember to keep your keystore file private and never commit it to version control.

    Setting up gradle variables #

    1. Place the my-release-key.keystore file under the android/app directory in your project folder.
    2. Edit the file ~/.gradle/gradle.properties and add the following (replace ***** with the correct keystore password, alias and key password),
    MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=*****

    These are going to be global gradle variables, which we can later use in our gradle config to sign our app.

    Note: Once you publish the app on the Play Store, you will need to republish your app under a different package name (loosing all downloads and ratings) if you want to change the signing key at any point. So backup your keystore and don't forget the passwords.

    Adding signing config to your app's gradle config #

    Edit the file android/app/build.gradle in your project folder and add the signing config,

    ... diff --git a/docs/sliderios.html b/docs/sliderios.html index 4b59808cf2d..ffb3b31d6e5 100644 --- a/docs/sliderios.html +++ b/docs/sliderios.html @@ -1,4 +1,4 @@ -SliderIOS – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    SliderIOS #

    		Edit on GitHub

    Props #

    View props... #

    disabled bool #

    If true the user won't be able to move the slider. +SliderIOS – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    SliderIOS

    Edit on GitHubProps #

    View props... #

    disabled bool #

    If true the user won't be able to move the slider. Default value is false.

    maximumTrackImage Image.propTypes.source #

    Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track.

    maximumTrackTintColor string #

    The color used for the track to the right of the button. Overrides the default blue gradient image.

    maximumValue number #

    Initial maximum value of the slider. Default value is 1.

    minimumTrackImage Image.propTypes.source #

    Assigns a minimum track image. Only static images are supported. The @@ -11,7 +11,7 @@ Default value is 0.

    value number #

    Initial value of the slider. The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0.

    This is not a controlled component, e.g. if you don't update -the value, the component won't be reset to its initial value.

    Examples #

    		Edit on GitHub
    'use strict'; +the value, the component won't be reset to its initial value.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { @@ -116,7 +116,7 @@ exports.examples ); } }, -];
    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    StatusBar #

    		Edit on GitHub

    Component to control the app status bar.

    Usage with Navigator #

    It is possible to have multiple StatusBar components mounted at the same -time. The props will be merged in the order the StatusBar components were -mounted. One use case is to specify status bar styles per route using Navigator.

    <View> - <StatusBar - backgroundColor="blue" - barStyle="light-content" - /> - <Navigator - initialRoute={{statusBarHidden: true}} - renderScene={(route, navigator) => - <View> - <StatusBar hidden={route.statusBarHidden} /> - ... - </View> - } - /> - </View>

    Props #

    animated bool #

    If the transition between status bar property changes should be animated. -Supported for backgroundColor, barStyle and hidden.

    hidden bool #

    If the status bar is hidden.

    androidbackgroundColor color #

    The background color of the status bar.

    androidtranslucent bool #

    If the status bar is translucent. -When translucent is set to true, the app will draw under the status bar. -This is useful when using a semi transparent status bar color.

    iosbarStyle enum('default', 'light-content') #

    Sets the color of the status bar text.

    iosnetworkActivityIndicatorVisible bool #

    If the network activity indicator should be visible.

    iosshowHideTransition enum('fade', 'slide') #

    The transition effect when showing and hiding the status bar using the hidden -prop. Defaults to 'fade'.

    Examples #

    		Edit on GitHub
    'use strict'; - -const React = require('react-native'); -const { - StyleSheet, - View, - Text, - TouchableHighlight, - StatusBar, -} = React; - -type BarStyle = 'default' | 'light-content'; -type ShowHideTransition = 'fade' | 'slide'; - -type State = { - animated: boolean, - backgroundColor: string, - hidden?: boolean, - showHideTransition: ShowHideTransition, - translucent?: boolean, - barStyle?: BarStyle, - networkActivityIndicatorVisible?: boolean -}; - -exports.framework = 'React'; -exports.title = '<StatusBar>'; -exports.description = 'Component for controlling the status bar'; - -const colors = [ - '#ff0000', - '#00ff00', - '#0000ff', -]; - -const barStyles = [ - 'default', - 'light-content', -]; - -const showHideTransitions = [ - 'fade', - 'slide', -]; - -const StatusBarExample = React.createClass({ - getInitialState(): State { - return { - animated: true, - backgroundColor: this._getValue(colors, 0), - showHideTransition: this._getValue(showHideTransitions, 0), - }; - }, - - _colorIndex: 0, - _barStyleIndex: 0, - _showHideTransitionIndex: 0, - - _getValue(values: Array<any>, index: number): any { - return values[index % values.length]; - }, - - render() { - return ( - <View> - <StatusBar - backgroundColor={this.state.backgroundColor} - translucent={this.state.translucent} - hidden={this.state.hidden} - showHideTransition={this.state.showHideTransition} - animated={this.state.animated} - barStyle={this.state.barStyle} - networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible} - /> - <View> - <TouchableHighlight - style={styles.wrapper} - onPress={() => this.setState({animated: !this.state.animated})}> - <View style={styles.button}> - <Text>animated: {this.state.animated ? 'true' : 'false'}</Text> - </View> - </TouchableHighlight> - </View> - <View> - <TouchableHighlight - style={styles.wrapper} - onPress={() => this.setState({hidden: !this.state.hidden})}> - <View style={styles.button}> - <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text> - </View> - </TouchableHighlight> - </View> - <Text style={styles.title}>iOS</Text> - <View> - <TouchableHighlight - style={styles.wrapper} - onPress={() => { - this._barStyleIndex++; - this.setState({barStyle: this._getValue(barStyles, this._barStyleIndex)}); - }}> - <View style={styles.button}> - <Text>style: '{this._getValue(barStyles, this._barStyleIndex)}'</Text> - </View> - </TouchableHighlight> - </View> - <View> - <TouchableHighlight - style={styles.wrapper} - onPress={() => this.setState({ - networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible, - })}> - <View style={styles.button}> - <Text> - networkActivityIndicatorVisible: - {this.state.networkActivityIndicatorVisible ? 'true' : 'false'} - </Text> - </View> - </TouchableHighlight> - </View> - <View> - <TouchableHighlight - style={styles.wrapper} - onPress={() => { - this._showHideTransitionIndex++; - this.setState({ - showHideTransition: - this._getValue(showHideTransitions, this._showHideTransitionIndex), - }); - }}> - <View style={styles.button}> - <Text> - showHideTransition: - '{this._getValue(showHideTransitions, this._showHideTransitionIndex)}' - </Text> - </View> - </TouchableHighlight> - </View> - <Text style={styles.title}>Android</Text> - <View> - <TouchableHighlight - style={styles.wrapper} - onPress={() => { - this._colorIndex++; - this.setState({backgroundColor: this._getValue(colors, this._colorIndex)}); - }}> - <View style={styles.button}> - <Text>backgroundColor: '{this._getValue(colors, this._colorIndex)}'</Text> - </View> - </TouchableHighlight> - </View> - <View> - <TouchableHighlight - style={styles.wrapper} - onPress={() => { - this.setState({ - translucent: !this.state.translucent, - backgroundColor: !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black', - }); - }}> - <View style={styles.button}> - <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text> - </View> - </TouchableHighlight> - </View> - </View> - ); - }, -}); - -exports.examples = [{ - title: 'Status Bar', - render() { - return <StatusBarExample />; - }, -}]; - -var styles = StyleSheet.create({ - wrapper: { - borderRadius: 5, - marginBottom: 5, - }, - button: { - borderRadius: 5, - backgroundColor: '#eeeeee', - padding: 10, - }, - title: { - marginTop: 16, - marginBottom: 8, - fontWeight: 'bold', - } -});
    Next →
    © 2015 Facebook Inc.
    \ No newline at end of file diff --git a/docs/statusbarios.html b/docs/statusbarios.html index 908b82ba469..808a2fd53ec 100644 --- a/docs/statusbarios.html +++ b/docs/statusbarios.html @@ -1,4 +1,4 @@ -StatusBarIOS – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    StatusBarIOS #

    		Edit on GitHub

    Methods #

    static setStyle(style: StatusBarStyle, animated?: boolean) #

    static setHidden(hidden: boolean, animation?: StatusBarAnimation) #

    static setNetworkActivityIndicatorVisible(visible: boolean) #

    Examples #

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

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    StatusBarIOS

    Methods #

    static setStyle(style: StatusBarStyle, animated?: boolean) #

    static setHidden(hidden: boolean, animation?: StatusBarAnimation) #

    static setNetworkActivityIndicatorVisible(visible: boolean) #

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/style.html b/docs/style.html index 41347fb1df7..8a308b62759 100644 --- a/docs/style.html +++ b/docs/style.html @@ -1,4 +1,4 @@ -Style – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Style #

    		Edit on GitHub

    React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it.

    +Style – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Style

    React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it.

    Declare Styles #

    The way to declare styles in React Native is the following:

    var styles = StyleSheet.create({ base: { diff --git a/docs/stylesheet.html b/docs/stylesheet.html index e812e2a9531..df147174f34 100644 --- a/docs/stylesheet.html +++ b/docs/stylesheet.html @@ -1,4 +1,4 @@ -StyleSheet – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    StyleSheet #

    		Edit on GitHub

    A StyleSheet is an abstraction similar to CSS StyleSheets

    Create a new StyleSheet:

    var styles = StyleSheet.create({ +StyleSheet – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    StyleSheet

    A StyleSheet is an abstraction similar to CSS StyleSheets

    Create a new StyleSheet:

    var styles = StyleSheet.create({ container: { borderRadius: 4, borderWidth: 0.5, diff --git a/docs/switch.html b/docs/switch.html index d23ba05ab07..60e60b640b9 100644 --- a/docs/switch.html +++ b/docs/switch.html @@ -1,6 +1,6 @@ -Switch – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Switch #

    		Edit on GitHub

    Universal two-state toggle component.

    Props #

    View props... #

    disabled bool #

    If true the user won't be able to toggle the switch. +Switch – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Switch

    Universal two-state toggle component.

    Edit on GitHubProps #

    View props... #

    disabled bool #

    If true the user won't be able to toggle the switch. Default value is false.

    onValueChange function #

    Invoked with the new value when the value changes.

    testID string #

    Used to locate this view in end-to-end tests.

    value bool #

    The value of the switch. If true the switch will be turned on. -Default value is false.

    iosonTintColor color #

    Background color when the switch is turned on.

    iosthumbTintColor color #

    Color of the foreground switch grip.

    iostintColor color #

    Background color when the switch is turned off.

    Examples #

    		Edit on GitHub
    'use strict'; +Default value is false.

    iosonTintColor ColorPropType #

    Background color when the switch is turned on.

    iosthumbTintColor ColorPropType #

    Color of the foreground switch grip.

    iostintColor ColorPropType #

    Background color when the switch is turned off.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/tabbarios-item.html b/docs/tabbarios-item.html index 0a743ea9a1c..717c4932495 100644 --- a/docs/tabbarios-item.html +++ b/docs/tabbarios-item.html @@ -1,4 +1,4 @@ -TabBarIOS.Item – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TabBarIOS.Item #

    		Edit on GitHub

    Props #

    View props... #

    badge string, number #

    Little red bubble that sits at the top right of the icon.

    icon Image.propTypes.source #

    A custom icon for the tab. It is ignored when a system icon is defined.

    onPress function #

    Callback when this tab is being selected, you should change the state of your +TabBarIOS.Item – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TabBarIOS.Item

    Edit on GitHubProps #

    View props... #

    badge string, number #

    Little red bubble that sits at the top right of the icon.

    icon Image.propTypes.source #

    A custom icon for the tab. It is ignored when a system icon is defined.

    onPress function #

    Callback when this tab is being selected, you should change the state of your component to set selected={true}.

    selected bool #

    It specifies whether the children are visible or not. If you see a blank content, you probably forgot to add a selected one.

    selectedIcon Image.propTypes.source #

    A custom icon when the tab is selected. It is ignored when a system icon is defined. If left empty, the icon will be tinted in blue.

    style View#style #

    React style object.

    systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') #

    Items comes with a few predefined system icons. Note that if you are diff --git a/docs/tabbarios.html b/docs/tabbarios.html index 3a03be96abd..0a911492afd 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -1,4 +1,4 @@ -TabBarIOS – React Native | A framework for building native apps using React

    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TabBarIOS #

    		Edit on GitHub

    Props #

    View props... #

    barTintColor color #

    Background color of the tab bar

    style View#style #

    tintColor color #

    Color of the currently selected tab icon

    translucent bool #

    A Boolean value that indicates whether the tab bar is translucent

    Examples #

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

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TabBarIOS

    Edit on GitHubProps #

    View props... #

    barTintColor ColorPropType #

    Background color of the tab bar

    style View#style #

    tintColor ColorPropType #

    Color of the currently selected tab icon

    translucent bool #

    A Boolean value that indicates whether the tab bar is translucent

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/testing.html b/docs/testing.html index a7da087295b..8af2b7c266a 100644 --- a/docs/testing.html +++ b/docs/testing.html @@ -1,4 +1,4 @@ -Testing – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Testing #

    		Edit on GitHub

    Running Tests and Contributing #

    The React Native repo has several tests you can run to verify you haven't caused a regression with your PR. These tests are run with the Travis continuous integration system, and will automatically post the results to your PR.

    We don't have perfect test coverage of course, especially for complex end-to-end interactions with the user, so many changes will still require significant manual verification, but we would love it if you want to help us increase our test coverage and add more tests and test cases!

    Jest Tests #

    Jest tests are JS-only tests run on the command line with node. The tests themselves live in the __tests__ directories of the files they test, and there is a large emphasis on aggressively mocking out functionality that is not under test for failure isolation and maximum speed. You can run the existing React Native jest tests with

    npm test

    from the react-native root, and we encourage you to add your own tests for any components you want to contribute to. See getImageSource-test.js for a basic example.

    Note: In order to run your own tests, you will have to first follow the Getting Started instructions on the Jest page and then include the jest objects below in package.json so that the scripts are pre-processed before execution.

    ... +Testing – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Testing

    Running Tests and Contributing #

    The React Native repo has several tests you can run to verify you haven't caused a regression with your PR. These tests are run with the Travis continuous integration system, and will automatically post the results to your PR.

    We don't have perfect test coverage of course, especially for complex end-to-end interactions with the user, so many changes will still require significant manual verification, but we would love it if you want to help us increase our test coverage and add more tests and test cases!

    Jest Tests #

    Jest tests are JS-only tests run on the command line with node. The tests themselves live in the __tests__ directories of the files they test, and there is a large emphasis on aggressively mocking out functionality that is not under test for failure isolation and maximum speed. You can run the existing React Native jest tests with

    npm test

    from the react-native root, and we encourage you to add your own tests for any components you want to contribute to. See getImageSource-test.js for a basic example.

    Note: In order to run your own tests, you will have to first follow the Getting Started instructions on the Jest page and then include the jest objects below in package.json so that the scripts are pre-processed before execution.

    ... "scripts": { ... "test": "jest" diff --git a/docs/text.html b/docs/text.html index 6e8bac0feff..11bdcbc868f 100644 --- a/docs/text.html +++ b/docs/text.html @@ -1,4 +1,4 @@ -Text – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Text #

    		Edit on GitHub

    A React component for displaying text which supports nesting, +Text – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Text

    A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the fontFamily from styles.baseText, but the title provides its own additional styles. The title and body will stack on top of @@ -23,12 +23,10 @@ each other on account of the literal newlines:

    : 20, fontWeight: 'bold', }, -};

    Props #

    accessible #

    numberOfLines number #

    Used to truncate the text with an ellipsis after computing the text +};

    Edit on GitHubProps #

    accessible #

    allowFontScaling bool #

    Specifies should fonts scale to respect Text Size accessibility setting on iOS.

    numberOfLines number #

    Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines -does not exceed this number.

    onLayout function #

    Invoked on mount and layout changes with

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

    onPress function #

    This function is called on press.

    style style #

    View#style...
    color color
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

    Specifies font weight. The values 'normal' and 'bold' are supported for -most fonts. Not all fonts have a variant for each of the numeric values, -in that case the closest one is chosen.

    lineHeight number
    textAlign enum('auto', 'left', 'right', 'center', 'justify')

    Specifies text alignment. The value 'justify' is only supported on iOS.

    textShadowColor color
    textShadowOffset {width: number, height: number}
    textShadowRadius number
    androidtextAlignVertical enum('auto', 'top', 'bottom', 'center')
    iosletterSpacing number
    iostextDecorationColor color
    iostextDecorationLine enum('none', 'underline', 'line-through', 'underline line-through')
    iostextDecorationStyle enum('solid', 'double', 'dotted', 'dashed')
    ioswritingDirection enum('auto', 'ltr', 'rtl')

    testID string #

    Used to locate this view in end-to-end tests.

    iosallowFontScaling bool #

    Specifies should fonts scale to respect Text Size accessibility setting on iOS.

    iossuppressHighlighting bool #

    When true, no visual change is made when text is pressed down. By -default, a gray oval highlights the text on press down.

    Description #

    		Edit on GitHub

    Nested Text #

    In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.

    <Text style={{fontWeight: 'bold'}}> +does not exceed this number.

    onLayout function #

    Invoked on mount and layout changes with

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

    onPress function #

    This function is called on press.

    style style #

    View#style...
    color ColorPropType
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    textShadowOffset {width: number, height: number}
    textShadowRadius number
    textShadowColor ColorPropType
    letterSpacing number
    lineHeight number
    textAlign enum("auto", 'left', 'right', 'center', 'justify')
    textAlignVertical enum("auto", 'top', 'bottom', 'center')
    textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
    textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
    textDecorationColor ColorPropType
    writingDirection enum("auto", 'ltr', 'rtl')

    testID string #

    Used to locate this view in end-to-end tests.

    iossuppressHighlighting bool #

    When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down.

    Edit on GitHubDescription #

    Nested Text #

    In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.

    <Text style={{fontWeight: 'bold'}}> I am bold <Text style={{color: 'red'}}> and red diff --git a/docs/textinput.html b/docs/textinput.html index dbbfd43f44d..6ea6681beb7 100644 --- a/docs/textinput.html +++ b/docs/textinput.html @@ -1,4 +1,4 @@ -TextInput – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TextInput #

    		Edit on GitHub

    A foundational component for inputting text into the app via a +TextInput – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TextInput

    A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

    The simplest use case is to plop down a TextInput and subscribe to the @@ -8,10 +8,10 @@ example:

    <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({text})} value={this.state.text} - />

    Note that some props are only available with multiline={true/false}:

    Props #

    View props... #

    autoCapitalize enum('none', 'sentences', 'words', 'characters') #

    Can tell TextInput to automatically capitalize certain characters.

    • characters: all characters,
    • words: first letter of each word
    • sentences: first letter of each sentence (default)
    • none: don't auto capitalize anything

    autoCorrect bool #

    If false, disables auto-correct. The default value is true.

    autoFocus bool #

    If true, focuses the input on componentDidMount. + />

    Note that some props are only available with multiline={true/false}:

    Edit on GitHubProps #

    View props... #

    autoCapitalize enum('none', 'sentences', 'words', 'characters') #

    Can tell TextInput to automatically capitalize certain characters.

    • characters: all characters,
    • words: first letter of each word
    • sentences: first letter of each sentence (default)
    • none: don't auto capitalize anything

    autoCorrect bool #

    If false, disables auto-correct. The default value is true.

    autoFocus bool #

    If true, focuses the input on componentDidMount. The default value is false.

    defaultValue string #

    Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you don't want to deal with listening -to events and updating the value prop to keep the controlled state in sync.

    editable bool #

    If false, text is not editable. The default value is true.

    keyboardType enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') #

    Determines which keyboard to open, e.g.numeric.

    The following values work across platforms: +to events and updating the value prop to keep the controlled state in sync.

    editable bool #

    If false, text is not editable. The default value is true.

    keyboardType enum("default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') #

    Determines which keyboard to open, e.g.numeric.

    The following values work across platforms: - default - numeric - email-address

    maxLength number #

    Limits the maximum number of characters that can be entered. Use this @@ -19,22 +19,22 @@ instead of implementing the logic in JS to avoid flicker.

    onBlur function #

    Callback that is called when the text input is blurred

    onChange function #

    Callback that is called when the text input's text changes.

    onChangeText function #

    Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

    onEndEditing function #

    Callback that is called when text input ends.

    onFocus function #

    Callback that is called when the text input is focused

    onLayout function #

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

    onSelectionChange function #

    Callback that is called when the text input selection is changed

    onSubmitEditing function #

    Callback that is called when the text input's submit button is pressed. Invalid if multiline={true} is specified.

    placeholder string #

    The string that will be rendered before text input has been entered

    placeholderTextColor string #

    The text color of the placeholder string

    secureTextEntry bool #

    If true, the text input obscures the text entered so that sensitive text -like passwords stay secure. The default value is false.

    selectionColor string #

    The highlight (and cursor on ios) color of the text input

    style Text#style #

    Styles

    value string #

    The value to show for the text input. TextInput is a controlled +like passwords stay secure. The default value is false.

    style Text#style #

    Styles

    testID string #

    Used to locate this view in end-to-end tests

    value string #

    The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent -unwanted edits without flicker.

    androidnumberOfLines number #

    Sets the number of lines for a TextInput. Use it with multiline set to -true to be able to fill the lines.

    androidunderlineColorAndroid string #

    The color of the textInput underline.

    iosblurOnSubmit bool #

    If true, the text field will blur when submitted. +unwanted edits without flicker.

    iosblurOnSubmit bool #

    If true, the text field will blur when submitted. The default value is true for single-line fields and false for multiline fields. Note that for multiline fields, setting blurOnSubmit to true means that pressing return will blur the field and trigger the onSubmitEditing event instead of inserting a newline into the field.

    iosclearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') #

    When the clear button should appear on the right side of the text view

    iosclearTextOnFocus bool #

    If true, clears the text field automatically when editing begins

    iosenablesReturnKeyAutomatically bool #

    If true, the keyboard disables the return key when there is no text and -automatically enables it when there is text. The default value is false.

    ioskeyboardAppearance enum('default', 'light', 'dark') #

    Determines the color of the keyboard.

    iosonKeyPress function #

    Callback that is called when a key is pressed. +automatically enables it when there is text. The default value is false.

    ioskeyboardAppearance enum('default', 'light', 'dark') #

    Determines the color of the keyboard.

    androidnumberOfLines number #

    Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines.

    iosonKeyPress function #

    Callback that is called when a key is pressed. Pressed key value is passed as an argument to the callback handler. Fires before onChange callbacks.

    iosreturnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') #

    Determines how the return key should look.

    iosselectTextOnFocus bool #

    If true, all text will automatically be selected on focus

    iosselectionState DocumentSelectionState #

    See DocumentSelectionState.js, some state that is responsible for -maintaining selection information for a document

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Timers #

    		Edit on GitHub

    Timers are an important part of an application and React Native implements the browser timers.

    Timers #

    • setTimeout, clearTimeout
    • setInterval, clearInterval
    • setImmediate, clearImmediate
    • requestAnimationFrame, cancelAnimationFrame

    requestAnimationFrame(fn) is not the same as setTimeout(fn, 0) - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).

    setImmediate is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call setImmediate within a setImmediate callback, it will be executed right away, it won't yield back to native in between.

    The Promise implementation uses setImmediate as its asynchronicity primitive.

    InteractionManager #

    One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions/animations have completed.

    Applications can schedule tasks to run after interactions with the following:

    InteractionManager.runAfterInteractions(() => { +Timers – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Timers

    Timers are an important part of an application and React Native implements the browser timers.

    Timers #

    • setTimeout, clearTimeout
    • setInterval, clearInterval
    • setImmediate, clearImmediate
    • requestAnimationFrame, cancelAnimationFrame

    requestAnimationFrame(fn) is not the same as setTimeout(fn, 0) - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).

    setImmediate is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call setImmediate within a setImmediate callback, it will be executed right away, it won't yield back to native in between.

    The Promise implementation uses setImmediate as its asynchronicity primitive.

    InteractionManager #

    One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions/animations have completed.

    Applications can schedule tasks to run after interactions with the following:

    InteractionManager.runAfterInteractions(() => { // ...long-running synchronous task... });

    Compare this to other scheduling alternatives:

    • requestAnimationFrame(): for code that animates a view over time.
    • setImmediate/setTimeout/setInterval(): run code later, note this may delay animations.
    • runAfterInteractions(): run code later, without delaying active animations.

    The touch handling system considers one or more active touches to be an 'interaction' and will delay runAfterInteractions() callbacks until all touches have ended or been cancelled.

    InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:

    var handle = InteractionManager.createInteractionHandle(); // run animation... (`runAfterInteractions` tasks are queued) @@ -14,7 +14,7 @@ 500 ); } -});

    We strongly discourage using the global setTimeout(...) and recommend instead that you use this.setTimeout(...) provided by react-timer-mixin. This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ToastAndroid #

    		Edit on GitHub

    This exposes the native ToastAndroid module as a JS module. This has a function 'show' -which takes the following parameters:

    1. String message: A string with the text to toast
    2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG

    Methods #

    static show(message: string, duration: number) #

    Properties #

    SHORT: MemberExpression #

    LONG: MemberExpression #

    Examples #

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

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ToastAndroid

    This exposes the native ToastAndroid module as a JS module. This has a function 'show' +which takes the following parameters:

    1. String message: A string with the text to toast
    2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG

    Methods #

    static show(message: string, duration: number) #

    Properties #

    SHORT: MemberExpression #

    LONG: MemberExpression #

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/toolbarandroid.html b/docs/toolbarandroid.html index 900ca54997c..93472738870 100644 --- a/docs/toolbarandroid.html +++ b/docs/toolbarandroid.html @@ -1,4 +1,4 @@ -ToolbarAndroid – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ToolbarAndroid #

    		Edit on GitHub

    React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, +ToolbarAndroid – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ToolbarAndroid

    React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.

    If the toolbar has an only child, it will be displayed between the title and actions.

    Although the Toolbar supports remote images for the logo, navigation and action icons, this @@ -18,7 +18,7 @@ onActionSelected: if (position === 0) { // index of 'Settings' showSettings(); } -}

    Props #

    View props... #

    actions [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}] #

    Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +}

    Edit on GitHubProps #

    View props... #

    actions [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}] #

    Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu.

    This property takes an array of objects, where each object has the following keys:

    • title: required, the title of this action
    • icon: the icon for this action, e.g. require('./some_icon.png')
    • show: when to show this action as an icon or hide it in the overflow menu: always, ifRoom or never
    • showWithText: boolean, whether to show text alongside the icon or not

    contentInsetEnd number #

    Sets the content inset for the toolbar ending edge.

    The content inset affects the valid area for Toolbar content other than @@ -31,7 +31,7 @@ along well-known gridlines.

    onIconClicked function #

    Callback called when the icon is selected.

    overflowIcon optionalImageSource #

    Sets the overflow icon.

    rtl bool #

    Used to set the toolbar direction to RTL. In addition to this property you need to add

    android:supportsRtl="true"

    to your application AndroidManifest.xml and then call setLayoutDirection(LayoutDirection.RTL) in your MainActivity -onCreate method.

    subtitle string #

    Sets the toolbar subtitle.

    subtitleColor color #

    Sets the toolbar subtitle color.

    testID string #

    Used to locate this view in end-to-end tests.

    title string #

    Sets the toolbar title.

    titleColor color #

    Sets the toolbar title color.

    Examples #

    		Edit on GitHub
    'use strict'; +onCreate method.

    subtitle string #

    Sets the toolbar subtitle.

    subtitleColor ColorPropType #

    Sets the toolbar subtitle color.

    testID string #

    Used to locate this view in end-to-end tests.

    title string #

    Sets the toolbar title.

    titleColor ColorPropType #

    Sets the toolbar title color.

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index 5788e31cbf0..9e73c1eeb52 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -1,4 +1,4 @@ -TouchableHighlight – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableHighlight #

    		Edit on GitHub

    A wrapper for making views respond properly to touches. +TouchableHighlight – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableHighlight

    A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view. The underlay comes from adding a view to the view hierarchy, which can sometimes @@ -12,8 +12,8 @@ backgroundColor of the wrapped view isn't explicitly set to an opaque color /> </TouchableHighlight> ); -},

    NOTE: TouchableHighlight supports only one child

    If you wish to have several child components, wrap them in a View.

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is -active.

    onHideUnderlay function #

    Called immediately after the underlay is hidden

    onShowUnderlay function #

    Called immediately after the underlay is shown

    style View#style #

    underlayColor color #

    The color of the underlay that will show through when the touch is +},

    NOTE: TouchableHighlight supports only one child

    If you wish to have several child components, wrap them in a View.

    Edit on GitHubProps #

    TouchableWithoutFeedback props... #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is +active.

    onHideUnderlay function #

    Called immediately after the underlay is hidden

    onShowUnderlay function #

    Called immediately after the underlay is shown

    style View#style #

    underlayColor ColorPropType #

    The color of the underlay that will show through when the touch is active.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableNativeFeedback #

    		Edit on GitHub

    A wrapper for making views respond properly to touches (Android only). +TouchableNativeFeedback – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableNativeFeedback

    A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch feedback. At the moment it only supports having a single View instance as a child node, as it's implemented by replacing that View with another instance @@ -13,7 +13,7 @@ of RCTView node with some additional properties set.

    Background drawable o </View> </TouchableNativeFeedback> ); -},

    Props #

    TouchableWithoutFeedback props... #

    background backgroundPropType #

    Determines the type of background drawable that's going to be used to +},

    Edit on GitHubProps #

    TouchableWithoutFeedback props... #

    background backgroundPropType #

    Determines the type of background drawable that's going to be used to display feedback. It takes an object with type property and extra data depending on the type. It's recommended to use one of the following static methods to generate that dictionary:

    1) TouchableNativeFeedback.SelectableBackground() - will create object diff --git a/docs/touchableopacity.html b/docs/touchableopacity.html index 2a0ac6675f1..d5bb43a33b2 100644 --- a/docs/touchableopacity.html +++ b/docs/touchableopacity.html @@ -1,4 +1,4 @@ -TouchableOpacity – React Native | A framework for building native apps using React

    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableOpacity #

    		Edit on GitHub

    A wrapper for making views respond properly to touches. +TouchableOpacity – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableOpacity

    A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.

    Example:

    renderButton: function() { @@ -10,7 +10,7 @@ easy to add to an app without weird side-effects.

    Example:

    /> </TouchableOpacity> ); -},

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is +},

    Edit on GitHubProps #

    TouchableWithoutFeedback props... #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is active.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableWithoutFeedback #

    		Edit on GitHub

    Do not use unless you have a very good reason. All the elements that +TouchableWithoutFeedback – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableWithoutFeedback

    Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is -one of the primary reason a "web" app doesn't feel "native".

    NOTE: TouchableWithoutFeedback supports only one child

    If you wish to have several child components, wrap them in a View.

    Props #

    accessibilityComponentType View.AccessibilityComponentType #

    accessibilityTraits View.AccessibilityTraits, [View.AccessibilityTraits] #

    accessible bool #

    delayLongPress number #

    Delay in ms, from onPressIn, before onLongPress is called.

    delayPressIn number #

    Delay in ms, from the start of the touch, before onPressIn is called.

    delayPressOut number #

    Delay in ms, from the release of the touch, before onPressOut is called.

    onLayout function #

    Invoked on mount and layout changes with

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

    onLongPress function #

    onPress function #

    Called when the touch is released, but not if cancelled (e.g. by a scroll +one of the primary reason a "web" app doesn't feel "native".

    NOTE: TouchableWithoutFeedback supports only one child

    If you wish to have several child components, wrap them in a View.

    Edit on GitHubProps #

    accessibilityComponentType View.AccessibilityComponentType #

    accessibilityTraits View.AccessibilityTraits, [View.AccessibilityTraits] #

    accessible bool #

    delayLongPress number #

    Delay in ms, from onPressIn, before onLongPress is called.

    delayPressIn number #

    Delay in ms, from the start of the touch, before onPressIn is called.

    delayPressOut number #

    Delay in ms, from the release of the touch, before onPressOut is called.

    onLayout function #

    Invoked on mount and layout changes with

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

    onLongPress function #

    onPress function #

    Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).

    onPressIn function #

    onPressOut function #

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

    When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again diff --git a/docs/transforms.html b/docs/transforms.html index 02ab7bd0111..339aee0c575 100644 --- a/docs/transforms.html +++ b/docs/transforms.html @@ -1,4 +1,4 @@ -Transforms – React Native | A framework for building native apps using React

    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Transforms #

    		Edit on GitHub

    Props #

    transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] #

    transformMatrix TransformMatrixPropType #

    Next →
    © 2015 Facebook Inc.
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Transforms

    Edit on GitHubProps #

    transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}] #

    transformMatrix TransformMatrixPropType #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Troubleshooting #

    		Edit on GitHub

    Cmd-R does not reload the simulator #

    Enable iOS simulator's "Connect hardware keyboard" from menu Hardware > Keyboard menu.

    Keyboard Menu

    If you are using a non-QWERTY/AZERTY keyboard layout you can use the Hardware > Shake Gesture to bring up the dev menu and click "Refresh"

    Port already in use red-screen #

    red-screen

    Something is probably already running on port 8081. You can either kill it or try to change which port the packager is listening to.

    Kill process on port 8081 #

    $ sudo lsof -n -i4TCP:8081 | grep LISTEN

    then

    $ kill -9 <cma process id>

    Change the port in Xcode #

    Edit AppDelegate.m to use a different port.

    // OPTION 1 +Troubleshooting – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Troubleshooting

    Cmd-R does not reload the simulator #

    Enable iOS simulator's "Connect hardware keyboard" from menu Hardware > Keyboard menu.

    Keyboard Menu

    If you are using a non-QWERTY/AZERTY keyboard layout you can use the Hardware > Shake Gesture to bring up the dev menu and click "Refresh"

    Port already in use red-screen #

    red-screen

    Something is probably already running on port 8081. You can either kill it or try to change which port the packager is listening to.

    Kill process on port 8081 #

    $ sudo lsof -n -i4TCP:8081 | grep LISTEN

    then

    $ kill -9 <cma process id>

    Change the port in Xcode #

    Edit AppDelegate.m to use a different port.

    // OPTION 1 // Load from development server. Start the server from the repository root: // // $ npm start diff --git a/docs/tutorial.html b/docs/tutorial.html index cbb8e1f8f2b..517532e0ff1 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -1,13 +1,12 @@ -Tutorial – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Tutorial #

    		Edit on GitHub

    Preface #

    This tutorial aims to get you up to speed with writing iOS and Android apps using React Native. If you're wondering what React Native is and why Facebook built it, this blog post explains that.

    We assume you have experience writing applications with React. If not, you can learn about it on the React website.

    Setup #

    React Native requires the basic setup explained at React Native Getting Started.

    After installing these dependencies there are two simple commands to get a React Native project all set up for development.

    1. npm install -g react-native-cli

      react-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install react-native as a command in your terminal. You only ever need to do this once.

    2. react-native init AwesomeProject

      This command fetches the React Native source code and dependencies and then creates a new Xcode project in AwesomeProject/iOS/AwesomeProject.xcodeproj and a gradle project in AwesomeProject/android/app.

    Development #

    For iOS, you can now open this new project (AwesomeProject/ios/AwesomeProject.xcodeproj) in Xcode and simply build and run it with ⌘+R. Doing so will also start a Node server which enables live code reloading. With this you can see your changes by pressing ⌘+R in the simulator rather than recompiling in Xcode.

    For Android, run react-native run-android from AwesomeProject to install the generated app on your emulator or device, and start the Node server which enables live code reloading. To see your changes you have to open the rage-shake-menu (either shake the device or press the menu button on devices, press F2 or Page Up for emulator, ⌘+M for Genymotion), and then press Reload JS.

    For this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.

    Hello World #

    react-native init will generate an app with the name of your project, in this case AwesomeProject. This is a simple hello world app. For iOS, you can edit index.ios.js to make changes to the app and then press ⌘+R in the simulator to see the changes. For Android, you can edit index.android.js to make changes to the app and press Reload JS from the rage shake menu to see the changes.

    Mocking data #

    Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the imports, but feel free to add the following constant wherever you like. In index.ios.js or index.android.js :

    var MOCKED_MOVIES_DATA = [ +Tutorial – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Tutorial

    Preface #

    This tutorial aims to get you up to speed with writing iOS and Android apps using React Native. If you're wondering what React Native is and why Facebook built it, this blog post explains that.

    We assume you have experience writing applications with React. If not, you can learn about it on the React website.

    Setup #

    React Native requires the basic setup explained at React Native Getting Started.

    After installing these dependencies there are two simple commands to get a React Native project all set up for development.

    1. npm install -g react-native-cli

      react-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install react-native as a command in your terminal. You only ever need to do this once.

    2. react-native init AwesomeProject

      This command fetches the React Native source code and dependencies and then creates a new Xcode project in AwesomeProject/iOS/AwesomeProject.xcodeproj and a gradle project in AwesomeProject/android/app.

    Development #

    For iOS, you can now open this new project (AwesomeProject/ios/AwesomeProject.xcodeproj) in Xcode and simply build and run it with ⌘+R. Doing so will also start a Node server which enables live code reloading. With this you can see your changes by pressing ⌘+R in the simulator rather than recompiling in Xcode.

    For Android, run react-native run-android from AwesomeProject to install the generated app on your emulator or device, and start the Node server which enables live code reloading. To see your changes you have to open the rage-shake-menu (either shake the device or press the menu button on devices, press F2 or Page Up for emulator, ⌘+M for Genymotion), and then press Reload JS.

    For this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.

    Hello World #

    react-native init will generate an app with the name of your project, in this case AwesomeProject. This is a simple hello world app. For iOS, you can edit index.ios.js to make changes to the app and then press ⌘+R in the simulator to see the changes. For Android, you can edit index.android.js to make changes to the app and press Reload JS from the rage shake menu to see the changes.

    Mocking data #

    Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the requires, but feel free to add the following constant wherever you like. In index.ios.js or index.android.js :

    var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, -];

    Render a movie #

    We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React imports below.

    import React, { +];

    Render a movie #

    We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React requires below.

    var { AppRegistry, - Component, Image, StyleSheet, Text, View, -} from 'react-native';

    Now change the render function so that we're rendering the data mentioned above rather than hello world.

    render() { +} = React;

    Now change the render function so that we're rendering the data mentioned above rather than hello world.

    render: function() { var movie = MOCKED_MOVIES_DATA[0]; return ( <View style={styles.container}> @@ -73,18 +72,17 @@
    -

    Fetching real data #

    Fetching data from Rotten Tomatoes's API isn't really relevant to learning React Native so feel free to breeze through this section.

    Add the following constants to the top of the file (typically below the imports) to create the REQUEST_URL used to request data with.

    /** +

    Fetching real data #

    Fetching data from Rotten Tomatoes's API isn't really relevant to learning React Native so feel free to breeze through this section.

    Add the following constants to the top of the file (typically below the requires) to create the REQUEST_URL used to request data with.

    /** * For quota reasons we replaced the Rotten Tomatoes' API with a sample data of * their very own API that lives in React Native's Github repo. */ -var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

    Add some initial state to our application so that we can check this.state.movies === null to determine whether the movies data has been loaded or not. We can set this data when the response comes back with this.setState({movies: moviesData}). Add this code just above the render function inside our React class.

    constructor(props) { - super(props); - this.state = { +var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

    Add some initial state to our application so that we can check this.state.movies === null to determine whether the movies data has been loaded or not. We can set this data when the response comes back with this.setState({movies: moviesData}). Add this code just above the render function inside our React class.

    getInitialState: function() { + return { movies: null, }; - }

    We want to send off the request after the component has finished loading. componentDidMount is a function of React components that React will call exactly once, just after the component has been loaded.

    componentDidMount() { + },

    We want to send off the request after the component has finished loading. componentDidMount is a function of React components that React will call exactly once, just after the component has been loaded.

    componentDidMount: function() { this.fetchData(); - }

    Now add fetchData function used above to our main component. This method will be responsible for handling data fetching. All you need to do is call this.setState({movies: data}) after resolving the promise chain because the way React works is that setState actually triggers a re-render and then the render function will notice that this.state.movies is no longer null. Note that we call done() at the end of the promise chain - always make sure to call done() or any errors thrown will get swallowed.

    fetchData() { + },

    Now add fetchData function used above to our main component. This method will be responsible for handling data fetching. All you need to do is call this.setState({movies: data}) after resolving the promise chain because the way React works is that setState actually triggers a re-render and then the render function will notice that this.state.movies is no longer null. Note that we call done() at the end of the promise chain - always make sure to call done() or any errors thrown will get swallowed.

    fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { @@ -93,16 +91,16 @@ }); }) .done(); - }

    Now modify the render function to render a loading view if we don't have any movies data, and to render the first movie otherwise.

    render() { + },

    Now modify the render function to render a loading view if we don't have any movies data, and to render the first movie otherwise.

    render: function() { if (!this.state.movies) { return this.renderLoadingView(); } var movie = this.state.movies[0]; return this.renderMovie(movie); - } + }, - renderLoadingView() { + renderLoadingView: function() { return ( <View style={styles.container}> <Text> @@ -110,9 +108,9 @@ </Text> </View> ); - } + }, - renderMovie(movie) { + renderMovie: function(movie) { return ( <View style={styles.container}> <Image @@ -125,20 +123,19 @@ </View> </View> ); - }

    Now press ⌘+R / Reload JS and you should see "Loading movies..." until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes.

    + },

    Now press ⌘+R / Reload JS and you should see "Loading movies..." until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes.

    -

    ListView #

    Let's now modify this application to render all of this data in a ListView component, rather than just rendering the first movie.

    Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.

    First things first: add the ListView import to the top of the file.

    import React, { +

    ListView #

    Let's now modify this application to render all of this data in a ListView component, rather than just rendering the first movie.

    Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.

    First things first: add the ListView require to the top of the file.

    var { AppRegistry, - Component, Image, ListView, StyleSheet, Text, View, -} from 'react-native';

    Now modify the render function so that once we have our data it renders a ListView of movies instead of a single movie.

    render() { +} = React;

    Now modify the render function so that once we have our data it renders a ListView of movies instead of a single movie.

    render: function() { if (!this.state.loaded) { return this.renderLoadingView(); } @@ -150,15 +147,14 @@ style={styles.listView} /> ); - }

    The dataSource is an interface that ListView is using to determine which rows have changed over the course of updates.

    You'll notice we used dataSource from this.state. The next step is to add an empty dataSource to the object returned by constructor. Also, now that we're storing the data in dataSource, we should no longer use this.state.movies to avoid storing data twice. We can use boolean property of the state (this.state.loaded) to tell whether data fetching has finished.

    constructor(props) { - super(props); - this.state = { + },

    The dataSource is an interface that ListView is using to determine which rows have changed over the course of updates.

    You'll notice we used dataSource from this.state. The next step is to add an empty dataSource to the object returned by getInitialState. Also, now that we're storing the data in dataSource, we should no longer use this.state.movies to avoid storing data twice. We can use boolean property of the state (this.state.loaded) to tell whether data fetching has finished.

    getInitialState: function() { + return { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; - }

    And here is the modified fetchData method that updates the state accordingly:

    fetchData() { + },

    And here is the modified fetchData method that updates the state accordingly:

    fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { @@ -168,7 +164,7 @@ }); }) .done(); - }

    Finally, we add styles for the ListView component to the styles JS object:

    listView: { + },

    Finally, we add styles for the ListView component to the styles JS object:

    listView: { paddingTop: 20, backgroundColor: '#F5FCFF', },

    And here's the final result:

    @@ -180,16 +176,17 @@ * Sample React Native App * https://github.com/facebook/react-native */ +'use strict'; -import React, { +var React = require('react-native'); +var { AppRegistry, - Component, Image, ListView, StyleSheet, Text, View, -} from 'react-native'; +} = React; var API_KEY = '7waqfqbprs7pajbz28mqf6vz'; var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json'; @@ -197,22 +194,21 @@ import React, var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE; var REQUEST_URL = API_URL + PARAMS; -class AwesomeProject extends Component { - constructor(props) { - super(props); - this.state = { +var AwesomeProject = React.createClass({ + getInitialState: function() { + return { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; - } + }, - componentDidMount() { + componentDidMount: function() { this.fetchData(); - } + }, - fetchData() { + fetchData: function() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { @@ -222,9 +218,9 @@ class AwesomeProject extends }); }) .done(); - } + }, - render() { + render: function() { if (!this.state.loaded) { return this.renderLoadingView(); } @@ -236,9 +232,9 @@ class AwesomeProject extends ={styles.listView} /> ); - } + }, - renderLoadingView() { + renderLoadingView: function() { return ( <View style={styles.container}> <Text> @@ -246,9 +242,9 @@ class AwesomeProject extends /Text> </View> ); - } + }, - renderMovie(movie) { + renderMovie: function(movie) { return ( <View style={styles.container}> <Image @@ -261,8 +257,8 @@ class AwesomeProject extends /View> </View> ); - } -} + }, +}); var styles = StyleSheet.create({ container: { diff --git a/docs/upgrading.html b/docs/upgrading.html index 8967b0da515..34288cfd992 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -1,4 +1,4 @@ -Upgrading – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Upgrading #

    		Edit on GitHub

    Upgrading to new versions of React Native will give you access to more APIs, views, developer tools +Upgrading – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Upgrading

    Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Because React Native projects are essentially made up of an Android project, an iOS project and a JavaScript project, all combined under an npm package, upgrading can be rather tricky. But we try to make it easy for you. Here's what you need to do to upgrade from an older diff --git a/docs/vibrationios.html b/docs/vibrationios.html index d678552eee5..253decd4922 100644 --- a/docs/vibrationios.html +++ b/docs/vibrationios.html @@ -1,7 +1,7 @@ -VibrationIOS – React Native | A framework for building native apps using React

    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    VibrationIOS #

    		Edit on GitHub

    The Vibration API is exposed at VibrationIOS.vibrate(). On iOS, calling this +VibrationIOS – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    VibrationIOS

    The Vibration API is exposed at VibrationIOS.vibrate(). On iOS, calling this function will trigger a one second vibration. The vibration is asynchronous so this method will return immediately.

    There will be no effect on devices that do not support Vibration, eg. the iOS -simulator.

    Vibration patterns are currently unsupported.

    Methods #

    static vibrate() #

    Examples #

    		Edit on GitHub
    'use strict'; +simulator.

    Vibration patterns are currently unsupported.

    Methods #

    static vibrate() #

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { diff --git a/docs/videos.html b/docs/videos.html index b91717170eb..bcf1fef71ed 100644 --- a/docs/videos.html +++ b/docs/videos.html @@ -1,4 +1,4 @@ -Videos – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Videos #

    		Edit on GitHub
    +Videos – React Native | A framework for building native apps using React
    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Videos

    diff --git a/docs/view.html b/docs/view.html index 41c274c3b49..f48f536375f 100644 --- a/docs/view.html +++ b/docs/view.html @@ -1,4 +1,4 @@ -View – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    View #

    		Edit on GitHub

    The most fundamental component for building UI, View is a +View – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    View

    The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls, and is designed to be nested inside other views and to have 0 to many children of any type. View maps directly to the native @@ -9,7 +9,7 @@ wraps two colored boxes and custom component in a row with padding.

    ={{backgroundColor: 'red', flex: 0.5}} /> <MyCustomComponent {...customProps} /> </View>

    Views are designed to be used with StyleSheets for clarity and -performance, although inline styles are also supported.

    Props #

    accessibilityLabel string #

    Overrides the text that's read by the screen reader when the user interacts +performance, although inline styles are also supported.

    Edit on GitHubProps #

    accessibilityLabel string #

    Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.

    accessible bool #

    When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.

    onAccessibilityTap function #

    When accessible is true, the system will try to invoke this function @@ -38,15 +38,13 @@ for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view -(or one of its superviews).

    style style #

    Flexbox...
    ShadowPropTypesIOS#style...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor color
    borderBottomColor color
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderBottomWidth number
    borderColor color
    borderLeftColor color
    borderLeftWidth number
    borderRadius number
    borderRightColor color
    borderRightWidth number
    borderStyle enum('solid', 'dotted', 'dashed')
    borderTopColor color
    borderTopLeftRadius number
    borderTopRightRadius number
    borderTopWidth number
    borderWidth number
    opacity number
    overflow enum('visible', 'hidden')
    androidelevation number

    (Android-only) Sets the elevation of a view, using Android's underlying -elevation API. -This adds a drop shadow to the item and affects z-order for overlapping views. -Only supported on Android 5.0+, has no effect on earlier versions.

    testID string #

    Used to locate this view in end-to-end tests. NB: disables the 'layout-only +(or one of its superviews).

    style style #

    Flexbox...
    ShadowPropTypesIOS#style...
    Transforms...
    backfaceVisibility enum('visible', 'hidden')
    backgroundColor ColorPropType
    borderColor ColorPropType
    borderTopColor ColorPropType
    borderRightColor ColorPropType
    borderBottomColor ColorPropType
    borderLeftColor ColorPropType
    borderRadius number
    borderTopLeftRadius number
    borderTopRightRadius number
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderStyle enum('solid', 'dotted', 'dashed')
    borderWidth number
    borderTopWidth number
    borderRightWidth number
    borderBottomWidth number
    borderLeftWidth number
    opacity number
    overflow enum('visible', 'hidden')
    elevation number

    testID string #

    Used to locate this view in end-to-end tests. NB: disables the 'layout-only view removal' optimization for this view!

    androidaccessibilityComponentType AccessibilityComponentType #

    Indicates to accessibility services to treat UI component like a native one. Works for Android only.

    androidaccessibilityLiveRegion enum('none', 'polite', 'assertive') #

    Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. See http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion -for references.

    androidcollapsable bool #

    Views that are only used to layout their children or otherwise don't draw +for references.

    iosaccessibilityTraits AccessibilityTraits, [AccessibilityTraits] #

    Provides additional traits to screen reader. By default no traits are +provided unless specified otherwise in element

    androidcollapsable bool #

    Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.

    androidimportantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') #

    Controls how view is important for accessibility which is if it @@ -81,13 +79,12 @@ view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the -interaction/animation.

    iosaccessibilityTraits AccessibilityTraits, [AccessibilityTraits] #

    Provides additional traits to screen reader. By default no traits are -provided unless specified otherwise in element

    iosshouldRasterizeIOS bool #

    Whether this view should be rendered as a bitmap before compositing.

    On iOS, this is useful for animations and interactions that do not +interaction/animation.

    iosshouldRasterizeIOS bool #

    Whether this view should be rendered as a bitmap before compositing.

    On iOS, this is useful for animations and interactions that do not modify this component's dimensions nor its children; for example, when translating the position of a static view, rasterization allows the renderer to reuse a cached bitmap of a static view and quickly composite it during each frame.

    Rasterization incurs an off-screen drawing pass and the bitmap consumes -memory. Test and measure when using this property.

    Examples #

    		Edit on GitHub
    'use strict'; +memory. Test and measure when using this property.

    Edit on GitHubExamples #

    'use strict'; var Platform = require('Platform'); var React = require('react-native'); diff --git a/docs/viewpagerandroid.html b/docs/viewpagerandroid.html index eced4ab23cd..37a62aaca18 100644 --- a/docs/viewpagerandroid.html +++ b/docs/viewpagerandroid.html @@ -1,4 +1,4 @@ -ViewPagerAndroid – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ViewPagerAndroid #

    		Edit on GitHub

    Container that allows to flip left and right between child views. Each +ViewPagerAndroid – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ViewPagerAndroid

    Container that allows to flip left and right between child views. Each child view of the ViewPagerAndroid will be treated as a separate page and will be stretched to fill the ViewPagerAndroid.

    It is important all children are <View>s and not composite components. You can set style properties like padding or backgroundColor for each @@ -25,8 +25,8 @@ child.

    Example:

    render: 'center', padding: 20, } -}

    Props #

    View props... #

    initialPage number #

    Index of initial page that should be selected. Use setPage method to -update the page, and onPageSelected to monitor page changes

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

    Determines whether the keyboard gets dismissed in response to a drag. +}

    Edit on GitHubProps #

    View props... #

    initialPage number #

    Index of initial page that should be selected. Use setPage method to +update the page, and onPageSelected to monitor page changes

    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.

    onPageScroll function #

    Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) @@ -34,15 +34,10 @@ The event.nativeEvent object for this callback will carry following - position - index of first page from the left that is currently visible - offset - value from range [0,1) describing stage between page transitions. Value x means that (1 - x) fraction of the page at "position" index is - visible, and x fraction of the next page is visible.

    onPageScrollStateChanged function #

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

    onPageSelected function #

    This callback will be called once ViewPager finish navigating to selected page + visible, and x fraction of the next page is visible.

    onPageSelected function #

    This callback will be called once ViewPager finish navigating to selected page (when user swipes between pages). The event.nativeEvent object passed to this callback will have following fields: - - position - index of page that has been selected

    Examples #

    		Edit on GitHub
    'use strict'; + - position - index of page that has been selected

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { @@ -55,8 +50,6 @@ callback will have following fields: ViewPagerAndroid, } = React; -import type { ViewPagerScrollState } from 'ViewPagerAndroid'; - var PAGES = 5; var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273']; var IMAGE_URIS = [ @@ -146,10 +139,6 @@ import type { ViewPagerScrollState this.setState({progress: e.nativeEvent}); }, - onPageScrollStateChanged: function(state : ViewPagerScrollState) { - this.setState({scrollState: state}); - }, - move: function(delta) { var page = this.state.page + delta; this.go(page); @@ -191,7 +180,6 @@ import type { ViewPagerScrollState ={0} onPageScroll={this.onPageScroll} onPageSelected={this.onPageSelected} - onPageScrollStateChanged={this.onPageScrollStateChanged} ref={viewPager => { this.viewPager = viewPager; }}> {pages} </ViewPagerAndroid> @@ -207,7 +195,6 @@ import type { ViewPagerScrollState ={true} onPress={() => this.setState({animationsAreEnabled: true})} /> } - <Text style={styles.scrollStateText}>ScrollState[ {this.state.scrollState} ]</Text> </View> <View style={styles.buttons}> <Button text="Start" enabled={page > 0} onPress={() => this.go(0)}/> @@ -245,9 +232,6 @@ import type { ViewPagerScrollState : { color: 'white', }, - scrollStateText: { - color: '#99d1b7', - }, container: { flex: 1, backgroundColor: 'white', diff --git a/docs/webview.html b/docs/webview.html index cfb595fb1ce..cdafcb706f8 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -1,16 +1,10 @@ -WebView – React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    WebView #

    		Edit on GitHub

    Renders a native WebView.

    Props #

    View props... #

    automaticallyAdjustContentInsets bool #

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

    html string #

    Deprecated

    Use the source prop instead.

    injectedJavaScript string #

    Sets the JS to be injected when the webpage loads.

    onError function #

    Invoked when load fails

    onLoad function #

    Invoked when load finish

    onLoadEnd function #

    Invoked when load either succeeds or fails

    onLoadStart function #

    Invoked on load start

    onNavigationStateChange function #

    renderError function #

    Function that returns a view to show if there's an error.

    renderLoading function #

    Function that returns a loading indicator.

    source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number #

    Loads static html or a uri (with optional headers) in the WebView.

    startInLoadingState bool #

    style View#style #

    url string #

    Deprecated

    Use the source prop instead.

    androiddomStorageEnabled bool #

    Used on Android only, controls whether DOM Storage is enabled or not

    androidjavaScriptEnabled bool #

    Used on Android only, JS is enabled by default for WebView on iOS

    iosallowsInlineMediaPlayback bool #

    Determines whether HTML5 videos play inline or use the native full-screen +WebView – React Native | A framework for building native apps using React

    React Native0.19

    Quick Start

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    WebView

    Renders a native WebView.

    Edit on GitHubProps #

    View props... #

    automaticallyAdjustContentInsets bool #

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

    html string #

    injectedJavaScript string #

    Sets the JS to be injected when the webpage loads.

    onError function #

    Invoked when load fails

    onLoad function #

    Invoked when load finish

    onLoadEnd function #

    Invoked when load either succeeds or fails

    onLoadStart function #

    Invoked on load start

    onNavigationStateChange function #

    renderError function #

    Function that returns a view to show if there's an error.

    renderLoading function #

    Function that returns a loading indicator.

    startInLoadingState bool #

    style View#style #

    url string #

    iosallowsInlineMediaPlayback bool #

    Determines whether HTML5 videos play inline or use the native full-screen controller. default value false NOTE : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML -document must also include the webkit-playsinline attribute."

    iosbounces bool #

    iosdecelerationRate ScrollView.propTypes.decelerationRate #

    A floating-point number that determines how quickly the scroll view -decelerates after the user lifts their finger. You may also use string -shortcuts "normal" and "fast" which match the underlying iOS settings -for UIScrollViewDecelerationRateNormal and -UIScrollViewDecelerationRateFast respectively. - - Normal: 0.998 - - Fast: 0.9 (the default for iOS WebView)

    iosonShouldStartLoadWithRequest function #

    Allows custom handling of any webview requests by a JS handler. Return true -or false from this method to continue loading the request.

    iosscalesPageToFit bool #

    Sets whether the webpage scales to fit the view and the user can change the scale.

    iosscrollEnabled bool #

    Examples #

    		Edit on GitHub
    'use strict'; +document must also include the webkit-playsinline attribute."

    iosbounces bool #

    androiddomStorageEnabled bool #

    Used on Android only, controls whether DOM Storage is enabled or not

    androidjavaScriptEnabled bool #

    Used on Android only, JS is enabled by default for WebView on iOS

    iosonShouldStartLoadWithRequest function #

    Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request.

    iosscalesPageToFit bool #

    Sets whether the webpage scales to fit the view and the user can change the scale.

    iosscrollEnabled bool #

    Edit on GitHubExamples #

    'use strict'; var React = require('react-native'); var { @@ -46,11 +40,7 @@ or false from this method to continue loading the request.

    : '', handleTextInputChange: function(event) { - var url = event.nativeEvent.text; - if (!/^[a-zA-Z-_]+:/.test(url)) { - url = 'http://' + url; - } - this.inputText = url; + this.inputText = event.nativeEvent.text; }, render: function() { @@ -94,10 +84,9 @@ or false from this method to continue loading the request.

    ={WEBVIEW_REF} automaticallyAdjustContentInsets={false} style={styles.webView} - source={{uri: this.state.url}} + url={this.state.url} javaScriptEnabled={true} domStorageEnabled={true} - decelerationRate="normal" onNavigationStateChange={this.onNavigationStateChange} onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest} startInLoadingState={true} @@ -228,90 +217,13 @@ or false from this method to continue loading the request.

    }, }); -const HTML = ` -<!DOCTYPE html>\n -<html> - <head> - <title>Hello Static World</title> - <meta http-equiv="content-type" content="text/html; charset=utf-8"> - <meta name="viewport" content="width=320, user-scalable=no"> - <style type="text/css"> - body { - margin: 0; - padding: 0; - font: 62.5% arial, sans-serif; - background: #ccc; - } - h1 { - padding: 45px; - margin: 0; - text-align: center; - color: #33f; - } - </style> - </head> - <body> - <h1>Hello Static World</h1> - </body> -</html> -`; - exports.displayName = (undefined: ?string); exports.title = '<WebView>'; exports.description = 'Base component to display web content'; exports.examples = [ { - title: 'Simple Browser', + title: 'WebView', render(): ReactElement { return <WebViewExample />; } - }, - { - title: 'Bundled HTML', - render(): ReactElement { - return ( - <WebView - style={{ - backgroundColor: BGWASH, - height: 100, - }} - source={require('./helloworld.html')} - scalesPageToFit={true} - /> - ); - } - }, - { - title: 'Static HTML', - render(): ReactElement { - return ( - <WebView - style={{ - backgroundColor: BGWASH, - height: 100, - }} - source={{html: HTML}} - scalesPageToFit={true} - /> - ); - } - }, - { - title: 'POST Test', - render(): ReactElement { - return ( - <WebView - style={{ - backgroundColor: BGWASH, - height: 100, - }} - source={{ - uri: 'http://www.posttestserver.com/post.php', - method: 'POST', - body: 'foo=bar&bar=foo' - }} - scalesPageToFit={false} - /> - ); - } } ];
    Next →
    © 2015 Facebook Inc.
    React Native
    React Native
    A framework for building native apps using React

    React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

    Get started with React Native

    Native Components

    With React Native, you can use the standard platform components such as UITabBar on iOS and Drawer on Android. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid.

    // iOS +React Native | A framework for building native apps using React
    React Native0.19
    React Native
    A framework for building native apps using React

    React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

    Get started with React Native

    Native Components

    With React Native, you can use the standard platform components such as UITabBar on iOS and Drawer on Android. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid.

    // iOS var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; @@ -211,7 +211,7 @@ public class MyCustomViewManager extends < } @Override - public void updateView(MyCustomView view, ReactStylesDiffMap props) { + public void updateView(MyCustomView view, CatalystStylesDiffMap props) { super.updateView(view, props); if (props.hasKey(PROP_MY_CUSTOM_PROPERTY)) { diff --git a/releases/0.19/css/react-native.css b/releases/0.19/css/react-native.css index 5cfafbb9858..34bd28c95fd 100644 --- a/releases/0.19/css/react-native.css +++ b/releases/0.19/css/react-native.css @@ -312,6 +312,14 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li display: inline; } +.nav-main a.nav-version { + font-size: 16px; + font-weight: 800; + color: #05A5D1; + margin-left: 5px; + text-decoration: underline; +} + .hero { background: #05A5D1; padding: 50px 0; @@ -478,6 +486,15 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li box-shadow: 5px 5px 5px #888888; } +.versions ul { + list-style: none; +} + +.versions li { + font-size: 16px; + padding-top: 10px; +} + #examples h3, .home-presentation h3 { color: #2d2d2d; font-size: 24px; diff --git a/releases/0.19/docs/accessibility.html b/releases/0.19/docs/accessibility.html index a2604fd548a..228899f608e 100644 --- a/releases/0.19/docs/accessibility.html +++ b/releases/0.19/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 Native0.19

    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/releases/0.19/docs/actionsheetios.html b/releases/0.19/docs/actionsheetios.html index 995490630b2..5f028d338c2 100644 --- a/releases/0.19/docs/actionsheetios.html +++ b/releases/0.19/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 Native0.19

    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 { diff --git a/releases/0.19/docs/activityindicatorios.html b/releases/0.19/docs/activityindicatorios.html index ddde2c834ee..a92361f070e 100644 --- a/releases/0.19/docs/activityindicatorios.html +++ b/releases/0.19/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -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'; +ActivityIndicatorIOS – React Native | A framework for building native apps using React
    React Native0.19

    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/releases/0.19/docs/alert.html b/releases/0.19/docs/alert.html index ce41d3f5e64..be104bcb3c9 100644 --- a/releases/0.19/docs/alert.html +++ b/releases/0.19/docs/alert.html @@ -1,4 +1,4 @@ -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 +Alert – React Native | A framework for building native apps using React

    React Native0.19

    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, diff --git a/releases/0.19/docs/alertios.html b/releases/0.19/docs/alertios.html index 7779e90a29d..2f4d02e95ee 100644 --- a/releases/0.19/docs/alertios.html +++ b/releases/0.19/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 Native0.19

    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/releases/0.19/docs/android-building-from-source.html b/releases/0.19/docs/android-building-from-source.html index de35bd7556d..80412b1ce82 100644 --- a/releases/0.19/docs/android-building-from-source.html +++ b/releases/0.19/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 Native0.19

    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/releases/0.19/docs/android-setup.html b/releases/0.19/docs/android-setup.html index e57d43c18ed..1461fda4b0f 100644 --- a/releases/0.19/docs/android-setup.html +++ b/releases/0.19/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: