From 8577bf9fb2f5382410b15a8738daa73503f73f7c Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 21 Jun 2016 21:47:21 +0000 Subject: [PATCH] Updated docs for 0.28 --- docs/accessibility.html | 4 +- docs/actionsheetios.html | 19 +-- docs/activityindicator.html | 177 +++++++++++++++++++++++++ docs/activityindicatorios.html | 166 ----------------------- docs/alert.html | 6 +- docs/alertios.html | 8 +- docs/android-building-from-source.html | 6 +- docs/android-ui-performance.html | 4 +- docs/animated.html | 6 +- docs/animations.html | 8 +- docs/appregistry.html | 6 +- docs/appstate.html | 46 +++++-- docs/appstateios.html | 133 ------------------- docs/asyncstorage.html | 10 +- docs/backandroid.html | 4 +- docs/cameraroll.html | 8 +- docs/clipboard.html | 6 +- docs/colors.html | 4 +- docs/communication-ios.html | 4 +- docs/datepickerandroid.html | 6 +- docs/datepickerios.html | 8 +- docs/debugging.html | 4 +- docs/dimensions.html | 4 +- docs/direct-manipulation.html | 4 +- docs/drawerlayoutandroid.html | 4 +- docs/embedded-app-android.html | 6 +- docs/embedded-app-ios.html | 4 +- docs/flexbox.html | 4 +- docs/geolocation.html | 8 +- docs/gesture-responder-system.html | 4 +- docs/getting-started.html | 12 +- docs/image.html | 13 +- docs/images.html | 6 +- docs/intentandroid.html | 4 +- docs/interactionmanager.html | 4 +- docs/javascript-environment.html | 4 +- docs/known-issues.html | 6 +- docs/layoutanimation.html | 10 +- docs/linking-libraries-ios.html | 6 +- docs/linking.html | 31 +++-- docs/linkingios.html | 57 -------- docs/listview.html | 6 +- docs/listviewdatasource.html | 6 +- docs/mapview.html | 6 +- docs/modal.html | 6 +- docs/native-components-android.html | 4 +- docs/native-components-ios.html | 4 +- docs/native-modules-android.html | 4 +- docs/native-modules-ios.html | 4 +- docs/nativemethodsmixin.html | 4 +- docs/navigator-comparison.html | 4 +- docs/navigator.html | 4 +- docs/navigatorios.html | 6 +- docs/netinfo.html | 14 +- docs/network.html | 6 +- docs/panresponder.html | 6 +- docs/performance.html | 4 +- docs/picker.html | 6 +- docs/pickerios.html | 8 +- docs/pixelratio.html | 6 +- docs/platform-specific-code.html | 10 +- docs/progressbarandroid.html | 41 +----- docs/progressviewios.html | 4 +- docs/pushnotificationios.html | 27 ++-- docs/refreshcontrol.html | 6 +- docs/running-on-device-android.html | 4 +- docs/running-on-device-ios.html | 4 +- docs/sample-application-movies.html | 4 +- docs/scrollview.html | 10 +- docs/segmentedcontrolios.html | 18 +-- docs/shadowproptypesios.html | 4 +- docs/signed-apk-android.html | 4 +- docs/slider.html | 24 ++-- docs/sliderios.html | 20 +-- docs/statusbar.html | 6 +- docs/statusbarios.html | 4 +- docs/style.html | 4 +- docs/stylesheet.html | 4 +- docs/switch.html | 18 +-- docs/tabbarios-item.html | 4 +- docs/tabbarios.html | 11 +- docs/testing.html | 4 +- docs/text.html | 12 +- docs/textinput.html | 14 +- docs/timepickerandroid.html | 6 +- docs/timers.html | 4 +- docs/toastandroid.html | 6 +- docs/toolbarandroid.html | 6 +- docs/touchablehighlight.html | 4 +- docs/touchablenativefeedback.html | 4 +- docs/touchableopacity.html | 4 +- docs/touchablewithoutfeedback.html | 4 +- docs/transforms.html | 4 +- docs/troubleshooting.html | 4 +- docs/tutorial-core-components.html | 4 +- docs/upgrading.html | 6 +- docs/vibration.html | 6 +- docs/vibrationios.html | 6 +- docs/videos.html | 4 +- docs/view.html | 6 +- docs/viewpagerandroid.html | 6 +- docs/webview.html | 16 +-- index.html | 4 +- releases/0.28/versions.html | 2 +- showcase.html | 4 +- support.html | 4 +- versions.html | 4 +- 107 files changed, 573 insertions(+), 748 deletions(-) create mode 100644 docs/activityindicator.html delete mode 100644 docs/activityindicatorios.html delete mode 100644 docs/appstateios.html delete mode 100644 docs/linkingios.html diff --git a/docs/accessibility.html b/docs/accessibility.html index 4acd3b1623e..f460e555f29 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -1,4 +1,4 @@ -Accessibility – React Native | A framework for building native apps using React
React Native0.27

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Accessibility #

Edit on GitHub

Native App Accessibility (iOS and Android) #

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

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

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

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

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

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Accessibility #

Edit on GitHub

Native App Accessibility (iOS and Android) #

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

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

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

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

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

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

accessibilityLabel (iOS, Android) #

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

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

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

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActionSheetIOS #

Edit on GitHub

Methods #

static showActionSheetWithOptions(options, callback) #

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

React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActionSheetIOS #

Edit on GitHub

Methods #

static showActionSheetWithOptions(options, callback) #

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

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

static showShareActionSheetWithOptions(options, failureCallback, successCallback) #

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

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

NOTE: if url points to a local file, or is a base64-encoded +one or both of message and url and can additionally have +a subject or excludedActivityTypes:

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

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

Examples #

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

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -187,27 +188,27 @@ exports.description .examples = [ { title: 'Show Action Sheet', - render(): ReactElement { return <ActionSheetExample />; } + render(): ReactElement<any> { return <ActionSheetExample />; } }, { title: 'Show Action Sheet with tinted buttons', - render(): ReactElement { return <ActionSheetTintExample />; } + render(): ReactElement<any> { return <ActionSheetTintExample />; } }, { title: 'Show Share Action Sheet', - render(): ReactElement { + render(): ReactElement<any> { return <ShareActionSheetExample url="https://code.facebook.com" />; } }, { title: 'Share Local Image', - render(): ReactElement { + render(): ReactElement<any> { return <ShareActionSheetExample url="bunny.png" />; } }, { title: 'Share Screenshot', - render(): ReactElement { + render(): ReactElement<any> { return <ShareScreenshotExample />; } } @@ -227,6 +228,6 @@ exports.examples \ No newline at end of file diff --git a/docs/activityindicator.html b/docs/activityindicator.html new file mode 100644 index 00000000000..438c7be7eda --- /dev/null +++ b/docs/activityindicator.html @@ -0,0 +1,177 @@ +ActivityIndicator – React Native | A framework for building native apps using React
React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicator #

Edit on GitHub

Displays a circular loading indicator.

Props #

View props... #

animating bool #

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

color color #

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

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

Size of the indicator. Small has a height of 20, large has a height of 36. +Other sizes can be obtained using a scale transform.

ioshidesWhenStopped bool #

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

Examples #

Edit on GitHub
'use strict'; + +const React = require('react'); +const ReactNative = require('react-native'); +const { + ActivityIndicator, + StyleSheet, + View, +} = ReactNative; +const TimerMixin = require('react-timer-mixin'); + +const ToggleAnimatingActivityIndicator = React.createClass({ + mixins: [TimerMixin], + + getInitialState() { + return { + animating: true, + }; + }, + + setToggleTimeout() { + this.setTimeout(() => { + this.setState({animating: !this.state.animating}); + this.setToggleTimeout(); + }, 2000); + }, + + componentDidMount() { + this.setToggleTimeout(); + }, + + render() { + return ( + <ActivityIndicator + animating={this.state.animating} + style={[styles.centering, {height: 80}]} + size="large" + /> + ); + } +}); + +exports.displayName = (undefined: ?string); +exports.framework = 'React'; +exports.title = '<ActivityIndicator>'; +exports.description = 'Animated loading indicators.'; + +exports.examples = [ + { + title: 'Default (small, white)', + render() { + return ( + <ActivityIndicator + style={[styles.centering, styles.gray]} + color="white" + /> + ); + } + }, + { + title: 'Gray', + render() { + return ( + <View> + <ActivityIndicator + style={[styles.centering]} + /> + <ActivityIndicator + style={[styles.centering, {backgroundColor: '#eeeeee'}]} + /> + </View> + ); + } + }, + { + title: 'Custom colors', + render() { + return ( + <View style={styles.horizontal}> + <ActivityIndicator color="#0000ff" /> + <ActivityIndicator color="#aa00aa" /> + <ActivityIndicator color="#aa3300" /> + <ActivityIndicator color="#00aa00" /> + </View> + ); + } + }, + { + title: 'Large', + render() { + return ( + <ActivityIndicator + style={[styles.centering, styles.gray]} + color="white" + size="large" + /> + ); + } + }, + { + title: 'Large, custom colors', + render() { + return ( + <View style={styles.horizontal}> + <ActivityIndicator + size="large" + color="#0000ff" + /> + <ActivityIndicator + size="large" + color="#aa00aa" + /> + <ActivityIndicator + size="large" + color="#aa3300" + /> + <ActivityIndicator + size="large" + color="#00aa00" + /> + </View> + ); + } + }, + { + title: 'Start/stop', + render() { + return <ToggleAnimatingActivityIndicator />; + } + }, + { + title: 'Custom size', + render() { + return ( + <ActivityIndicator + style={[styles.centering, {transform: [{scale: 1.5}]}]} + size="large" + /> + ); + } + }, +]; + +const styles = StyleSheet.create({ + centering: { + alignItems: 'center', + justifyContent: 'center', + padding: 8, + }, + gray: { + backgroundColor: '#cccccc', + }, + horizontal: { + flexDirection: 'row', + justifyContent: 'space-around', + padding: 8, + }, +});
Next →

Run this example

Run example in simulator

Powered by appetize.io

© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html deleted file mode 100644 index 0da02d0fda4..00000000000 --- a/docs/activityindicatorios.html +++ /dev/null @@ -1,166 +0,0 @@ -ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native0.27

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicatorIOS #

Edit on GitHub

Props #

View props... #

animating bool #

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

color string #

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

hidesWhenStopped bool #

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

onLayout function #

Invoked on mount and layout changes with

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

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

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

Examples #

Edit on GitHub
'use strict'; - -var React = require('react'); -var ReactNative = require('react-native'); -var { - ActivityIndicatorIOS, - StyleSheet, - View, -} = ReactNative; -var TimerMixin = require('react-timer-mixin'); - -var ToggleAnimatingActivityIndicator = React.createClass({ - mixins: [TimerMixin], - - getInitialState: function() { - return { - animating: true, - }; - }, - - setToggleTimeout: function() { - this.setTimeout( - () => { - this.setState({animating: !this.state.animating}); - this.setToggleTimeout(); - }, - 1200 - ); - }, - - componentDidMount: function() { - this.setToggleTimeout(); - }, - - render: function() { - return ( - <ActivityIndicatorIOS - animating={this.state.animating} - style={[styles.centering, {height: 80}]} - size="large" - /> - ); - } -}); - -exports.displayName = (undefined: ?string); -exports.framework = 'React'; -exports.title = '<ActivityIndicatorIOS>'; -exports.description = 'Animated loading indicators.'; - -exports.examples = [ - { - title: 'Default (small, white)', - render: function() { - return ( - <ActivityIndicatorIOS - style={[styles.centering, styles.gray, {height: 40}]} - color="white" - /> - ); - } - }, - { - title: 'Gray', - render: function() { - return ( - <View> - <ActivityIndicatorIOS - style={[styles.centering, {height: 40}]} - /> - <ActivityIndicatorIOS - style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]} - /> - </View> - ); - } - }, - { - title: 'Custom colors', - render: function() { - return ( - <View style={styles.horizontal}> - <ActivityIndicatorIOS color="#0000ff" /> - <ActivityIndicatorIOS color="#aa00aa" /> - <ActivityIndicatorIOS color="#aa3300" /> - <ActivityIndicatorIOS color="#00aa00" /> - </View> - ); - } - }, - { - title: 'Large', - render: function() { - return ( - <ActivityIndicatorIOS - style={[styles.centering, styles.gray, {height: 80}]} - color="white" - size="large" - /> - ); - } - }, - { - title: 'Large, custom colors', - render: function() { - return ( - <View style={styles.horizontal}> - <ActivityIndicatorIOS - size="large" - color="#0000ff" - /> - <ActivityIndicatorIOS - size="large" - color="#aa00aa" - /> - <ActivityIndicatorIOS - size="large" - color="#aa3300" - /> - <ActivityIndicatorIOS - size="large" - color="#00aa00" - /> - </View> - ); - } - }, - { - title: 'Start/stop', - render: function(): ReactElement { - return <ToggleAnimatingActivityIndicator />; - } - }, -]; - -var styles = StyleSheet.create({ - centering: { - alignItems: 'center', - justifyContent: 'center', - }, - gray: { - backgroundColor: '#cccccc', - }, - horizontal: { - flexDirection: 'row', - justifyContent: 'space-around', - }, -});
Next →

Run this example

Run example in simulator

Powered by appetize.io

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

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Alert #

Edit on GitHub

Launches an alert dialog with the specified title and message.

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

React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Alert #

Edit on GitHub

Launches an alert dialog with the specified title and message.

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

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

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

Methods #

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

Examples #

Edit on GitHub
'use strict'; +)

Methods #

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

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -150,6 +150,6 @@ module.exports \ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index 7d5beb33ebf..e6f4564699e 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS – React Native | A framework for building native apps using React
React Native0.27

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS #

Edit on GitHub

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

React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS #

Edit on GitHub

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

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

Examples #

Edit on GitHub
'use strict'; +)

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -54,7 +54,7 @@ exports.examples }, { title: 'Prompt Options', - render(): ReactElement { + render(): ReactElement<any> { return <PromptOptions />; } }, @@ -208,6 +208,6 @@ class PromptOptions extends \ No newline at end of file diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html index e35f910f07a..de4191c2a3a 100644 --- a/docs/android-building-from-source.html +++ b/docs/android-building-from-source.html @@ -1,4 +1,4 @@ -Building React Native from source – React Native | A framework for building native apps using React
React Native0.27

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Building React Native from source #

Edit on GitHub

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

Prerequisites #

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

Make sure you have the following installed:

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

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

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

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Building React Native from source #

Edit on GitHub

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

Prerequisites #

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

Make sure you have the following installed:

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

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

sdk.dir=absolute_path_to_android_sdk ndk.dir=absolute_path_to_android_ndk

Example:

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

Download links for Android NDK #

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

You can find further instructions on the official page.

Building the source #

1. Installing the fork #

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

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

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

2. Adding gradle dependencies #

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

... dependencies { @@ -28,7 +28,7 @@ dependencies { rootProject.allprojects { buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}" } -}

Testing #

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

Troubleshooting #

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

Next →

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

Take Survey
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/android-ui-performance.html b/docs/android-ui-performance.html index 52622377b4b..ed60f6bbf74 100644 --- a/docs/android-ui-performance.html +++ b/docs/android-ui-performance.html @@ -1,4 +1,4 @@ -Profiling Android UI Performance – React Native | A framework for building native apps using React
React Native0.27

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Profiling Android UI Performance #

Edit on GitHub

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

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

Make sure that JS dev mode is OFF!

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

Profiling with Systrace #

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

Collecting a trace #

NOTE:

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

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

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

A quick breakdown of this command:

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

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

Reading the trace #

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

Example

HINT: Use the WASD keys to strafe and zoom

Enable VSync highlighting #

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

Enable VSync Highlighting

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

Find your process #

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

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

UI Thread #

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

UI Thread Example

JS Thread #

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

JS Thread Example

Native Modules Thread #

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

Native Modules Thread Example

Bonus: Render Thread #

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

Render Thread Example

Identifying a culprit #

A smooth animation should look something like the following:

Smooth Animation

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

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

Choppy Animation from JS

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

You might also see something like this:

Choppy Animation from UI

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

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

JS Issues #

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

Too much JS

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

TODO: Add more tools for profiling JS

Native UI Issues #

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

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

Too much GPU work #

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

Overloaded GPU

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

To mitigate this, you should:

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

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

Creating new views on the UI thread #

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

Creating Views

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

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

Still stuck? #

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

Next →

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

Take Survey
© 2016 Facebook Inc.
React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Profiling Android UI Performance #

Edit on GitHub

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

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

Make sure that JS dev mode is OFF!

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

Profiling with Systrace #

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

Collecting a trace #

NOTE:

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

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

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

A quick breakdown of this command:

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

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

Reading the trace #

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

Example

HINT: Use the WASD keys to strafe and zoom

Enable VSync highlighting #

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

Enable VSync Highlighting

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

Find your process #

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

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

UI Thread #

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

UI Thread Example

JS Thread #

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

JS Thread Example

Native Modules Thread #

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

Native Modules Thread Example

Bonus: Render Thread #

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

Render Thread Example

Identifying a culprit #

A smooth animation should look something like the following:

Smooth Animation

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

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

Choppy Animation from JS

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

You might also see something like this:

Choppy Animation from UI

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

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

JS Issues #

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

Too much JS

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

TODO: Add more tools for profiling JS

Native UI Issues #

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

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

Too much GPU work #

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

Overloaded GPU

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

To mitigate this, you should:

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

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

Creating new views on the UI thread #

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

Creating Views

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

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

Still stuck? #

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

Next →

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

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

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animated #

Edit on GitHub

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

React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animated #

Edit on GitHub

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

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

Methods #

constructor(valueIn?) #

setValue(value) #

setOffset(offset) #

flattenOffset() #

stopAnimation(callback?) #

addListener(callback) #

removeListener(id) #

getLayout() #

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

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

getTranslateTransform() #

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

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

Examples #

Edit on GitHub
'use strict'; + }}

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -361,6 +361,6 @@ exports.examples \ No newline at end of file diff --git a/docs/animations.html b/docs/animations.html index 2c075c2080b..c4a62bc4de6 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -1,4 +1,4 @@ -Animations – React Native | A framework for building native apps using React
React Native0.27

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animations #

Edit on GitHub

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

React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Animations #

Edit on GitHub

Fluid, meaningful animations are essential to the mobile user experience. Like everything in React Native, Animation APIs for React Native are currently under development, but have started to coalesce around two complementary systems: LayoutAnimation for animated global layout transactions, and Animated for @@ -186,7 +186,7 @@ familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will -manage frame updates for you.

react-tween-state (Not recommended - use Animated instead) #

react-tween-state is a +manage frame updates for you.

react-tween-state (Not recommended - use Animated instead) #

react-tween-state is a minimal library that does exactly what its name suggests: it tweens a value in a component's state, starting at a from value and ending at a to value. This means that it generates the values in between those @@ -235,7 +235,7 @@ class App extends .onClass(App, tweenState.Mixin);

Run this example

Here we animated the opacity, but as you might guess, we can animate any numeric value. Read more about react-tween-state in its -README.

Rebound (Not recommended - use Animated instead) #

Rebound.js is a JavaScript port of +README.

Rebound (Not recommended - use Animated instead) #

Rebound.js is a JavaScript port of Rebound for Android. It is similar in concept to react-tween-state: you have an initial value and set an end value, then Rebound generates intermediate values that you can @@ -391,6 +391,6 @@ source.

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

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppRegistry #

Edit on GitHub

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

React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppRegistry #

Edit on GitHub

AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking @@ -6,7 +6,7 @@ for the app and then actually run the app when it's ready by invoking AppRegistry.unmountApplicationComponentAtRootTag with the tag that was pass into runApplication. These should always be used as a pair.

AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are -required.

Methods #

static registerConfig(config) #

static registerComponent(appKey, getComponentFunc) #

static registerRunnable(appKey, func) #

static getAppKeys() #

static runApplication(appKey, appParameters) #

static unmountApplicationComponentAtRootTag(rootTag) #

Next →
© 2016 Facebook Inc.
\ No newline at end of file diff --git a/docs/appstate.html b/docs/appstate.html index 0eed77f021d..a4c6837b523 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,8 +1,9 @@ -AppState – React Native | A framework for building native apps using React
React Native0.27

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppState #

Edit on GitHub

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

React Native0.28

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AppState #

Edit on GitHub

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

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

App States #

  • active - The app is running in the foreground
  • background - The app is running in the background. The user is either - in another app or on the home screen
  • inactive - This is a transition state that currently never happens for - typical React Native apps.

For more information, see + in another app or on the home screen

  • inactive - This is a state that occurs when transitioning between + foreground & background, and during periods of inactivity such as + entering the Multitasking view or in the event of an incoming call

    • For more information, see Apple's documentation

    Basic Usage #

    To see the current state, you can check AppState.currentState, which will be kept up-to-date. However, currentState will be null at launch while AppState retrieves it over the bridge.

    getInitialState: function() { @@ -25,12 +26,16 @@ render: funct ); },

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

    Methods #

    static addEventListener(type, handler) #

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

    static removeEventListener(type, handler) #

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

    Properties #

    currentState: TypeCastExpression #

    Examples #

    		Edit on GitHub
    'use strict'; +state will happen only momentarily.

    Methods #

    constructor() #

    addEventListener(type, handler) #

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

    TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate +addEventListener and removeEventListener and just use addListener and +listener.remove() directly. That will be a breaking change though, as both +the method and event names are different (addListener events are currently +required to be globally unique).

    removeEventListener(type, handler) #

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

    Examples #

    		Edit on GitHub
    'use strict'; -var React = require('react'); -var ReactNative = require('react-native'); -var { +const React = require('react'); +const ReactNative = require('react-native'); +const { AppState, Text, View @@ -41,13 +46,19 @@ and providing the handler

    return { appState: AppState.currentState, previousAppStates: [], + memoryWarnings: 0, }; }, componentDidMount: function() { AppState.addEventListener('change', this._handleAppStateChange); + AppState.addEventListener('memoryWarning', this._handleMemoryWarning); }, componentWillUnmount: function() { AppState.removeEventListener('change', this._handleAppStateChange); + AppState.removeEventListener('memoryWarning', this._handleMemoryWarning); + }, + _handleMemoryWarning: function() { + this.setState({memoryWarnings: this.state.memoryWarnings + 1}); }, _handleAppStateChange: function(appState) { var previousAppStates = this.state.previousAppStates.slice(); @@ -58,6 +69,13 @@ and providing the handler

    }); }, render() { + if (this.props.showMemoryWarnings) { + return ( + <View> + <Text>{this.state.memoryWarnings}</Text> + </View> + ); + } if (this.props.showCurrentOnly) { return ( <View> @@ -84,11 +102,17 @@ exports.examples { title: 'Subscribed AppState:', description: 'This changes according to the current state, so you can only ever see it rendered as "active"', - render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; } + render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={true} />; } }, { title: 'Previous states:', - render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; } + render(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={false} />; } + }, + { + platform: 'ios', + title: 'Memory Warnings', + description: 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.', + render(): ReactElement<any> { return <AppStateSubscription showMemoryWarnings={true} />; } }, ];

    Next →

    Run this example

    Run example in simulator

    Powered by appetize.io

    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/appstateios.html b/docs/appstateios.html deleted file mode 100644 index d22e28393f5..00000000000 --- a/docs/appstateios.html +++ /dev/null @@ -1,133 +0,0 @@ -AppStateIOS – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    AppStateIOS #

    		Edit on GitHub

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

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

    iOS App States #

    • active - The app is running in the foreground
    • background - The app is running in the background. The user is either - in another app or on the home screen
    • inactive - This is a state that occurs when transitioning between - foreground & background, and during periods of inactivity such as - entering the Multitasking view or in the event of an incoming call

    For more information, see -Apple's documentation

    Basic Usage #

    To see the current state, you can check AppStateIOS.currentState, which -will be kept up-to-date. However, currentState will be null at launch -while AppStateIOS retrieves it over the bridge.

    getInitialState: function() { - return { - currentAppState: AppStateIOS.currentState, - }; -}, -componentDidMount: function() { - AppStateIOS.addEventListener('change', this._handleAppStateChange); -}, -componentWillUnmount: function() { - AppStateIOS.removeEventListener('change', this._handleAppStateChange); -}, -_handleAppStateChange: function(currentAppState) { - this.setState({ currentAppState, }); -}, -render: function() { - return ( - <Text>Current state is: {this.state.currentAppState}</Text> - ); -},

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

    Methods #

    static addEventListener(type, handler) #

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

    static removeEventListener(type, handler) #

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

    Properties #

    currentState: TypeCastExpression #

    // 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'; - -var React = require('react'); -var ReactNative = require('react-native'); -var { - AppStateIOS, - Text, - View -} = ReactNative; - -var AppStateSubscription = React.createClass({ - getInitialState() { - return { - appState: AppStateIOS.currentState, - previousAppStates: [], - memoryWarnings: 0, - }; - }, - componentDidMount: function() { - AppStateIOS.addEventListener('change', this._handleAppStateChange); - AppStateIOS.addEventListener('memoryWarning', this._handleMemoryWarning); - }, - componentWillUnmount: function() { - AppStateIOS.removeEventListener('change', this._handleAppStateChange); - AppStateIOS.removeEventListener('memoryWarning', this._handleMemoryWarning); - }, - _handleMemoryWarning: function() { - this.setState({memoryWarnings: this.state.memoryWarnings + 1}); - }, - _handleAppStateChange: function(appState) { - var previousAppStates = this.state.previousAppStates.slice(); - previousAppStates.push(this.state.appState); - this.setState({ - appState, - previousAppStates, - }); - }, - render() { - if (this.props.showMemoryWarnings) { - return ( - <View> - <Text>{this.state.memoryWarnings}</Text> - </View> - ); - } - if (this.props.showCurrentOnly) { - return ( - <View> - <Text>{this.state.appState}</Text> - </View> - ); - } - return ( - <View> - <Text>{JSON.stringify(this.state.previousAppStates)}</Text> - </View> - ); - } -}); - -exports.title = 'AppStateIOS'; -exports.description = 'iOS app background status'; -exports.examples = [ - { - title: 'AppStateIOS.currentState', - description: 'Can be null on app initialization', - render() { return <Text>{AppStateIOS.currentState}</Text>; } - }, - { - title: 'Subscribed AppStateIOS:', - description: 'This changes according to the current state, so you can only ever see it rendered as "active"', - render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; } - }, - { - title: 'Previous states:', - render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; } - }, - { - title: 'Memory Warnings', - description: 'In the simulator, hit Shift+Command+M to simulate a memory warning.', - render(): ReactElement { return <AppStateSubscription showMemoryWarnings={true} />; } - }, -];
    Next →

    Run this example

    Run example in simulator

    Powered by appetize.io

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    AsyncStorage #

    		Edit on GitHub

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    AsyncStorage #

    		Edit on GitHub

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

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

    On iOS, AsyncStorage is backed by native code that stores small values in a serialized @@ -20,7 +20,7 @@ Returns a Promise object. Not supported by all native implementatio traits: {eyes: 'blue', shoe_size: 10} }; -AsyncStorage.setItem(store_key, JSON.stringify(UID123_object), () => { +AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => { AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => { AsyncStorage.getItem('UID123', (err, result) => { console.log(result); @@ -85,7 +85,7 @@ AsyncStorage. }); }); }); -});

    Properties #

    Examples #

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

    Properties #

    Examples #

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

    Run this example

    Run example in simulator

    Powered by appetize.io

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    BackAndroid #

    		Edit on GitHub

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    BackAndroid #

    		Edit on GitHub

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

    Example:

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    CameraRoll #

    		Edit on GitHub

    CameraRoll provides access to the local camera roll / gallery.

    Methods #

    static saveImageWithTag(tag) #

    Saves the image to the camera roll / gallery.

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

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Clipboard #

    		Edit on GitHub

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

    Methods #

    static getString() #

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Clipboard #

    		Edit on GitHub

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

    Methods #

    static getString() #

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

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

    static setString(content) #

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

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

    @param the content to be stored in the clipboard.

    Examples #

    		Edit on GitHub
    'use strict'; +}

    @param the content to be stored in the clipboard.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -68,6 +68,6 @@ exports.examples \ No newline at end of file diff --git a/docs/colors.html b/docs/colors.html index 1b0247c1140..c2cd14e37fc 100644 --- a/docs/colors.html +++ b/docs/colors.html @@ -1,4 +1,4 @@ -Colors – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Colors #

    		Edit on GitHub

    The following formats are supported:

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

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

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

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

    Take Survey
    © 2016 Facebook Inc.
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Colors #

    		Edit on GitHub

    The following formats are supported:

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

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

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

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Communication between native and React Native #

    		Edit on GitHub

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

    Introduction #

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

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

    Properties #

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

    Passing properties from native to React Native #

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

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Communication between native and React Native #

    		Edit on GitHub

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

    Introduction #

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

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

    Properties #

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

    Passing properties from native to React Native #

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

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    DatePickerAndroid #

    		Edit on GitHub

    Opens the standard Android date picker dialog.

    Example #

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    DatePickerAndroid #

    		Edit on GitHub

    Opens the standard Android date picker dialog.

    Example #

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

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

    static dateSetAction() #

    A date has been selected.

    static dismissedAction() #

    The dialog has been dismissed.

    Examples #

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

    static dateSetAction() #

    A date has been selected.

    static dismissedAction() #

    The dialog has been dismissed.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -136,6 +136,6 @@ module.exports \ No newline at end of file diff --git a/docs/datepickerios.html b/docs/datepickerios.html index c107160fe44..81f7c73b294 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -DatePickerIOS – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    DatePickerIOS #

    		Edit on GitHub

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    DatePickerIOS #

    		Edit on GitHub

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

    Props

    timeZoneOffsetInMinutes number #

    Timezone offset in minutes.

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

    Examples #

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

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -125,7 +125,7 @@ exports.description .examples = [ { title: '<DatePickerIOS>', - render: function(): ReactElement { + render: function(): ReactElement<any> { return <DatePickerExample />; }, }]; @@ -175,6 +175,6 @@ exports.examples \ No newline at end of file diff --git a/docs/debugging.html b/docs/debugging.html index 8626ae12825..e6601ce9c66 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Debugging #

    		Edit on GitHub

    Debugging React Native Apps #

    To access the in-app developer menu:

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

    Hint

    To disable the developer menu for production builds:

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

    Android logging #

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

    Reload #

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

    YellowBox/RedBox #

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

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

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

    console.disableYellowBox = true; +Debugging – React Native | A framework for building native apps using React
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Debugging #

    		Edit on GitHub

    Debugging React Native Apps #

    To access the in-app developer menu:

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

    Hint

    To disable the developer menu for production builds:

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

    Android logging #

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

    Reload #

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

    YellowBox/RedBox #

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

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

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

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

    Specific warnings can be ignored programmatically by setting the array:

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

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

    Chrome Developer Tools #

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

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

    To debug on a real device:

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

    Custom JavaScript debugger #

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

    Live Reload #

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

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

    FPS (Frames per Second) Monitor #

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

    Next →

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Dimensions #

    		Edit on GitHub

    Methods #

    static set(dims) #

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Dimensions #

    		Edit on GitHub

    Methods #

    static set(dims) #

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

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

    static get(dim) #

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

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

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

    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Direct Manipulation #

    		Edit on GitHub

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Direct Manipulation #

    		Edit on GitHub

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    DrawerLayoutAndroid #

    		Edit on GitHub

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    DrawerLayoutAndroid #

    		Edit on GitHub

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

    \ No newline at end of file diff --git a/docs/embedded-app-android.html b/docs/embedded-app-android.html index 46e007c569d..501a8630462 100644 --- a/docs/embedded-app-android.html +++ b/docs/embedded-app-android.html @@ -1,9 +1,9 @@ -Integrating with Existing Apps – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Integrating with Existing Apps #

    		Edit on GitHub

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

    Requirements #

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

    Prepare your app #

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

    compile "com.facebook.react:react-native:+" // From node_modules

    In your project's build.gradle file add an entry for the local React Native maven directory:

    allprojects { +Integrating with Existing Apps – React Native | A framework for building native apps using React
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Integrating with Existing Apps #

    		Edit on GitHub

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

    Requirements #

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

    Prepare your app #

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

    compile "com.facebook.react:react-native:+" // From node_modules

    In your project's build.gradle file add an entry for the local React Native maven directory:

    allprojects { repositories { ... maven { // All of React Native (JS, Android binaries) is installed from npm - url "$projectDir/node_modules/react-native/android" + url "$rootDir/node_modules/react-native/android" } } ... @@ -113,6 +113,6 @@ AppRegistry. apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index 9becc90d6d1..e0414f5a075 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -1,4 +1,4 @@ -Integrating with Existing Apps – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Integrating with Existing Apps #

    		Edit on GitHub

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

    Requirements #

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

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

    Install React Native Using CocoaPods #

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

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Integrating with Existing Apps #

    		Edit on GitHub

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

    Requirements #

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

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

    Install React Native Using CocoaPods #

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

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

    # Depending on how your project is organized, your node_modules directory may be # somewhere else; tell CocoaPods where you've installed react-native from npm pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', @@ -99,6 +99,6 @@ class ReactView \ No newline at end of file diff --git a/docs/flexbox.html b/docs/flexbox.html index 4bf9fa77417..a72b2bf754a 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -Flexbox – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Flexbox #

    		Edit on GitHub

    Props #

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

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

    borderBottomWidth number #

    borderLeftWidth number #

    borderRightWidth number #

    borderTopWidth number #

    borderWidth number #

    bottom number #

    flex number #

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

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

    height number #

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

    left number #

    margin number #

    marginBottom number #

    marginHorizontal number #

    marginLeft number #

    marginRight number #

    marginTop number #

    marginVertical number #

    padding number #

    paddingBottom number #

    paddingHorizontal number #

    paddingLeft number #

    paddingRight number #

    paddingTop number #

    paddingVertical number #

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

    right number #

    top number #

    width number #

    Next →
    © 2016 Facebook Inc.
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Flexbox #

    		Edit on GitHub

    Props #

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

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

    borderBottomWidth number #

    borderLeftWidth number #

    borderRightWidth number #

    borderTopWidth number #

    borderWidth number #

    bottom number #

    flex number #

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

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

    height number #

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

    left number #

    margin number #

    marginBottom number #

    marginHorizontal number #

    marginLeft number #

    marginRight number #

    marginTop number #

    marginVertical number #

    padding number #

    paddingBottom number #

    paddingHorizontal number #

    paddingLeft number #

    paddingRight number #

    paddingTop number #

    paddingVertical number #

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

    right number #

    top number #

    width number #

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Geolocation #

    		Edit on GitHub

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Geolocation #

    		Edit on GitHub

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

    iOS #

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

    Android #

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

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

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

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

    static clearWatch(watchID) #

    static stopObserving() #

    Examples #

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

    static clearWatch(watchID) #

    static stopObserving() #

    Examples #

    		Edit on GitHub
    /* eslint no-console: 0 */ 'use strict'; @@ -25,7 +25,7 @@ exports.description .examples = [ { title: 'navigator.geolocation', - render: function(): ReactElement { + render: function(): ReactElement<any> { return <GeolocationExample />; }, } @@ -96,6 +96,6 @@ exports.examples \ No newline at end of file diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index d9e703440f5..926cd04149d 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -Gesture Responder System – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Gesture Responder System #

    		Edit on GitHub

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

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

    Best Practices #

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

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

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

    TouchableHighlight and Touchable* #

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

    Responder Lifecycle #

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

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

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

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

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

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

    evt is a synthetic touch event with the following form:

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

    Capture ShouldSet Handlers #

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

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

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

    PanResponder #

    For higher-level gesture interpretation, check out PanResponder.

    Next →

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

    Take Survey
    © 2016 Facebook Inc.
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Gesture Responder System #

    		Edit on GitHub

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

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

    Best Practices #

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

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

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

    TouchableHighlight and Touchable* #

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

    Responder Lifecycle #

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

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

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

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

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

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

    evt is a synthetic touch event with the following form:

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

    Capture ShouldSet Handlers #

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

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

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

    PanResponder #

    For higher-level gesture interpretation, check out PanResponder.

    Next →

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

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Getting Started #

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Getting Started #

    		Edit on GitHub
    -Platform: +Target: iOS Android -OS: +Development OS: Mac Linux Windows @@ -51,7 +51,7 @@ recommended installs.

    brew install node

    React Native Command Line Tools #

    The React Native command line tools allow you to easily create and initialize projects, etc.

    npm install -g react-native-cli

    If you see the error, EACCES: permission denied, please run the command: sudo npm install -g react-native-cli.

    -

    Xcode #

    Xcode 7.0 or higher. Open the App Store or go to https://developer.apple.com/xcode/downloads/. This will also install git as well.

    +

    Xcode #

    Xcode 7.0 or higher is required. You can install Xcode via the App Store or Apple developer downloads. This will install the Xcode IDE and Xcode Command Line Tools.

    While generally installed by default, you can verify that the Xcode Command Line Tools are installed by launching Xcode and selecting Xcode | Preferences | Locations and ensuring there is a version of the command line tools shown in the Command Line Tools list box. The Command Line Tools give you git, etc.

    Android Studio #

    Android Studio 2.0 or higher.

    Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type javac -version to see what version you have, if any. If you do not meet the JDK requirement, @@ -80,7 +80,7 @@ for writing, React Native applications.

    Get started with Nuclide here.

    Genymotion #

    Genymotion is an alternative to the stock Google emulator that comes with Android Studio. -However, it's only free for personal use. If you want to use the stock Google emulator, see below.

    1. Download and install Genymotion.
    2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
    3. Create a new emulator and start it.
    4. To bring up the developer menu press ⌘+M

    Troubleshooting #

    Virtual Device Not Created When Installing Android Studio #

    There is a known bug on some versions +However, it's only free for personal use. If you want to use Genymotion, see below.

    1. Download and install Genymotion.
    2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
    3. Create a new emulator and start it.
    4. To bring up the developer menu press ⌘+M

    Troubleshooting #

    Virtual Device Not Created When Installing Android Studio #

    There is a known bug on some versions of Android Studio where a virtual device will not be created, even though you selected it in the installation sequence. You may see this at the end of the installation:

    Creating Android virtual device Unable to create a virtual device: Unable to create Android virtual device

    If you see this, run android avd and create the virtual device manually.

    avd

    Then select the new device in the AVD Manager window and click Start....

    Shell Command Unresponsive Exception #

    If you encounter:

    Execution failed for task ':app:installDebug'. @@ -368,6 +368,6 @@ if (!foundHash) { apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/image.html b/docs/image.html index 16744175891..d4665936f11 100644 --- a/docs/image.html +++ b/docs/image.html @@ -1,4 +1,4 @@ -Image – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Image #

    		Edit on GitHub

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

    'contain': Scale the image uniformly (maintain the image's aspect ratio) 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
    borderBottomLeftRadius number
    borderBottomRightRadius number
    borderColor color
    borderRadius number
    borderTopLeftRadius number
    borderTopRightRadius number
    borderWidth number
    opacity number
    overflow enum('visible', 'hidden')
    resizeMode Object.keys(ImageResizeMode)
    tintColor color

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

    androidoverlayColor string

    When the image has rounded corners, specifying an overlayColor will +aspect ratio of the src.

    source ImageSourcePropType #

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

    style style #

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

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

    androidoverlayColor string

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

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

    Methods #

    static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void) #

    Retrieve the width and height (in pixels) of an image prior to displaying it. +Apple documentation

    iosdefaultSource {uri: string, width: number, height: number, scale: number}, 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}}

    Methods #

    static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void) #

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

    In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A proper, supported way to preload images will be provided as a separate API.

    static prefetch(url: string) #

    Prefetches a remote image for later use by downloading it to the disk -cache

    Examples #

    		Edit on GitHub
    'use strict'; +cache

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -532,7 +530,6 @@ exports.examples : function() { return <ImageSizeExample source={fullImage} />; }, - platform: 'ios', }, ]; @@ -607,6 +604,6 @@ exports.examples \ No newline at end of file diff --git a/docs/images.html b/docs/images.html index 0452be2952c..fa3a478cd70 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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:

    . ├── button.js └── img ├── check@2x.png @@ -17,7 +17,7 @@ // BAD <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

    Local Filesystem Images #

    See CameraRoll for an example of -using local resources that are outside of Images.xcassets.

    Best Camera Roll Image #

    iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.

    Why Not Automatically Size Everything? #

    In the browser if you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.

    In React Native this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or aspect ratio) of the remote image in advance, but we believe that it leads to a better user experience. Static images loaded from the app bundle via the require('./my-icon.png') syntax can be automatically sized because their dimensions are available immediately at the time of mounting.

    For example, the result of require('./my-icon.png') might be:

    {"__packager_asset":true,"path":"/Users/react/HelloWorld/my-icon.png","uri":"my-icon.png","width":591,"height":573}

    Source as an object #

    In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with an uri attribute.

    <Image source={{uri: 'something.jpg'}} />

    On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.

    On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.

    Background Image via Nesting #

    A common feature request from developers familiar with the web is background-image. To handle this use case, simply create a normal <Image> component and add whatever children to it you would like to layer on top of it.

    return ( +using local resources that are outside of Images.xcassets.

    Best Camera Roll Image #

    iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.

    Why Not Automatically Size Everything? #

    In the browser if you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.

    In React Native this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or aspect ratio) of the remote image in advance, but we believe that it leads to a better user experience. Static images loaded from the app bundle via the require('./my-icon.png') syntax can be automatically sized because their dimensions are available immediately at the time of mounting.

    For example, the result of require('./my-icon.png') might be:

    {"__packager_asset":true,"path":"/Users/react/HelloWorld/my-icon.png","uri":"my-icon.png","width":591,"height":573}

    Source as an object #

    In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with a uri attribute.

    <Image source={{uri: 'something.jpg'}} />

    On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.

    On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.

    Background Image via Nesting #

    A common feature request from developers familiar with the web is background-image. To handle this use case, simply create a normal <Image> component and add whatever children to it you would like to layer on top of it.

    return ( <Image source={...}> <Text>Inside</Text> </Image> @@ -37,6 +37,6 @@ using local resources that are outside of Images.xcassets.

    < apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/intentandroid.html b/docs/intentandroid.html index 4d6a04ab2c7..132108caeff 100644 --- a/docs/intentandroid.html +++ b/docs/intentandroid.html @@ -1,4 +1,4 @@ -IntentAndroid – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 access and handle it from any component you want with

    componentDidMount() { var url = IntentAndroid.getInitialURL(url => { if (url) { @@ -46,6 +46,6 @@ it will give the link url, otherwise it will give null

    Refer apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index 8bce6da1932..e689c8b04de 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    InteractionManager #

    		Edit on GitHub

    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... @@ -38,6 +38,6 @@ executed in one setImmediate batch (default).

    apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/javascript-environment.html b/docs/javascript-environment.html index a153d99d664..3196070fbd1 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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

    Specific

    • JSX: <View style={{color: 'red'}} />
    • Flow: function foo(x: ?number): string {}

    Polyfills #

    Many standards functions are also available on all the supported JavaScript runtimes.

    Browser

    ES6

    ES7

    Specific

    • __DEV__
    Next →

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

    Take Survey
    © 2016 Facebook Inc.
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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

    Specific

    • JSX: <View style={{color: 'red'}} />
    • Flow: function foo(x: ?number): string {}

    Polyfills #

    Many standards functions are also available on all the supported JavaScript runtimes.

    Browser

    ES6

    ES7

    Specific

    • __DEV__
    Next →

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

    Take Survey
    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/known-issues.html b/docs/known-issues.html index 8d3cb87e26a..cf6e323ff74 100644 --- a/docs/known-issues.html +++ b/docs/known-issues.html @@ -1,6 +1,6 @@ -Known Issues – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 Android Modules and Views #

    The work on React Native for Android started later than React Native for iOS. Most views and modules are now available on Android, with the following exceptions:

    Views #

    • Maps - Please use Leland Richardson's react-native-maps as it is more feature-complete than our internal implementation.

    Modules #

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

    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}> +Known Issues – React Native | A framework for building native apps using React
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 Android Modules and Views #

    The work on React Native for Android started later than React Native for iOS. Most views and modules are now available on Android, with the following exceptions:

    Views #

    • Maps - Please use Leland Richardson's react-native-maps as it is more feature-complete than our internal implementation.

    Modules #

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

    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 underlineColorAndroid to transparent.

    Next →

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

    Take Survey
    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index 951347d2f46..347eaa7d243 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,9 +1,9 @@ -LayoutAnimation – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    LayoutAnimation #

    		Edit on GitHub

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

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

    Helper for creating a config for configureNext.

    Properties #

    Types: CallExpression #

    Properties: CallExpression #

    configChecker: CallExpression #

    Presets: ObjectExpression #

    easeInEaseOut: CallExpression #

    linear: CallExpression #

    spring: CallExpression #

    Examples #

    		Edit on GitHub
    'use strict'; +@param onError Called on error. Only supported on iOS.

    static create(duration, type, creationProp) #

    Helper for creating a config for configureNext.

    Properties #

    Types: CallExpression #

    Properties: CallExpression #

    configChecker: CallExpression #

    Presets: ObjectExpression #

    easeInEaseOut: CallExpression #

    linear: CallExpression #

    spring: CallExpression #

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('react'); const ReactNative = require('react-native'); @@ -150,12 +150,12 @@ exports.title .description = 'Layout animation'; exports.examples = [{ title: 'Add and remove views', - render(): ReactElement { + render(): ReactElement<any> { return <AddRemoveExample />; }, }, { title: 'Cross fade views', - render(): ReactElement { + render(): ReactElement<any> { return <CrossFadeExample />; }, }];
    Next →

    Run this example

    Run example in simulator

    Powered by appetize.io

    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/linking-libraries-ios.html b/docs/linking-libraries-ios.html index 03954e46b19..0ece13c27db 100644 --- a/docs/linking-libraries-ios.html +++ b/docs/linking-libraries-ios.html @@ -1,4 +1,4 @@ -Linking Libraries – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 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 @@ -13,7 +13,7 @@ on Xcode);

    Step 3 #

    Not every library will need this step, what you need to consider is:

    Do I need to know the contents of the library at compile time?

    What that means is, are you using this library on the native side or only in JavaScript? If you are only using it in JavaScript, you are good to go!

    This step is not necessary for libraries that we ship with React Native with the -exception of PushNotificationIOS and LinkingIOS.

    In the case of the PushNotificationIOS for example, you have to call a method +exception of PushNotificationIOS and Linking.

    In the case of the PushNotificationIOS for example, you have to call a method on the library from your AppDelegate every time a new push notification is received.

    For that we need to know the library's headers. To achieve that you have to go to your project's file, select Build Settings and search for Header Search @@ -35,6 +35,6 @@ example).

    \ No newline at end of file diff --git a/docs/linking.html b/docs/linking.html index 7af725e6b2a..4e25dea12ec 100644 --- a/docs/linking.html +++ b/docs/linking.html @@ -1,4 +1,4 @@ -Linking – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Linking #

    		Edit on GitHub

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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) => { @@ -7,7 +7,12 @@ access and handle it from any component you want with

    } }).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: On iOS you'll need to link RCTLinking to your project by following +refer to Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links.

    If you wish to receive the intent in an existing instance of MainActivity, +you may set the launchMode of MainActivity to singleTask in +AndroidManifest.xml. See <activity> +documentation for more information.

    <activity + android:name=".MainActivity" + android:launchMode="singleTask">

    NOTE: On iOS you'll need to link RCTLinking to your project by following the steps described here. 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:

    #import "RCTLinkingManager.h" @@ -35,18 +40,18 @@ execution you'll need to add the following lines to you *AppDelegate. }, _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 => { +}

    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, handler) #

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

    @platform ios

    static removeEventListener(type, handler) #

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

    @platform ios

    static openURL(url) #

    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, +}).catch(err => console.error('An error occurred', err));

    Methods #

    constructor() #

    addEventListener(type, handler) #

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

    removeEventListener(type, handler) #

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

    openURL(url) #

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

    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

    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!

    canOpenURL(url) #

    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 or canOpenURL will always return false.

    @param URL the URL to open

    getInitialURL() #

    If the app launch was triggered by an app link, +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

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -54,7 +59,7 @@ it will give the link url, otherwise it will give null

    NOTE: Linking, StyleSheet, Text, - TouchableNativeFeedback, + TouchableOpacity, View, } = ReactNative; var UIExplorerBlock = require('./UIExplorerBlock'); @@ -77,12 +82,12 @@ it will give the link url, otherwise it will give null

    NOTE: render: function() { return ( - <TouchableNativeFeedback + <TouchableOpacity onPress={this.handleClick}> <View style={styles.button}> <Text style={styles.text}>Open {this.props.url}</Text> </View> - </TouchableNativeFeedback> + </TouchableOpacity> ); } }); @@ -125,7 +130,7 @@ it will give the link url, otherwise it will give null

    NOTE: }, }); -module.exports = IntentAndroidExample;

    Next →

    Run this example

    Run example in simulator

    Powered by appetize.io

    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/linkingios.html b/docs/linkingios.html deleted file mode 100644 index 06d8c30547f..00000000000 --- a/docs/linkingios.html +++ /dev/null @@ -1,57 +0,0 @@ -LinkingIOS – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 -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(); -}

    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 [RCTLinkingManager 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 [RCTLinkingManager application:application - continueUserActivity:userActivity - restorationHandler:restorationHandler]; -}

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

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

    Triggering App links #

    To trigger an app link (browser, email or custom schemas), call

    LinkingIOS.openURL(url)

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

    LinkingIOS.canOpenURL(url, (supported) => { - if (!supported) { - AlertIOS.alert('Can\'t handle url: ' + url); - } else { - LinkingIOS.openURL(url); - } -});

    Methods #

    static addEventListener(type, handler) #

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

    @deprecated

    static removeEventListener(type, handler) #

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

    @deprecated

    static openURL(url) #

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

    @deprecated

    static canOpenURL(url, callback) #

    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 →
    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/listview.html b/docs/listview.html index ced10751958..4429a8ba9a6 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -1,4 +1,4 @@ -ListView – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ListView #

    		Edit on GitHub

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

    Methods #

    getMetrics() #

    Exports some data, e.g. for perf investigations or analytics.

    scrollTo(...args) #

    Scrolls to a given x, y offset, either immediately or with a smooth animation.

    See ScrollView#scrollTo.

    Examples #

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

    Methods #

    getMetrics() #

    Exports some data, e.g. for perf investigations or analytics.

    scrollTo(...args) #

    Scrolls to a given x, y offset, either immediately or with a smooth animation.

    See ScrollView#scrollTo.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -224,6 +224,6 @@ module.exports \ No newline at end of file diff --git a/docs/listviewdatasource.html b/docs/listviewdatasource.html index 863bd5089b5..cdb1174b007 100644 --- a/docs/listviewdatasource.html +++ b/docs/listviewdatasource.html @@ -1,4 +1,4 @@ -ListViewDataSource – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ListViewDataSource #

    		Edit on GitHub

    Provides efficient data processing and access to the +ListViewDataSource – React Native | A framework for building native apps using React

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ListViewDataSource #

    		Edit on GitHub

    Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an @@ -26,7 +26,7 @@ headers and rows. If absent, data will be extracted with the following:

    • getRowData(dataBlob, sectionID, rowID);
    • getSectionHeaderData(dataBlob, sectionID);
    • rowHasChanged(prevRowData, nextRowData);
    • sectionHeaderHasChanged(prevSectionData, nextSectionData);

    cloneWithRows(dataBlob, rowIdentities) #

    Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined -(or the default was used).

    The rowIdentities is is a 2D array of identifiers for rows. +(or the default was used).

    The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.

    Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with @@ -54,6 +54,6 @@ or null for out of range indexes.

    \ No newline at end of file diff --git a/docs/mapview.html b/docs/mapview.html index ef3a966b6dc..3245ad98738 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 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 @@ -29,7 +29,7 @@ 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: [object Object], lineWidth: number, strokeColor: [object Object], fillColor: [object Object], 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.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -437,6 +437,6 @@ exports.examples \ No newline at end of file diff --git a/docs/modal.html b/docs/modal.html index ea9564aae3d..6f72f60a3fc 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Modal #

    		Edit on GitHub

    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.

    Props #

    animated bool #

    Deprecated

    Use the animationType prop instead.

    animationType enum('none', 'slide', 'fade') #

    onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

    onShow function #

    transparent bool #

    visible bool #

    Examples #

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

    Props #

    animated bool #

    Deprecated

    Use the animationType prop instead.

    animationType enum('none', 'slide', 'fade') #

    onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

    onShow function #

    transparent bool #

    visible bool #

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -191,6 +191,6 @@ exports.examples \ No newline at end of file diff --git a/docs/native-components-android.html b/docs/native-components-android.html index c10da1f8e29..3babd6de8cb 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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.

    ... public class ReactImageManager extends SimpleViewManager<ReactImageView> { @@ -97,6 +97,6 @@ MyCustomView.propTypes \ No newline at end of file diff --git a/docs/native-components-ios.html b/docs/native-components-ios.html index 12062e5ad80..bd4c2ad8d92 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 #import <MapKit/MapKit.h> #import "RCTViewManager.h" @@ -263,6 +263,6 @@ import { UIManager \ No newline at end of file diff --git a/docs/native-modules-android.html b/docs/native-modules-android.html index a3e2c18a4ef..2aec12f52c6 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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; import android.widget.Toast; @@ -279,6 +279,6 @@ public void onHostDestroy \ No newline at end of file diff --git a/docs/native-modules-ios.html b/docs/native-modules-ios.html index 9ab11dc940a..516ce327217 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 #import "RCTBridgeModule.h" @interface CalendarManager : NSObject <RCTBridgeModule> @@ -152,6 +152,6 @@ class CalendarManager \ No newline at end of file diff --git a/docs/nativemethodsmixin.html b/docs/nativemethodsmixin.html index 9adf354df8d..0534efc31fb 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NativeMethodsMixin #

    		Edit on GitHub

    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 @@ -35,6 +35,6 @@ will depend on the platform and type of view.

    < apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/navigator-comparison.html b/docs/navigator-comparison.html index 768b76d0b2c..d85fcbbbfd1 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Navigator Comparison #

    		Edit on GitHub

    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 @@ -28,6 +28,6 @@ between the two.

    Navigator \ No newline at end of file diff --git a/docs/navigator.html b/docs/navigator.html index ffaeeb8aa07..f7d84c32551 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Navigator #

    		Edit on GitHub

    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 @@ -54,6 +54,6 @@ All scenes after it will be unmounted.

    \ No newline at end of file diff --git a/docs/navigatorios.html b/docs/navigatorios.html index 514fd3634c5..7403448ec85 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -NavigatorIOS – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NavigatorIOS #

    		Edit on GitHub

    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 @@ -136,7 +136,7 @@ load the view for the new route.

    #

    Replaces the top item and popToTop

    Examples #

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

    Replaces the top item and popToTop

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('react'); const ReactNative = require('react-native'); @@ -397,6 +397,6 @@ module.exports \ No newline at end of file diff --git a/docs/netinfo.html b/docs/netinfo.html index e8f45e0c571..2b29355f095 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    NetInfo #

    		Edit on GitHub

    NetInfo exposes info about online/offline status

    NetInfo.fetch().done((reach) => { console.log('Initial: ' + reach); }); function handleFirstConnectivityChange(reach) { @@ -40,7 +40,7 @@ The listener receives one of the connectivity types listed above.

    static isConnectionExpensive() #

    Properties #

    isConnected: ObjectExpression #

    An object with the same methods as above but the listener receives a boolean which represents the internet connectivity. Use this if you are only interested with whether the device has internet -connectivity.

    Examples #

    		Edit on GitHub
    'use strict'; +connectivity.

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('react'); const ReactNative = require('react-native'); @@ -189,23 +189,23 @@ exports.examples { title: 'NetInfo.isConnected', description: 'Asynchronously load and observe connectivity', - render(): ReactElement { return <IsConnected />; } + render(): ReactElement<any> { return <IsConnected />; } }, { title: 'NetInfo.update', description: 'Asynchronously load and observe connectionInfo', - render(): ReactElement { return <ConnectionInfoCurrent />; } + render(): ReactElement<any> { return <ConnectionInfoCurrent />; } }, { title: 'NetInfo.updateHistory', description: 'Observed updates to connectionInfo', - render(): ReactElement { return <ConnectionInfoSubscription />; } + render(): ReactElement<any> { return <ConnectionInfoSubscription />; } }, { platform: 'android', title: 'NetInfo.isConnectionExpensive (Android)', description: 'Asynchronously check isConnectionExpensive', - render(): ReactElement { return <IsConnectionExpensive />; } + render(): ReactElement<any> { return <IsConnectionExpensive />; } }, ];
    Next →

    Run this example

    Run example in simulator

    Powered by appetize.io

    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/network.html b/docs/network.html index 3992de0d561..32fddf8bd4b 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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/', { method: 'POST', headers: { 'Accept': 'application/json', @@ -48,7 +48,7 @@ ws.onerror = ws.onclose = (e) => { // connection closed console.log(e.code, e.reason); -};

    XMLHttpRequest #

    XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.

    var request = new XMLHttpRequest(); +};

    XMLHttpRequest #

    XMLHttpRequest API is implemented on-top of iOS networking apis and OkHttp. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.

    var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; @@ -99,6 +99,6 @@ request.send apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/panresponder.html b/docs/panresponder.html index 03f5ba34f10..3a8c2064c75 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PanResponder #

    		Edit on GitHub

    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.

    By default, PanResponder holds an `InteractionManager handle to block long-running JS events from interrupting active gestures.

    It provides a predictable wrapper of the responder handlers provided by the @@ -58,7 +58,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.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -193,6 +193,6 @@ module.exports \ No newline at end of file diff --git a/docs/performance.html b/docs/performance.html index 6aa3fff2445..9d1f106f658 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Performance #

    		Edit on GitHub

    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 @@ -200,6 +200,6 @@ learn to use systrace.

    \ No newline at end of file diff --git a/docs/picker.html b/docs/picker.html index 53e1d1fc01e..8d052e5fc10 100644 --- a/docs/picker.html +++ b/docs/picker.html @@ -1,4 +1,4 @@ -Picker – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Picker #

    		Edit on GitHub

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

    <Picker +Picker – React Native | A framework for building native apps using React
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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" /> @@ -6,7 +6,7 @@ </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.

    Examples #

    		Edit on GitHub
    'use strict'; +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.

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('react'); const ReactNative = require('react-native'); @@ -145,6 +145,6 @@ module.exports \ No newline at end of file diff --git a/docs/pickerios.html b/docs/pickerios.html index 5d61597e27f..eb0a4f951c6 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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'; var React = require('react'); var ReactNative = require('react-native'); @@ -129,13 +129,13 @@ exports.description .examples = [ { title: '<PickerIOS>', - render: function(): ReactElement { + render: function(): ReactElement<any> { return <PickerExample />; }, }, { title: '<PickerIOS> with custom styling', - render: function(): ReactElement { + render: function(): ReactElement<any> { return <PickerStyleExample />; }, }];
    Next →

    Run this example

    Run example in simulator

    Powered by appetize.io

    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/pixelratio.html b/docs/pixelratio.html index 5d6f280d7c8..15b13fb58a2 100644 --- a/docs/pixelratio.html +++ b/docs/pixelratio.html @@ -1,4 +1,4 @@ -PixelRatio – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

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

    Guaranteed to return an integer number.

    static roundToNearestPixel(layoutSize) #

    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 →
    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/platform-specific-code.html b/docs/platform-specific-code.html index 726b7dc6a41..ae162205325 100644 --- a/docs/platform-specific-code.html +++ b/docs/platform-specific-code.html @@ -1,13 +1,13 @@ -Platform Specific Code – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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/ /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 -BigButton.android.js

    With this setup, you can just require the files from a different component without paying attention to the platform in which the app will run.

    import BigButton from './components/BigButton';

    React Native will import the correct component for the running platform.

    Platform module #

    A module is provided by React Native to detect what is the platform in which the app is running. This piece of functionality can be useful when only small parts of a component are platform specific.

    var { Platform } = React; +BigButton.android.js

    With this setup, you can just require the files from a different component without paying attention to the platform in which the app will run.

    import BigButton from './components/BigButton';

    React Native will import the correct component for the running platform.

    Platform module #

    A module is provided by React Native to detect what is the platform in which the app is running. This piece of functionality can be useful when only small parts of a component are platform specific.

    var { Platform } = ReactNative; var styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, });

    Platform.OS will be ios when running in iOS and android when running in an Android device or simulator.

    There is also a Platform.select method available, that given an object containing Platform.OS as keys, -returns the value for the platform you are currently running on.

    var { Platform } = React; +returns the value for the platform you are currently running on.

    var { Platform } = ReactNative; var styles = StyleSheet.create({ container: { @@ -27,7 +27,7 @@ on Android.

    Since it accepts any value, you can also use it t android: () => require('ComponentAndroid'), })(); -<Component />;

    Detecting Android version #

    On Android, the Platform module can be also used to detect which is the version of the Android Platform in which the app is running

    var {Platform} = React; +<Component />;

    Detecting Android version #

    On Android, the Platform module can be also used to detect which is the version of the Android Platform in which the app is running

    var {Platform} = ReactNative; if(Platform.Version === 21){ console.log('Running on Lollipop!'); @@ -47,6 +47,6 @@ on Android.

    Since it accepts any value, you can also use it t apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/progressbarandroid.html b/docs/progressbarandroid.html index 4b938dd0d88..92d69164fe8 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 that the app is loading or there is some activity in the app.

    Example:

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

    Example:

    /> ); },

    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'; +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'; var ProgressBar = require('ProgressBarAndroid'); var React = require('React'); @@ -49,41 +49,12 @@ can only be false if styleAttr is Horizontal.

    < statics: { title: '<ProgressBarAndroid>', - description: 'Visual indicator of progress of some operation. ' + - 'Shows either a cyclic animation or a horizontal bar.', + description: 'Horizontal bar to show the progress of some operation.', }, render: function() { return ( <UIExplorerPage title="ProgressBar Examples"> - <UIExplorerBlock title="Default ProgressBar"> - <ProgressBar /> - </UIExplorerBlock> - - <UIExplorerBlock title="Normal ProgressBar"> - <ProgressBar styleAttr="Normal" /> - </UIExplorerBlock> - - <UIExplorerBlock title="Small ProgressBar"> - <ProgressBar styleAttr="Small" /> - </UIExplorerBlock> - - <UIExplorerBlock title="Large ProgressBar"> - <ProgressBar styleAttr="Large" /> - </UIExplorerBlock> - - <UIExplorerBlock title="Inverse ProgressBar"> - <ProgressBar styleAttr="Inverse" /> - </UIExplorerBlock> - - <UIExplorerBlock title="Small Inverse ProgressBar"> - <ProgressBar styleAttr="SmallInverse" /> - </UIExplorerBlock> - - <UIExplorerBlock title="Large Inverse ProgressBar"> - <ProgressBar styleAttr="LargeInverse" /> - </UIExplorerBlock> - <UIExplorerBlock title="Horizontal Indeterminate ProgressBar"> <ProgressBar styleAttr="Horizontal" /> </UIExplorerBlock> @@ -92,10 +63,6 @@ can only be false if styleAttr is Horizontal.

    < <MovingBar styleAttr="Horizontal" indeterminate={false} /> </UIExplorerBlock> - <UIExplorerBlock title="Large Red ProgressBar"> - <ProgressBar styleAttr="Large" color="red" /> - </UIExplorerBlock> - <UIExplorerBlock title="Horizontal Black Indeterminate ProgressBar"> <ProgressBar styleAttr="Horizontal" color="black" /> </UIExplorerBlock> @@ -124,6 +91,6 @@ module.exports \ No newline at end of file diff --git a/docs/progressviewios.html b/docs/progressviewios.html index 6709d19368b..1a9d11a848e 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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'; var React = require('react'); var ReactNative = require('react-native'); @@ -83,6 +83,6 @@ exports.examples \ No newline at end of file diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html index 94d6304b8f5..580c19ca431 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    PushNotificationIOS #

    		Edit on GitHub

    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 @@ -26,21 +26,24 @@ in the userInfo argument.

    Valid events are:

    • notification : Fired when a remote notification is received. The handler will be invoked with an instance of PushNotificationIOS.
    • localNotification : Fired when a local notification is received. The handler will be invoked with an instance of PushNotificationIOS.
    • register: Fired when the user registers for remote notifications. The -handler will be invoked with a hex string representing the deviceToken.

    static requestPermissions(permissions?) #

    Requests notification permissions from iOS, prompting the user's +handler will be invoked with a hex string representing the deviceToken.

    static removeEventListener(type, handler) #

    Removes the event listener. Do this in componentWillUnmount to prevent +memory leaks

    static requestPermissions(permissions?) #

    Requests notification permissions from iOS, prompting the user's dialog box. By default, it will request all notification permissions, but a subset of these can be requested by passing a map of requested permissions. The following permissions are supported:

    • alert
    • badge
    • sound

    If a map is provided to the method, only the permissions with truthy values -will be requested.

    static abandonPermissions() #

    Unregister for all remote notifications received via Apple Push Notification service.

    You should call this method in rare circumstances only, such as when a new version of +will be requested.

    This method returns a promise that will resolve when the user accepts, +rejects, or if the permissions were previously rejected. The promise +resolves to the current state of the permission.

    static abandonPermissions() #

    Unregister for all remote notifications received via Apple Push Notification service.

    You should call this method in rare circumstances only, such as when a new version of the app removes support for all types of remote notifications. Users can temporarily prevent apps from receiving remote notifications through the Notifications section of the Settings app. Apps unregistered through this method can always re-register.

    static checkPermissions(callback) #

    See what push permissions are currently enabled. callback will be -invoked with a permissions object:

    • alert :boolean
    • badge :boolean
    • sound :boolean

    static removeEventListener(type, handler) #

    Removes the event listener. Do this in componentWillUnmount to prevent -memory leaks

    static popInitialNotification() #

    An initial notification will be available if the app was cold-launched -from a notification.

    The first caller of popInitialNotification will get the initial -notification object, or null. Subsequent invocations will return null.

    constructor(nativeNotif) #

    You will never need to instantiate PushNotificationIOS yourself. +invoked with a permissions object:

    • alert :boolean
    • badge :boolean
    • sound :boolean

    static popInitialNotification() #

    DEPRECATED: An initial notification will be available if the app was +cold-launched from a notification.

    The first caller of popInitialNotification will get the initial +notification object, or null. Subsequent invocations will return null.

    static getInitialNotification() #

    If the app launch was triggered by a push notification, +it will give the notification object, otherwise it will give null

    constructor(nativeNotif) #

    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

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -189,7 +192,7 @@ exports.description .examples = [ { title: 'Badge Number', - render(): ReactElement { + render(): ReactElement<any> { PushNotificationIOS.requestPermissions(); return ( @@ -208,13 +211,13 @@ exports.examples }, { title: 'Push Notifications', - render(): ReactElement { + render(): ReactElement<any> { return <NotificationExample />; } }, { title: 'Notifications Permissions', - render(): ReactElement { + render(): ReactElement<any> { return <NotificationPermissionExample />; } }];
    Next →

    Run this example

    Run example in simulator

    Powered by appetize.io

    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/refreshcontrol.html b/docs/refreshcontrol.html index 79e514671f2..f525b66ae38 100644 --- a/docs/refreshcontrol.html +++ b/docs/refreshcontrol.html @@ -1,4 +1,4 @@ -RefreshControl – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    RefreshControl #

    		Edit on GitHub

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    RefreshControl #

    		Edit on GitHub

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

    Usage example #

    class RefreshableList extends Component { constructor(props) { @@ -32,7 +32,7 @@ triggers an onRefresh event.

    } ... }

    Note: refreshing is a controlled prop, this is why it needs to be set to true -in the onRefresh function otherwise the refresh indicator will stop immediatly.

    Props #

    View props... #

    onRefresh function #

    Called when the view starts refreshing.

    refreshing bool #

    Whether the view should be indicating an active refresh.

    androidcolors [color] #

    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.

    androidprogressViewOffset number #

    Progress view top offset

    androidsize enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) #

    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.

    iostitleColor color #

    Title color.

    Examples #

    		Edit on GitHub
    'use strict'; +in the onRefresh function otherwise the refresh indicator will stop immediatly.

    Props #

    View props... #

    onRefresh function #

    Called when the view starts refreshing.

    refreshing bool #

    Whether the view should be indicating an active refresh.

    androidcolors [color] #

    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.

    androidprogressViewOffset number #

    Progress view top offset

    androidsize enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) #

    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.

    iostitleColor color #

    Title color.

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('react'); const ReactNative = require('react-native'); @@ -160,6 +160,6 @@ module.exports \ No newline at end of file diff --git a/docs/running-on-device-android.html b/docs/running-on-device-android.html index 51d4827c05e..578e178cfd6 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Setting up an Android Device #

    Let's now set up an Android device to run our React Native projects.

    First thing is to plug in your device and check the manufacturer code by using lsusb, which should output something like this:

    $ lsusb @@ -31,6 +31,6 @@ TA9300GLMK device

    \ No newline at end of file diff --git a/docs/running-on-device-ios.html b/docs/running-on-device-ios.html index c1d81188db0..fb41d17566d 100644 --- a/docs/running-on-device-ios.html +++ b/docs/running-on-device-ios.html @@ -1,4 +1,4 @@ -Running On Device – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 →

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

    Take Survey
    © 2016 Facebook Inc.
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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. Temporarily disable App Transport Security (ATS) by adding the NSAllowsArbitraryLoads entry to your Info.plist file. Since ATS does not allow insecure HTTP requests to IP addresses, you must completely disable it to run on a device. This is only a requirement for development on a device, and unless you can't workaround an issue you should leave ATS enabled for production builds. For more information, see this post on configuring ATS.
    4. 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 →

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

    Take Survey
    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/sample-application-movies.html b/docs/sample-application-movies.html index f02d9606b8f..cd0faf0786a 100644 --- a/docs/sample-application-movies.html +++ b/docs/sample-application-movies.html @@ -1,4 +1,4 @@ -Movie Fetcher – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Movie Fetcher #

    		Edit on GitHub

    Overview #

    In this tutorial we'll be building a simple version of a Movies app that fetches 25 movies that are in theaters and displays them in a ListView.

    Setup #

    This sample application requires the basic setup explained at +Movie Fetcher – React Native | A framework for building native apps using React

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Movie Fetcher #

    		Edit on GitHub

    Overview #

    In this tutorial we'll be building a simple version of a Movies app that fetches 25 movies that are in theaters and displays them in a ListView.

    Setup #

    This sample application 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 SampleAppMovies

      This command fetches the React Native source code and dependencies and then creates a new Xcode project in SampleAppMovies/iOS/SampleAppMovies.xcodeproj and a gradle project in SampleAppMovies/android/app.

    Starting the app on iOS #

    Open this new project (SampleAppMovies/ios/SampleAppMovies.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.

    Starting the app on Android #

    In your terminal navigate into the SampleAppMovies and run:

    react-native run-android

    This will install the generated app on your emulator or device, as well as 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.

    Hello World #

    react-native init will generate an app with the name of your project, in this case SampleAppMovies. 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.

    Actual App #

    Now that we have initialized our React Native project, we can begin creating our Movie application.

    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 = [ {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, { @@ -312,6 +312,6 @@ AppRegistry. apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/scrollview.html b/docs/scrollview.html index 2b3701b220d..e67c6f9e368 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -1,4 +1,4 @@ -ScrollView – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ScrollView #

    		Edit on GitHub

    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 @@ -70,7 +70,7 @@ for UIScrollViewDecelerationRateNormal and 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.

    iosscrollEventThrottle number #

    This controls how often the scroll event will be fired while scrolling + - 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.

    iosonScrollAnimationEnd function #

    Called when a scrolling animation ends.

    iosscrollEventThrottle number #

    This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower 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. @@ -92,9 +92,9 @@ with snapToAlignment.

    ioszoomScale number #

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

    Methods #

    endRefreshing() #

    Deprecated. Use RefreshControl instead.

    scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) #

    Scrolls to a given x, y offset, either immediately or with a smooth animation.

    Syntax:

    scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})

    Note: The weird argument signature is due to the fact that, for historical reasons, +with horizontal={true}.

    ioszoomScale number #

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

    Methods #

    scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) #

    Scrolls to a given x, y offset, either immediately or with a smooth animation.

    Syntax:

    scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})

    Note: The weird argument signature is due to the fact that, for historical reasons, the function also accepts separate arguments as as alternative to the options object. -This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.

    scrollWithoutAnimationTo(y, x) #

    Deprecated, do not use.

    Examples #

    		Edit on GitHub
    'use strict'; +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.

    scrollWithoutAnimationTo(y, x) #

    Deprecated, do not use.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -228,6 +228,6 @@ THUMBS = THUMBS \ No newline at end of file diff --git a/docs/segmentedcontrolios.html b/docs/segmentedcontrolios.html index 76158e39885..77cac4ba943 100644 --- a/docs/segmentedcontrolios.html +++ b/docs/segmentedcontrolios.html @@ -1,4 +1,4 @@ -SegmentedControlIOS – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    SegmentedControlIOS #

    		Edit on GitHub

    Use SegmentedControlIOS to render a UISegmentedControl iOS.

    Programmatically changing selected index #

    The selected index can be changed on the fly by assigning the +SegmentedControlIOS – React Native | A framework for building native apps using React

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    SegmentedControlIOS #

    		Edit on GitHub

    Use SegmentedControlIOS to render a UISegmentedControl iOS.

    Programmatically changing selected index #

    The selected index can be changed on the fly by assigning the selectIndex prop to a state variable, then changing that variable. Note that the state variable would need to be updated as the user selects a value and changes the index, as shown in the example below.

    <SegmentedControlIOS @@ -11,7 +11,7 @@ selects a value and changes the index, as shown in the example below.

    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.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -143,27 +143,27 @@ exports.description .examples = [ { title: 'Segmented controls can have values', - render(): ReactElement { return <BasicSegmentedControlExample />; } + render(): ReactElement<any> { return <BasicSegmentedControlExample />; } }, { title: 'Segmented controls can have a pre-selected value', - render(): ReactElement { return <PreSelectedSegmentedControlExample />; } + render(): ReactElement<any> { return <PreSelectedSegmentedControlExample />; } }, { title: 'Segmented controls can be momentary', - render(): ReactElement { return <MomentarySegmentedControlExample />; } + render(): ReactElement<any> { return <MomentarySegmentedControlExample />; } }, { title: 'Segmented controls can be disabled', - render(): ReactElement { return <DisabledSegmentedControlExample />; } + render(): ReactElement<any> { return <DisabledSegmentedControlExample />; } }, { title: 'Custom colors can be provided', - render(): ReactElement { return <ColorSegmentedControlExample />; } + render(): ReactElement<any> { return <ColorSegmentedControlExample />; } }, { title: 'Change events can be detected', - render(): ReactElement { return <EventSegmentedControlExample />; } + render(): ReactElement<any> { return <EventSegmentedControlExample />; } } ];
    Next →

    Run this example

    Run example in simulator

    Powered by appetize.io

    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/shadowproptypesios.html b/docs/shadowproptypesios.html index 83e5717c51c..7a57edf5b53 100644 --- a/docs/shadowproptypesios.html +++ b/docs/shadowproptypesios.html @@ -1,4 +1,4 @@ -ShadowPropTypesIOS – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ShadowPropTypesIOS #

    		Edit on GitHub

    Props #

    shadowColor color #

    shadowOffset {width: number, height: number} #

    shadowOpacity number #

    shadowRadius number #

    Next →
    © 2016 Facebook Inc.
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    ShadowPropTypesIOS #

    		Edit on GitHub

    Props #

    shadowColor color #

    shadowOffset {width: number, height: number} #

    shadowOpacity number #

    shadowRadius number #

    Next →
    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/signed-apk-android.html b/docs/signed-apk-android.html index 612e990b419..c7bb9c3468b 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Generating Signed APK #

    		Edit on GitHub

    Android requires that all apps be digitally signed with a certificate before they can be installed, so 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.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Generating Signed APK #

    		Edit on GitHub

    Android requires that all apps be digitally signed with a certificate before they can be installed, so 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 about saving the keystore: Once you publish the app on the Play Store, you will need to republish your app under a different package name (losing 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.

    Note about security: If you are not keen on storing your passwords in plaintext and you are running OSX, you can also store your credentials in the Keychain Access app. Then you can skip the two last rows in ~/.gradle/gradle.properties.

    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,

    ... @@ -39,6 +39,6 @@ def enableProguardInReleaseBuilds = \ No newline at end of file diff --git a/docs/slider.html b/docs/slider.html index 3485b890995..a5a685928a7 100644 --- a/docs/slider.html +++ b/docs/slider.html @@ -1,4 +1,4 @@ -Slider – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Slider #

    		Edit on GitHub

    A component used to select a single value from a range of values.

    Props #

    View props... #

    disabled bool #

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Slider #

    		Edit on GitHub

    A component used to select a single value from a range of values.

    Props #

    View props... #

    disabled bool #

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

    maximumValue number #

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

    minimumValue number #

    Initial minimum value of the slider. Default value is 0.

    onSlidingComplete function #

    Callback called when the user finishes changing the value (e.g. when the slider is released).

    onValueChange function #

    Callback continuously called while the user is dragging the slider.

    step number #

    Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). @@ -11,7 +11,7 @@ leftmost pixel of the image will be stretched to fill the track.

    default blue gradient image.

    iosminimumTrackImage Image.propTypes.source #

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

    iosminimumTrackTintColor string #

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

    iosthumbImage Image.propTypes.source #

    Sets an image for the thumb. Only static images are supported.

    iostrackImage Image.propTypes.source #

    Assigns a single image for the track. Only static images are supported. -The center pixel of the image will be stretched to fill the track.

    Examples #

    		Edit on GitHub
    'use strict'; +The center pixel of the image will be stretched to fill the track.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -92,19 +92,19 @@ exports.description .examples = [ { title: 'Default settings', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample />; } }, { title: 'Initial value: 0.5', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample value={0.5} />; } }, { title: 'minimumValue: -1, maximumValue: 2', - render(): ReactElement { + render(): ReactElement<any> { return ( <SliderExample minimumValue={-1} @@ -115,13 +115,13 @@ exports.examples }, { title: 'step: 0.25', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample step={0.25} />; } }, { title: 'onSlidingComplete', - render(): ReactElement { + render(): ReactElement<any> { return ( <SlidingCompleteExample /> ); @@ -130,7 +130,7 @@ exports.examples { title: 'Custom min/max track tint color', platform: 'ios', - render(): ReactElement { + render(): ReactElement<any> { return ( <SliderExample minimumTrackTintColor={'red'} @@ -142,21 +142,21 @@ exports.examples { title: 'Custom thumb image', platform: 'ios', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample thumbImage={require('./uie_thumb_big.png')} />; } }, { title: 'Custom track image', platform: 'ios', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample trackImage={require('./slider.png')} />; } }, { title: 'Custom min/max track image', platform: 'ios', - render(): ReactElement { + render(): ReactElement<any> { return ( <SliderExample minimumTrackImage={require('./slider-left.png')} @@ -181,6 +181,6 @@ exports.examples \ No newline at end of file diff --git a/docs/sliderios.html b/docs/sliderios.html index 7a0482c698b..eb28a1bb55a 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    SliderIOS #

    		Edit on GitHub

    Note: SliderIOS is deprecated and will be removed in the future. Use the cross-platform +SliderIOS – React Native | A framework for building native apps using React

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    SliderIOS #

    		Edit on GitHub

    Note: SliderIOS is deprecated and will be removed in the future. Use the cross-platform Slider as a drop-in replacement with the same API.

    An iOS-specific component used to select a single value from a range of values.

    Props #

    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 @@ -12,7 +12,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.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -63,13 +63,13 @@ exports.description .examples = [ { title: 'Default settings', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample />; } }, { title: 'minimumValue: -1, maximumValue: 2', - render(): ReactElement { + render(): ReactElement<any> { return ( <SliderExample minimumValue={-1} @@ -80,13 +80,13 @@ exports.examples }, { title: 'step: 0.25', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample step={0.25} />; } }, { title: 'Custom min/max track tint color', - render(): ReactElement { + render(): ReactElement<any> { return ( <SliderExample minimumTrackTintColor={'red'} @@ -97,19 +97,19 @@ exports.examples }, { title: 'Custom thumb image', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample thumbImage={require('./uie_thumb_big.png')} />; } }, { title: 'Custom track image', - render(): ReactElement { + render(): ReactElement<any> { return <SliderExample trackImage={require('./slider.png')} />; } }, { title: 'Custom min/max track image', - render(): ReactElement { + render(): ReactElement<any> { return ( <SliderExample minimumTrackImage={require('./slider-left.png')} @@ -134,6 +134,6 @@ exports.examples \ No newline at end of file diff --git a/docs/statusbar.html b/docs/statusbar.html index 5b81f733acd..d02286cc99d 100644 --- a/docs/statusbar.html +++ b/docs/statusbar.html @@ -1,4 +1,4 @@ -StatusBar – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 @@ -22,7 +22,7 @@ the next render.

    Props

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

    Methods #

    static setHidden(hidden: boolean, animation: 'none' | 'fade' | 'slide') #

    static setBarStyle(style: 'default' | 'light-content', animated: boolean) #

    static setNetworkActivityIndicatorVisible(visible: boolean) #

    static setBackgroundColor(color: string, animated: boolean) #

    static setTranslucent(translucent: boolean) #

    Examples #

    		Edit on GitHub
    'use strict'; +prop. Defaults to 'fade'.

    Methods #

    static setHidden(hidden: boolean, animation: 'none' | 'fade' | 'slide') #

    static setBarStyle(style: 'default' | 'light-content', animated: boolean) #

    static setNetworkActivityIndicatorVisible(visible: boolean) #

    static setBackgroundColor(color: string, animated: boolean) #

    static setTranslucent(translucent: boolean) #

    Examples #

    		Edit on GitHub
    'use strict'; const React = require('react'); const ReactNative = require('react-native'); @@ -491,6 +491,6 @@ exports.examples \ No newline at end of file diff --git a/docs/statusbarios.html b/docs/statusbarios.html index 1c204dea954..196b5447f9d 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    StatusBarIOS #

    		Edit on GitHub

    Deprecated. Use StatusBar instead.

    Methods #

    setStyle(style, animated?) #

    setHidden(hidden, animation?) #

    setNetworkActivityIndicatorVisible(visible) #

    Examples #

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    StatusBarIOS #

    		Edit on GitHub

    Deprecated. Use StatusBar instead.

    Methods #

    setStyle(style, animated?) #

    setHidden(hidden, animation?) #

    setNetworkActivityIndicatorVisible(visible) #

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -116,6 +116,6 @@ exports.examples \ No newline at end of file diff --git a/docs/style.html b/docs/style.html index 973fe08101e..fecda10e680 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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.

    Declare Styles #

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

    var styles = StyleSheet.create({ base: { @@ -51,6 +51,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/stylesheet.html b/docs/stylesheet.html index 94cd6f4d827..1ca232bac28 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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({ container: { borderRadius: 4, borderWidth: 0.5, @@ -64,6 +64,6 @@ the alternative use.

    \ No newline at end of file diff --git a/docs/switch.html b/docs/switch.html index 921e2ec5534..0b88ea8ee69 100644 --- a/docs/switch.html +++ b/docs/switch.html @@ -1,10 +1,10 @@ -Switch – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Switch #

    		Edit on GitHub

    Renders a boolean input.

    This is a controlled component that requires an onValueChange callback that +Switch – React Native | A framework for building native apps using React

    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Switch #

    		Edit on GitHub

    Renders a boolean input.

    This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.

    @keyword checkbox @keyword toggle

    Props #

    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 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'; var React = require('react'); var ReactNative = require('react-native'); @@ -100,7 +100,7 @@ Default value is false.

    < onValueChange={(value) => this.setState({eventSwitchIsOn: value})} style={{marginBottom: 10}} value={this.state.eventSwitchIsOn} /> - <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text> + <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text> </View> <View> <Switch @@ -121,26 +121,26 @@ Default value is false.

    < var examples = [ { title: 'Switches can be set to true or false', - render(): ReactElement { return <BasicSwitchExample />; } + render(): ReactElement<any> { return <BasicSwitchExample />; } }, { title: 'Switches can be disabled', - render(): ReactElement { return <DisabledSwitchExample />; } + render(): ReactElement<any> { return <DisabledSwitchExample />; } }, { title: 'Change events can be detected', - render(): ReactElement { return <EventSwitchExample />; } + render(): ReactElement<any> { return <EventSwitchExample />; } }, { title: 'Switches are controlled components', - render(): ReactElement { return <Switch />; } + render(): ReactElement<any> { return <Switch />; } } ]; if (Platform.OS === 'ios') { examples.push({ title: 'Custom colors can be provided', - render(): ReactElement { return <ColorSwitchExample />; } + render(): ReactElement<any> { return <ColorSwitchExample />; } }); } @@ -163,6 +163,6 @@ exports.examples \ No newline at end of file diff --git a/docs/tabbarios-item.html b/docs/tabbarios-item.html index 50cf7542245..d77f6e701df 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 component to set selected={true}.

    renderAsOriginal bool #

    If set to true it renders the image as original, it defaults to being displayed as a template

    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 @@ -21,6 +21,6 @@ is defined.

    \ No newline at end of file diff --git a/docs/tabbarios.html b/docs/tabbarios.html index 7eae5503b2f..3c4fcef6936 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -1,4 +1,10 @@ -TabBarIOS – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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

    unselectedTintColor color #

    Color of text on unselected tabs

    Examples #

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TabBarIOS #

    		Edit on GitHub

    Props #

    View props... #

    barTintColor color #

    Background color of the tab bar

    itemPositioning enum('fill', 'center', 'auto') #

    Specifies tab bar item positioning. Available values are: +- fill - distributes items across the entire width of the tab bar +- center - centers item in the available tab bar space +- auto (default) - distributes items dynamically according to the +user interface idiom. In a horizontally compact environment (e.g. iPhone 5) +this value defaults to fill, in a horizontally regular one (e.g. iPad) +it defaults to center.

    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

    unselectedTintColor color #

    Color of text on unselected tabs

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -67,6 +73,7 @@ </TabBarIOS.Item> <TabBarIOS.Item icon={require('./flux.png')} + selectedIcon={require('./relay.png')} renderAsOriginal title="More" selected={this.state.selectedTab === 'greenTab'} @@ -111,6 +118,6 @@ module.exports \ No newline at end of file diff --git a/docs/testing.html b/docs/testing.html index 560d790026a..a79407fbb66 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 and CircleCI continuous integration systems, 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.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 and CircleCI continuous integration systems, 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" @@ -38,6 +38,6 @@ $ ./s apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/text.html b/docs/text.html index 8f0f457b9ca..27736daba3b 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Text #

    		Edit on GitHub

    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 @@ -29,7 +29,7 @@ does not exceed this number.

    lineHeight number
    textAlign enum('auto', 'left', 'right', 'center', 'justify')

    Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to left on Android.

    textDecorationLine enum('none', 'underline', 'line-through', 'underline line-through')
    textShadowColor color
    textShadowOffset {width: number, height: number}
    textShadowRadius number
    androidtextAlignVertical enum('auto', 'top', 'bottom', 'center')
    iosletterSpacing number
    iostextDecorationColor color
    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 #

    Both iOS and Android allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (NSAttributedString on iOS, SpannableString on Android). 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'}}> +default, a gray oval highlights the text on press down.

    Description #

    		Edit on GitHub

    Nested Text #

    Both iOS and Android allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (NSAttributedString on iOS, SpannableString on Android). 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 @@ -79,7 +79,7 @@ html { <Text style={{color: 'red'}}> and red </Text> -</Text>

    We believe that this more constrained way to style text will yield better apps:

    • (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.

    • (Implementor) The implementation of React Native is also simplified. We do not need to have a fontFamily field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.

    Examples #

    IOS #

    		Edit on GitHub
    'use strict'; +</Text>

    We believe that this more constrained way to style text will yield better apps:

    • (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.

    • (Implementor) The implementation of React Native is also simplified. We do not need to have a fontFamily field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.

    Examples #

    IOS #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -410,7 +410,7 @@ exports.examples }, }, { title: 'Toggling Attributes', - render: function(): ReactElement { + render: function(): ReactElement<any> { return <AttributeToggler />; }, }, { @@ -511,7 +511,7 @@ exports.examples : 0, backgroundColor: 'rgba(100, 100, 100, 0.3)' }, -});

    ANDROID #

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

    ANDROID #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -914,6 +914,6 @@ module.exports \ No newline at end of file diff --git a/docs/textinput.html b/docs/textinput.html index dce542e3b0a..9a1273b33b0 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TextInput #

    		Edit on GitHub

    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 @@ -38,7 +38,7 @@ true to be able to fill the lines.

    ioskeyboardAppearance enum('default', 'light', 'dark') #

    Determines the color of the keyboard.

    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.

    iosselectionState DocumentSelectionState #

    See DocumentSelectionState.js, some state that is responsible for -maintaining selection information for a document

    Methods #

    isFocused(): boolean #

    Returns if the input is currently focused.

    clear() #

    Removes all text from the input.

    Examples #

    IOS #

    		Edit on GitHub
    'use strict'; +maintaining selection information for a document

    Methods #

    isFocused(): boolean #

    Returns if the input is currently focused.

    clear() #

    Removes all text from the input.

    Examples #

    IOS #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -549,7 +549,7 @@ exports.examples return ( <View> <WithLabel label="true"> - <TextInput password={true} style={styles.default} defaultValue="abc" /> + <TextInput secureTextEntry={true} style={styles.default} defaultValue="abc" /> </WithLabel> </View> ); @@ -557,7 +557,7 @@ exports.examples }, { title: 'Event handling', - render: function(): ReactElement { return <TextEventsExample />; }, + render: function(): ReactElement<any> { return <TextEventsExample />; }, }, { title: 'Colored input text', @@ -655,7 +655,7 @@ exports.examples }, { title: 'Blur on submit', - render: function(): ReactElement { return <BlurOnSubmitExample />; }, + render: function(): ReactElement<any> { return <BlurOnSubmitExample />; }, }, { title: 'Multiline blur on submit', @@ -732,7 +732,7 @@ exports.examples return <TokenizedTextExample />; } }, -];

    ANDROID #

    		Edit on GitHub
    'use strict'; +];

    ANDROID #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -1305,6 +1305,6 @@ exports.examples \ No newline at end of file diff --git a/docs/timepickerandroid.html b/docs/timepickerandroid.html index b4cca02c844..ccb9878add4 100644 --- a/docs/timepickerandroid.html +++ b/docs/timepickerandroid.html @@ -1,4 +1,4 @@ -TimePickerAndroid – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TimePickerAndroid #

    		Edit on GitHub

    Opens the standard Android time picker dialog.

    Example #

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TimePickerAndroid #

    		Edit on GitHub

    Opens the standard Android time picker dialog.

    Example #

    try { const {action, hour, minute} = await TimePickerAndroid.open({ hour: 14, minute: 0, @@ -17,7 +17,7 @@ is used.

    Returns a Promise which will be invoked an object containing action, hour (0-23), minute (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will still be resolved with action being TimePickerAndroid.dismissedAction and all the other keys -being undefined. Always check whether the action before reading the values.

    static timeSetAction() #

    A time has been selected.

    static dismissedAction() #

    The dialog has been dismissed.

    Examples #

    		Edit on GitHub
    'use strict'; +being undefined. Always check whether the action before reading the values.

    static timeSetAction() #

    A time has been selected.

    static dismissedAction() #

    The dialog has been dismissed.

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -131,6 +131,6 @@ module.exports \ No newline at end of file diff --git a/docs/timers.html b/docs/timers.html index 406bc96e8c6..f72d94e1e9a 100644 --- a/docs/timers.html +++ b/docs/timers.html @@ -1,4 +1,4 @@ -Timers – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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(() => { // ...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) @@ -30,6 +30,6 @@ apiKey: '2c98749b4a1e588efec53b2acec13025', indexName: 'react-native-versions', inputSelector: '#algolia-doc-search', - algoliaOptions: { facetFilters: [ "tags:0.27" ], hitsPerPage: 5 } + algoliaOptions: { facetFilters: [ "tags:0.28" ], hitsPerPage: 5 } }); \ No newline at end of file diff --git a/docs/toastandroid.html b/docs/toastandroid.html index 017d2c9d74b..f8c59e09f30 100644 --- a/docs/toastandroid.html +++ b/docs/toastandroid.html @@ -1,5 +1,5 @@ -ToastAndroid – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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, duration) #

    Properties #

    SHORT: MemberExpression #

    LONG: MemberExpression #

    Examples #

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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, duration) #

    Properties #

    SHORT: MemberExpression #

    LONG: MemberExpression #

    Examples #

    		Edit on GitHub
    'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -68,6 +68,6 @@ module.exports \ No newline at end of file diff --git a/docs/toolbarandroid.html b/docs/toolbarandroid.html index 34bcba2748a..c8a180e2ae6 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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, 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 @@ -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 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'; var React = require('react'); var ReactNative = require('react-native'); @@ -165,6 +165,6 @@ module.exports \ No newline at end of file diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index 36e11e00c7a..23d727d7f47 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableHighlight #

    		Edit on GitHub

    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 @@ -30,6 +30,6 @@ active.

    \ No newline at end of file diff --git a/docs/touchablenativefeedback.html b/docs/touchablenativefeedback.html index 8201d355985..a495da76266 100644 --- a/docs/touchablenativefeedback.html +++ b/docs/touchablenativefeedback.html @@ -1,4 +1,4 @@ -TouchableNativeFeedback – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableNativeFeedback #

    		Edit on GitHub

    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 @@ -39,6 +39,6 @@ API level 21+.

    \ No newline at end of file diff --git a/docs/touchableopacity.html b/docs/touchableopacity.html index eea52d0b1e9..0fc9c047bce 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    TouchableOpacity #

    		Edit on GitHub

    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() { @@ -27,6 +27,6 @@ active. Defaults to 0.2.

    \ No newline at end of file diff --git a/docs/touchablewithoutfeedback.html b/docs/touchablewithoutfeedback.html index 430a586accb..9251acbf113 100644 --- a/docs/touchablewithoutfeedback.html +++ b/docs/touchablewithoutfeedback.html @@ -1,4 +1,4 @@ -TouchableWithoutFeedback – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 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, [object Object] #

    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.

    disabled bool #

    If true, disable all interactions for this component.

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

    This defines how far your touch can start away from the button. This is added to pressRetentionOffset when moving off of the button. @@ -26,6 +26,6 @@ is disabled. Ensure you pass in a constant to reduce memory allocations.

    \ No newline at end of file diff --git a/docs/transforms.html b/docs/transforms.html index ad0d3ab83fa..61c9d87cf4c 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 Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Transforms #

    		Edit on GitHub

    Props #

    decomposedMatrix DecomposedMatrixPropType #

    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 →
    © 2016 Facebook Inc.
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Transforms #

    		Edit on GitHub

    Props #

    decomposedMatrix DecomposedMatrixPropType #

    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 →
    © 2016 Facebook Inc.
    \ No newline at end of file diff --git a/docs/troubleshooting.html b/docs/troubleshooting.html index c1b43b0e67e..2067b8af153 100644 --- a/docs/troubleshooting.html +++ b/docs/troubleshooting.html @@ -1,4 +1,4 @@ -Troubleshooting – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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". Alternatively, you can hit Cmd-P on Dvorak/Colemak layouts to reload the simulator.

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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". Alternatively, you can hit Cmd-P on Dvorak/Colemak layouts to reload the simulator.

    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 @@ -29,6 +29,6 @@ import Firebase from 'firebase' \ No newline at end of file diff --git a/docs/tutorial-core-components.html b/docs/tutorial-core-components.html index 122b16b35fe..56f40d16ae4 100644 --- a/docs/tutorial-core-components.html +++ b/docs/tutorial-core-components.html @@ -1,4 +1,4 @@ -Core Components – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Core Components #

    		Edit on GitHub

    Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, possibly nested, and then those components are mapped to the native UI on the targeted platform.

    React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.

    Text #

    The most basic component in React Native is the Text component. The Text component simply renders text.

    This example displays the string "Hello" on the device.

    import React from 'react'; +Core Components – React Native | A framework for building native apps using React
    React Native0.28

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    Guides

    Guides (iOS)

    Guides (Android)

    components

    apis

    Polyfills

    Core Components #

    		Edit on GitHub

    Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, possibly nested, and then those components are mapped to the native UI on the targeted platform.

    React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.

    Text #

    The most basic component in React Native is the Text component. The Text component simply renders text.

    This example displays the string "Hello" on the device.

    import React from 'react'; import { AppRegistry, Text } from 'react-native'; const App = () => { @@ -81,6 +81,6 @@ import { AppRegistry \ No newline at end of file diff --git a/docs/upgrading.html b/docs/upgrading.html index e5469b8036c..5385f5ac9a2 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -1,8 +1,8 @@ -Upgrading – React Native | A framework for building native apps using React
    React Native0.27

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

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

    Quick Start

    Tutorials

    Sample Applications

    Community Resources

    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 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 -version of React Native:

    1. Upgrade the react-native dependency #

    Note the latest version of the react-native npm package from here (or use npm info react-native to check):

    Now install that version of react-native in your project with npm install --save. For example, to upgrade to the version 0.18, in a terminal run:

    $ npm install --save react-native@0.18

    2. Upgrade your project templates #

    The new npm package will likely contain updates to the files that are normally generated when you +version of React Native:

    1. Upgrade the react-native dependency #

    Note the latest version of the react-native npm package from here (or use npm info react-native to check):

    Now install that version of react-native in your project with npm install --save. For example, to upgrade to the version 0.26, in a terminal run:

    $ npm install --save react-native@0.26

    2. Upgrade your project templates #

    The new npm package will likely contain updates to the files that are normally generated when you run react-native init, like the iOS and the Android sub-projects. To get these latest changes, run this in a terminal:

    $ react-native upgrade

    This will check your files against the latest template and perform the following: