From a74bd6141c6ec1dca722cf07fc5ae59901fd5a89 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Thu, 9 Mar 2017 12:55:23 +0000 Subject: [PATCH] Updated docs for next --- .../exponent-talks-unraveling-navigation.html | 2 +- blog/2017/01/07/monthly-release-cadence.html | 2 +- .../14/using-native-driver-for-animated.html | 2 +- blog/feed.xml | 4 +- blog/index.html | 2 +- releases/next/docs/accessibility.html | 2 +- releases/next/docs/accessibilityinfo.html | 2 +- releases/next/docs/actionsheetios.html | 2 +- releases/next/docs/activityindicator.html | 4 +- releases/next/docs/adsupportios.html | 2 +- releases/next/docs/alert.html | 2 +- releases/next/docs/alertios.html | 2 +- .../docs/android-building-from-source.html | 2 +- releases/next/docs/animated.html | 7 +- releases/next/docs/animations.html | 4 +- releases/next/docs/appregistry.html | 2 +- releases/next/docs/appstate.html | 2 +- releases/next/docs/asyncstorage.html | 2 +- releases/next/docs/backandroid.html | 14 +- releases/next/docs/backhandler.html | 32 ++ releases/next/docs/button.html | 4 +- releases/next/docs/cameraroll.html | 4 +- releases/next/docs/clipboard.html | 2 +- releases/next/docs/colors.html | 2 +- releases/next/docs/communication-ios.html | 2 +- releases/next/docs/datepickerandroid.html | 2 +- releases/next/docs/datepickerios.html | 6 +- releases/next/docs/debugging.html | 2 +- releases/next/docs/dimensions.html | 2 +- releases/next/docs/direct-manipulation.html | 2 +- releases/next/docs/drawerlayoutandroid.html | 14 +- releases/next/docs/easing.html | 2 +- releases/next/docs/flatlist.html | 22 +- releases/next/docs/flexbox.html | 2 +- releases/next/docs/geolocation.html | 2 +- .../next/docs/gesture-responder-system.html | 2 +- releases/next/docs/getting-started.html | 4 +- releases/next/docs/handling-text-input.html | 2 +- releases/next/docs/handling-touches.html | 2 +- releases/next/docs/headless-js-android.html | 2 +- releases/next/docs/height-and-width.html | 2 +- releases/next/docs/image.html | 26 +- releases/next/docs/imageeditor.html | 2 +- releases/next/docs/imagepickerios.html | 2 +- releases/next/docs/images.html | 2 +- releases/next/docs/imagestore.html | 2 +- .../docs/integration-with-existing-apps.html | 2 +- releases/next/docs/interactionmanager.html | 4 +- .../next/docs/javascript-environment.html | 2 +- releases/next/docs/keyboard.html | 2 +- releases/next/docs/keyboardavoidingview.html | 4 +- releases/next/docs/layout-props.html | 84 +-- releases/next/docs/layoutanimation.html | 6 +- releases/next/docs/linking-libraries-ios.html | 2 +- releases/next/docs/linking.html | 2 +- releases/next/docs/listview.html | 30 +- releases/next/docs/listviewdatasource.html | 2 +- releases/next/docs/mapview.html | 506 ------------------ releases/next/docs/modal.html | 8 +- releases/next/docs/more-resources.html | 2 +- .../next/docs/native-components-android.html | 2 +- releases/next/docs/native-components-ios.html | 2 +- .../next/docs/native-modules-android.html | 2 +- releases/next/docs/native-modules-ios.html | 2 +- releases/next/docs/nativemethodsmixin.html | 2 +- releases/next/docs/navigation.html | 2 +- releases/next/docs/navigator.html | 18 +- releases/next/docs/navigatorios.html | 14 +- releases/next/docs/netinfo.html | 4 +- releases/next/docs/network.html | 2 +- releases/next/docs/panresponder.html | 2 +- releases/next/docs/performance.html | 2 +- releases/next/docs/permissionsandroid.html | 2 +- releases/next/docs/picker.html | 8 +- releases/next/docs/pickerios.html | 2 +- releases/next/docs/pixelratio.html | 2 +- .../next/docs/platform-specific-code.html | 2 +- releases/next/docs/progressbarandroid.html | 6 +- releases/next/docs/progressviewios.html | 2 +- releases/next/docs/props.html | 2 +- releases/next/docs/pushnotificationios.html | 2 +- releases/next/docs/refreshcontrol.html | 4 +- releases/next/docs/running-on-device.html | 2 +- .../next/docs/running-on-simulator-ios.html | 2 +- releases/next/docs/scrollview.html | 72 +-- releases/next/docs/sectionlist.html | 12 +- releases/next/docs/segmentedcontrolios.html | 12 +- releases/next/docs/settings.html | 2 +- releases/next/docs/shadow-props.html | 2 +- releases/next/docs/share.html | 2 +- releases/next/docs/signed-apk-android.html | 2 +- releases/next/docs/slider.html | 20 +- releases/next/docs/snapshotviewios.html | 2 +- releases/next/docs/state.html | 2 +- releases/next/docs/statusbar.html | 8 +- releases/next/docs/statusbarios.html | 2 +- releases/next/docs/style.html | 2 +- releases/next/docs/stylesheet.html | 10 +- releases/next/docs/switch.html | 6 +- releases/next/docs/systrace.html | 2 +- releases/next/docs/tabbarios-item.html | 14 +- releases/next/docs/tabbarios.html | 4 +- releases/next/docs/testing.html | 2 +- releases/next/docs/text.html | 22 +- releases/next/docs/textinput.html | 48 +- releases/next/docs/timepickerandroid.html | 2 +- releases/next/docs/timers.html | 2 +- releases/next/docs/toastandroid.html | 4 +- releases/next/docs/toolbarandroid.html | 14 +- releases/next/docs/touchablehighlight.html | 8 +- .../next/docs/touchablenativefeedback.html | 6 +- releases/next/docs/touchableopacity.html | 6 +- .../next/docs/touchablewithoutfeedback.html | 8 +- releases/next/docs/transforms.html | 2 +- releases/next/docs/troubleshooting.html | 2 +- releases/next/docs/tutorial.html | 2 +- releases/next/docs/understanding-cli.html | 2 +- releases/next/docs/upgrading.html | 2 +- releases/next/docs/using-a-listview.html | 2 +- releases/next/docs/using-a-scrollview.html | 2 +- releases/next/docs/vibration.html | 2 +- releases/next/docs/vibrationios.html | 2 +- releases/next/docs/view.html | 58 +- releases/next/docs/viewpagerandroid.html | 16 +- releases/next/docs/virtualizedlist.html | 26 +- releases/next/docs/webview.html | 34 +- releases/next/index.html | 2 +- showcase.html | 2 +- versions.html | 4 +- 129 files changed, 465 insertions(+), 950 deletions(-) create mode 100644 releases/next/docs/backhandler.html delete mode 100644 releases/next/docs/mapview.html diff --git a/blog/2016/09/08/exponent-talks-unraveling-navigation.html b/blog/2016/09/08/exponent-talks-unraveling-navigation.html index 3feebeb92e2..c375b114c8d 100644 --- a/blog/2016/09/08/exponent-talks-unraveling-navigation.html +++ b/blog/2016/09/08/exponent-talks-unraveling-navigation.html @@ -1,4 +1,4 @@ -Exponent Talks: Adam on Unraveling Navigation
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Eric Vicenti —

A Monthly Release Cadence: Releasing December and January RC

Shortly after React Native was introduced, we started releasing every two weeks to help the community adopt new features, while keeping versions stable for production use. At Facebook we had to stabilize the codebase every two weeks for the release of our production iOS apps, so we decided to release the open source versions at the same pace. Now, many of the Facebook apps ship once per week, especially on Android. Because we ship from master weekly, we need to keep it quite stable. So the bi-weekly release cadence doesn't even benefit internal contributors anymore.

We frequently hear feedback from the community that the release rate is hard to keep up with. Tools like Exponent had to skip every other release in order to manage the rapid change in version. So it seems clear that the bi-weekly releases did not serve the community well.

Now releasing monthly #

We're happy to announce the new monthly release cadence, and the December 2016 release, v0.40, which has been stabilizing for all last month and is ready to adopt. (Just make sure to update headers in your native modules on iOS).

Although it may vary a few days to avoid weekends or handle unforeseen issues, you can now expect a given release to be available on the first day of the month, and released on the last.

Use the current month for the best support #

The January release candidate is ready to try, and you can see what's new here.

To see what changes are coming and provide better feedback to React Native contributors, always use the current month's release candidate when possible. By the time each version is released at the end of the month, the changes it contains will have been shipped in production Facebook apps for over two weeks.

You can easily upgrade your app with the new react-native-git-upgrade command:

npm install -g react-native-git-upgrade +A Monthly Release Cadence: Releasing December and January RC
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Eric Vicenti —

A Monthly Release Cadence: Releasing December and January RC

Shortly after React Native was introduced, we started releasing every two weeks to help the community adopt new features, while keeping versions stable for production use. At Facebook we had to stabilize the codebase every two weeks for the release of our production iOS apps, so we decided to release the open source versions at the same pace. Now, many of the Facebook apps ship once per week, especially on Android. Because we ship from master weekly, we need to keep it quite stable. So the bi-weekly release cadence doesn't even benefit internal contributors anymore.

We frequently hear feedback from the community that the release rate is hard to keep up with. Tools like Expo had to skip every other release in order to manage the rapid change in version. So it seems clear that the bi-weekly releases did not serve the community well.

Now releasing monthly #

We're happy to announce the new monthly release cadence, and the December 2016 release, v0.40, which has been stabilizing for all last month and is ready to adopt. (Just make sure to update headers in your native modules on iOS).

Although it may vary a few days to avoid weekends or handle unforeseen issues, you can now expect a given release to be available on the first day of the month, and released on the last.

Use the current month for the best support #

The January release candidate is ready to try, and you can see what's new here.

To see what changes are coming and provide better feedback to React Native contributors, always use the current month's release candidate when possible. By the time each version is released at the end of the month, the changes it contains will have been shipped in production Facebook apps for over two weeks.

You can easily upgrade your app with the new react-native-git-upgrade command:

npm install -g react-native-git-upgrade react-native-git-upgrade 0.41.0-rc.0

We hope this simpler approach will make it easier for the community to keep track of changes in React Native, and to adopt new versions as quickly as possible!

(Thanks go to Martin Konicek for coming up with this plan and Mike Grabowski for making it happen)

React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Janic Duplessis —

Using Native Driver for Animated

For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.

What is this? #

The Animated API was designed with a very important constraint in mind, it is serializable. This means we can send everything about the animation to native before it has even started and allows native code to perform the animation on the UI thread without having to go through the bridge on every frame. It is very useful because once the animation has started, the JS thread can be blocked and the animation will still run smoothly. In practice this can happen a lot because user code runs on the JS thread and React renders can also lock JS for a long time.

A bit of history... #

This project started about a year ago, when Exponent built the li.st app on Android. Krzysztof Magiera was contracted to build the initial implementation on Android. It ended up working well and li.st was the first app to ship with native driven animations using Animated. A few months later, Brandon Withrow built the initial implementation on iOS. After that, Ryan Gomba and myself worked on adding missing features like support for Animated.event as well as squash bugs we found when using it in production apps. This was truly a community effort and I would like to thanks everyone that was involved as well as Exponent for sponsoring a large part of the development. It is now used by Touchable components in React Native as well as for navigation animations in the newly released React Navigation library.

How does it work? #

First, let's check out how animations currently work using Animated with the JS driver. When using Animated, you declare a graph of nodes that represent the animations that you want to perform, and then use a driver to update an Animated value using a predefined curve. You may also update an Animated value by connecting it to an event of a View using Animated.event.

Here's a breakdown of the steps for an animation and where it happens:

  • JS: The animation driver uses requestAnimationFrame to execute on every frame and update the value it drives using the new value it calculates based on the animation curve.
  • JS: Intermediate values are calculated and passed to a props node that is attached to a View.
  • JS: The View is updated using setNativeProps.
  • JS to Native bridge.
  • Native: The UIView or android.View is updated.

As you can see, most of the work happens on the JS thread. If it is blocked the animation will skip frames. It also needs to go through the JS to Native bridge on every frame to update native views.

What the native driver does is move all of these steps to native. Since Animated produces a graph of animated nodes, it can be serialized and sent to native only once when the animation starts, eliminating the need to callback into the JS thread; the native code can take care of updating the views directly on the UI thread on every frame.

Here's an example of how we can serialize an animated value and an interpolation node (not the exact implementation, just an example).

Create the native value node, this is the value that will be animated:

NativeAnimatedModule.createNode({ +Using Native Driver for Animated
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Janic Duplessis —

Using Native Driver for Animated

For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.

What is this? #

The Animated API was designed with a very important constraint in mind, it is serializable. This means we can send everything about the animation to native before it has even started and allows native code to perform the animation on the UI thread without having to go through the bridge on every frame. It is very useful because once the animation has started, the JS thread can be blocked and the animation will still run smoothly. In practice this can happen a lot because user code runs on the JS thread and React renders can also lock JS for a long time.

A bit of history... #

This project started about a year ago, when Expo built the li.st app on Android. Krzysztof Magiera was contracted to build the initial implementation on Android. It ended up working well and li.st was the first app to ship with native driven animations using Animated. A few months later, Brandon Withrow built the initial implementation on iOS. After that, Ryan Gomba and myself worked on adding missing features like support for Animated.event as well as squash bugs we found when using it in production apps. This was truly a community effort and I would like to thanks everyone that was involved as well as Expo for sponsoring a large part of the development. It is now used by Touchable components in React Native as well as for navigation animations in the newly released React Navigation library.

How does it work? #

First, let's check out how animations currently work using Animated with the JS driver. When using Animated, you declare a graph of nodes that represent the animations that you want to perform, and then use a driver to update an Animated value using a predefined curve. You may also update an Animated value by connecting it to an event of a View using Animated.event.

Here's a breakdown of the steps for an animation and where it happens:

  • JS: The animation driver uses requestAnimationFrame to execute on every frame and update the value it drives using the new value it calculates based on the animation curve.
  • JS: Intermediate values are calculated and passed to a props node that is attached to a View.
  • JS: The View is updated using setNativeProps.
  • JS to Native bridge.
  • Native: The UIView or android.View is updated.

As you can see, most of the work happens on the JS thread. If it is blocked the animation will skip frames. It also needs to go through the JS to Native bridge on every frame to update native views.

What the native driver does is move all of these steps to native. Since Animated produces a graph of animated nodes, it can be serialized and sent to native only once when the animation starts, eliminating the need to callback into the JS thread; the native code can take care of updating the views directly on the UI thread on every frame.

Here's an example of how we can serialize an animated value and an interpolation node (not the exact implementation, just an example).

Create the native value node, this is the value that will be animated:

NativeAnimatedModule.createNode({ id: 1, type: 'value', initialValue: 0, diff --git a/blog/feed.xml b/blog/feed.xml index 541a342d1b3..524836fb49e 100644 --- a/blog/feed.xml +++ b/blog/feed.xml @@ -69,12 +69,12 @@ - <![CDATA[Exponent Talks: Adam on Unraveling Navigation]]> + <![CDATA[Expo Talks: Adam on Unraveling Navigation]]> https://facebook.github.io/react-native/blog/2016/09/08/exponent-talks-unraveling-navigation.html 2016-09-08T00:00:00Z - + Héctor Ramos https://twitter.com/hectorramos diff --git a/blog/index.html b/blog/index.html index 118cac5a523..0c9bec97cac 100644 --- a/blog/index.html +++ b/blog/index.html @@ -1,4 +1,4 @@ -React Native Blog
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Janic Duplessis —

Using Native Driver for Animated

For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.

Eric Vicenti —

A Monthly Release Cadence: Releasing December and January RC

Shortly after React Native was introduced, we started releasing every two weeks to help the community adopt new features, while keeping versions stable for production use. At Facebook we had to stabilize the codebase every two weeks for the release of our production iOS apps, so we decided to release the open source versions at the same pace. Now, many of the Facebook apps ship once per week, especially on Android. Because we ship from master weekly, we need to keep it quite stable. So the bi-weekly release cadence doesn't even benefit internal contributors anymore.

Héctor Ramos —

San Francisco Meetup Recap

Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.

Kevin Lacker —

Toward Better Documentation

Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.

Martín Bigio —

Introducing Hot Reloading

React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.

React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Janic Duplessis —

Using Native Driver for Animated

For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.

Eric Vicenti —

A Monthly Release Cadence: Releasing December and January RC

Shortly after React Native was introduced, we started releasing every two weeks to help the community adopt new features, while keeping versions stable for production use. At Facebook we had to stabilize the codebase every two weeks for the release of our production iOS apps, so we decided to release the open source versions at the same pace. Now, many of the Facebook apps ship once per week, especially on Android. Because we ship from master weekly, we need to keep it quite stable. So the bi-weekly release cadence doesn't even benefit internal contributors anymore.

Héctor Ramos —

San Francisco Meetup Recap

Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.

Kevin Lacker —

Toward Better Documentation

Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.

Martín Bigio —

Introducing Hot Reloading

React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Accessibility #

Native App Accessibility (iOS and Android) #

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

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

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

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

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

<View accessible={true}> +Accessibility
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Accessibility #

Native App Accessibility (iOS and Android) #

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

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

Making Apps Accessible #

Accessibility properties #

accessible (iOS, Android) #

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

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

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

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

accessibilityLabel (iOS, Android) #

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

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

<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}> diff --git a/releases/next/docs/accessibilityinfo.html b/releases/next/docs/accessibilityinfo.html index 32f817f26c7..ca70185e6b6 100644 --- a/releases/next/docs/accessibilityinfo.html +++ b/releases/next/docs/accessibilityinfo.html @@ -1,4 +1,4 @@ -AccessibilityInfo
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AccessibilityInfo #

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AccessibilityInfo #

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

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

class ScreenReaderStatusExample extends React.Component { state = { diff --git a/releases/next/docs/actionsheetios.html b/releases/next/docs/actionsheetios.html index f45b75a34bd..829d27a8d0b 100644 --- a/releases/next/docs/actionsheetios.html +++ b/releases/next/docs/actionsheetios.html @@ -1,4 +1,4 @@ -ActionSheetIOS
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

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

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

static showShareActionSheetWithOptions(options, failureCallback, successCallback) #

Display the iOS share sheet. The options object should contain one or both of message and url and can additionally have a subject or excludedActivityTypes:

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

NOTE: if url points to a local file, or is a base64-encoded diff --git a/releases/next/docs/activityindicator.html b/releases/next/docs/activityindicator.html index 213f28a79c5..c0cc20ff978 100644 --- a/releases/next/docs/activityindicator.html +++ b/releases/next/docs/activityindicator.html @@ -1,5 +1,5 @@ -ActivityIndicator

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Props #

View props... #

animating?: bool #

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

color?: [object Object] #

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

size?: [object Object], [object Object] #

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

ioshidesWhenStopped?: bool #

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

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

Examples #

Edit on GitHub
'use strict'; +ActivityIndicator
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Props #

View props... #

animating?: bool #

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

color?: color #

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

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

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

ioshidesWhenStopped?: bool #

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

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

Examples #

Edit on GitHub
'use strict'; import React, { Component } from 'react'; import { ActivityIndicator, StyleSheet, View } from 'react-native'; diff --git a/releases/next/docs/adsupportios.html b/releases/next/docs/adsupportios.html index 1c4777995ea..f0489bccee8 100644 --- a/releases/next/docs/adsupportios.html +++ b/releases/next/docs/adsupportios.html @@ -1,4 +1,4 @@ -AdSupportIOS
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AdSupportIOS #

Methods #

static getAdvertisingId(onSuccess, onFailure) #

static getAdvertisingTrackingEnabled(onSuccess, onFailure) #

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

Examples #

Edit on GitHub
'use strict'; +AdSupportIOS
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AdSupportIOS #

Methods #

static getAdvertisingId(onSuccess, onFailure) #

static getAdvertisingTrackingEnabled(onSuccess, onFailure) #

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

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); diff --git a/releases/next/docs/alert.html b/releases/next/docs/alert.html index 9493ff3dee3..d7c90294bb3 100644 --- a/releases/next/docs/alert.html +++ b/releases/next/docs/alert.html @@ -1,4 +1,4 @@ -Alert
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Alert #

Launches an alert dialog with the specified title and message.

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Alert #

Launches an alert dialog with the specified title and message.

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

This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, diff --git a/releases/next/docs/alertios.html b/releases/next/docs/alertios.html index 7acc2664f20..ff81181dc4b 100644 --- a/releases/next/docs/alertios.html +++ b/releases/next/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AlertIOS #

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

AlertIOS #

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

Creating an iOS alert:

AlertIOS.alert( 'Sync Complete', 'All your data are belong to us.' diff --git a/releases/next/docs/android-building-from-source.html b/releases/next/docs/android-building-from-source.html index d0686b385ed..417c14e40ac 100644 --- a/releases/next/docs/android-building-from-source.html +++ b/releases/next/docs/android-building-from-source.html @@ -1,4 +1,4 @@ -Building React Native from source
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Building React Native from source #

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

Prerequisites #

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

Make sure you have the following installed:

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

Point Gradle to your Android SDK: #

Step 1: Set environment variables through your local shell.

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

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

Example:

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

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Building React Native from source #

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

Prerequisites #

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

Make sure you have the following installed:

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

Point Gradle to your Android SDK: #

Step 1: Set environment variables through your local shell.

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

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

Example:

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

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

Example:

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

Download links for Android NDK #

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

You can find further instructions on the official page.

Building the source #

1. Installing the fork #

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

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

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

2. Adding gradle dependencies #

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

... dependencies { diff --git a/releases/next/docs/animated.html b/releases/next/docs/animated.html index d6cc528c974..c0f36648dd0 100644 --- a/releases/next/docs/animated.html +++ b/releases/next/docs/animated.html @@ -1,4 +1,4 @@ -Animated
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Animated #

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Animated #

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

The simplest workflow for creating an animation is to to create an @@ -92,8 +92,9 @@ then calls setValue on the mapped outputs. e.g.

null, // raw event arg ignored {dx: this._panX}, // gestureState arg ]),

Config is an object that may have the following options:

  • listener: Optional async listener.
  • useNativeDriver: Uses the native driver when true. Default false.

static createAnimatedComponent(Component) #

Make any React component Animatable. Used to create Animated.View, etc.

static attachNativeEvent(viewRef, eventName, argMapping) #

Imperative API to attach an animated value to an event on a view. Prefer using -Animated.event with useNativeDrive: true if possible.

Properties #

Value: [object Object] #

Standard value class for driving animations. Typically initialized with -new Animated.Value(0);

See also AnimatedValue.

ValueXY: [object Object] #

2D value class for driving 2D animations, such as pan gestures.

See also AnimatedValueXY.

Interpolation: [object Object] #

exported to use the Interpolation type in flow

See also AnimatedInterpolation.

class AnimatedValue #

    Standard value for driving animations. One Animated.Value can drive +Animated.event with useNativeDrive: true if possible.

static forkEvent(event, listener) #

Advanced imperative API for snooping on animated events that are passed in through props. Use +values directly where possible.

static unforkEvent(event, listener) #

Properties #

Value: AnimatedValue #

Standard value class for driving animations. Typically initialized with +new Animated.Value(0);

See also AnimatedValue.

ValueXY: AnimatedValueXY #

2D value class for driving 2D animations, such as pan gestures.

See also AnimatedValueXY.

Interpolation: AnimatedInterpolation #

exported to use the Interpolation type in flow

See also AnimatedInterpolation.

class AnimatedValue #

Props #

FooterComponent?: ?ReactClass<any> #

Rendered at the bottom of all the items.

HeaderComponent?: ?ReactClass<any> #

Rendered at the top of all the items.

SeparatorComponent?: ?ReactClass<any> #

Rendered in between each item, but not at the top or bottom.

columnWrapperStyle?: StyleObj #

Optional custom style for multi-item rows generated when numColumns > 1

data: ?Array<ItemT> #

For simplicity, data is just a plain array. If you want to use something else, like an +immutable list, use the underlying VirtualizedList directly.

getItem?: #

getItemCount?: #

getItemLayout?: (data: ?Array<ItemT>, index: number) => + {length: number, offset: number, index: number} #

getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:

getItemLayout={(data, index) => ( {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} )}

Remember to include separator length (height or width) in your offset calculation if you -specify SeparatorComponent.

horizontal?: ?boolean #

If true, renders items next to each other horizontally instead of stacked vertically.

keyExtractor: (item: ItemT, index: number) => string #

Used to extract a unique key for a given item at the specified index. Key is used for caching +specify SeparatorComponent.

horizontal?: ?boolean #

If true, renders items next to each other horizontally instead of stacked vertically.

keyExtractor: (item: ItemT, index: number) => string #

Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then -falls back to using the index, like React does.

legacyImplementation?: ?boolean #

numColumns: number #

Multiple columns can only be rendered with horizontal={false}`` and will zig-zag like aflexWrap` layout. Items should all be the same height - masonry layouts are not supported.

onEndReached?: ?(info: {distanceFromEnd: number}) => void #

Called once when the scroll position gets within onEndReachedThreshold of the rendered -content.

onEndReachedThreshold?: ?number #

onRefresh?: ?() => void #

If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make -sure to also set the refreshing prop correctly.

onViewableItemsChanged?: ?(info: {viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void #

Called when the viewability of rows changes, as defined by the -viewablePercentThreshold prop.

refreshing?: ?boolean #

Set this true while waiting for new data from a refresh.

renderItem: (info: {item: ItemT, index: number}) => ?React.Element<any> #

Takes an item from data and renders it into the list. Typical usage:

_renderItem = ({item}) => ( +falls back to using the index, like React does.

legacyImplementation?: ?boolean #

numColumns: number #

Multiple columns can only be rendered with horizontal={false}`` and will zig-zag like aflexWrap` layout. Items should all be the same height - masonry layouts are not supported.

onEndReached?: ?(info: {distanceFromEnd: number}) => void #

Called once when the scroll position gets within onEndReachedThreshold of the rendered +content.

onEndReachedThreshold?: ?number #

onRefresh?: ?() => void #

If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make +sure to also set the refreshing prop correctly.

onViewableItemsChanged?: ?(info: {viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void #

Called when the viewability of rows changes, as defined by the +viewablePercentThreshold prop.

refreshing?: ?boolean #

Set this true while waiting for new data from a refresh.

renderItem: (info: {item: ItemT, index: number}) => ?React.Element<any> #

Takes an item from data and renders it into the list. Typical usage:

_renderItem = ({item}) => ( <TouchableOpacity onPress={() => this._onPress(item)}> <Text>{item.title}}</Text> <TouchableOpacity/> ); ... -<FlatList data={[{title: 'Title Text', key: 'item1'}]} renderItem={this._renderItem} />

Provides additional metadata like index if you need it.

shouldItemUpdate: ( +<FlatList data={[{title: 'Title Text', key: 'item1'}]} renderItem={this._renderItem} />

Provides additional metadata like index if you need it.

shouldItemUpdate: ( prevInfo: {item: ItemT, index: number}, nextInfo: {item: ItemT, index: number} -) => boolean #

Optional optimization to minimize re-rendering items.

viewabilityConfig?: ViewabilityConfig #

See ViewabilityHelper for flow type and further documentation.

Methods #

scrollToEnd(params?: object) #

Scrolls to the end of the content. May be janky without getItemLayout prop.

scrollToIndex(params: object) #

Scrolls to the item at a the specified index such that it is positioned in the viewable area +) => boolean #

Optional optimization to minimize re-rendering items.

viewabilityConfig?: ViewabilityConfig #

See ViewabilityHelper for flow type and further documentation.

Methods #

scrollToEnd(params?: object) #

Scrolls to the end of the content. May be janky without getItemLayout prop.

scrollToIndex(params: object) #

Scrolls to the item at a the specified index such that it is positioned in the viewable area such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.

May be janky without getItemLayout prop.

scrollToItem(params: object) #

Requires linear scan through data - use scrollToIndex instead if possible. May be janky without getItemLayout prop.

scrollToOffset(params: object) #

Scroll to a specific content pixel offset, like a normal ScrollView.

recordInteraction() #

Tells the list an interaction has occured, which should trigger viewability calculations, e.g. diff --git a/releases/next/docs/flexbox.html b/releases/next/docs/flexbox.html index 0121af18f4a..e44a4f19134 100644 --- a/releases/next/docs/flexbox.html +++ b/releases/next/docs/flexbox.html @@ -1,4 +1,4 @@ -Layout with Flexbox

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Layout with Flexbox #

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

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

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

Flex Direction #

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

import React, { Component } from 'react'; +Layout with Flexbox
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Layout with Flexbox #

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

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

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

Flex Direction #

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

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FlexDirectionBasics extends Component { diff --git a/releases/next/docs/geolocation.html b/releases/next/docs/geolocation.html index cdfadc0e29e..14895f2fb35 100644 --- a/releases/next/docs/geolocation.html +++ b/releases/next/docs/geolocation.html @@ -1,4 +1,4 @@ -Geolocation
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Geolocation #

The Geolocation API extends the web spec: +Geolocation

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Geolocation #

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

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

iOS #

You need to include the NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation when using the app. Geolocation is diff --git a/releases/next/docs/gesture-responder-system.html b/releases/next/docs/gesture-responder-system.html index 3fbef9d04bd..76cdb11ba27 100644 --- a/releases/next/docs/gesture-responder-system.html +++ b/releases/next/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -Gesture Responder System

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Gesture Responder System #

The gesture responder system manages the lifecycle of gestures in your app. 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 #

To make your app feel great, every action should have the following attributes:

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

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

TouchableHighlight and Touchable* #

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

Responder Lifecycle #

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

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

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

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

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

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

evt is a synthetic touch event with the following form:

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

Capture ShouldSet Handlers #

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

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

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

PanResponder #

For higher-level gesture interpretation, check out PanResponder.

← PrevNext →

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Gesture Responder System #

The gesture responder system manages the lifecycle of gestures in your app. 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 #

To make your app feel great, every action should have the following attributes:

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

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

TouchableHighlight and Touchable* #

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

Responder Lifecycle #

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

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

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

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

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

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

evt is a synthetic touch event with the following form:

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

Capture ShouldSet Handlers #

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

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

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

PanResponder #

For higher-level gesture interpretation, check out PanResponder.

← PrevNext →

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Getting Started #

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Getting Started #

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

The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you @@ -67,7 +67,7 @@ choco install python2

You can find additional installation o

The React Native CLI #

Node.js comes with npm, which lets you install the React Native command line interface.

Run the following command in a Terminal:

npm install -g react-native-cli

If you get an error like Cannot find module 'npmlog', try installing npm directly: curl -0 -L https://npmjs.org/install.sh | sudo sh.

-

Xcode #

The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

Xcode Command Line Tools

+

Xcode #

The easiest way to install Xcode 8 is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

Xcode Command Line Tools

Android Development Environment #

Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

1. Download and install Android Studio #

Android Studio provides the Android SDK and AVD (emulator) required to run and test your React Native apps.

diff --git a/releases/next/docs/handling-text-input.html b/releases/next/docs/handling-text-input.html index 6d07c9272d1..65d1728a2de 100644 --- a/releases/next/docs/handling-text-input.html +++ b/releases/next/docs/handling-text-input.html @@ -1,4 +1,4 @@ -Handling Text Input
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Handling Text Input #

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Handling Text Input #

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

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

import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; diff --git a/releases/next/docs/handling-touches.html b/releases/next/docs/handling-touches.html index 77b434d85cc..398c721c1c5 100644 --- a/releases/next/docs/handling-touches.html +++ b/releases/next/docs/handling-touches.html @@ -1,4 +1,4 @@ -Handling Touches
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Handling Touches #

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

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

Tappable Components #

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

Example:

class MyButton extends Component { +Handling Touches
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Handling Touches #

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

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

Tappable Components #

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

Example:

class MyButton extends Component { _onPressButton() { console.log("You tapped the button!"); } diff --git a/releases/next/docs/headless-js-android.html b/releases/next/docs/headless-js-android.html index f48b9fefdd9..9d977bb07e0 100644 --- a/releases/next/docs/headless-js-android.html +++ b/releases/next/docs/headless-js-android.html @@ -1,4 +1,4 @@ -Headless JS
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Headless JS #

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

The JS API #

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

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

Then, in SomeTaskName.js:

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

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Headless JS #

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

The JS API #

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

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

Then, in SomeTaskName.js:

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

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

The Java API #

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

public class MyTaskService extends HeadlessJsTaskService { diff --git a/releases/next/docs/height-and-width.html b/releases/next/docs/height-and-width.html index fb7c5ea8367..bb6e04d1c15 100644 --- a/releases/next/docs/height-and-width.html +++ b/releases/next/docs/height-and-width.html @@ -1,4 +1,4 @@ -Height and Width
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Height and Width #

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

Fixed Dimensions #

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

import React, { Component } from 'react'; +Height and Width
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Height and Width #

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

Fixed Dimensions #

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

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component { diff --git a/releases/next/docs/image.html b/releases/next/docs/image.html index 077cc4f69b1..b9def4f31e6 100644 --- a/releases/next/docs/image.html +++ b/releases/next/docs/image.html @@ -1,4 +1,4 @@ -Image
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Image #

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

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

APIs

Image #

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

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

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

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

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

Props #

onError?: function #

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

onLayout?: function #

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

onLoad?: function #

Invoked when load completes successfully.

onLoadEnd?: function #

Invoked when load either succeeds or fails.

onLoadStart?: function #

Invoked on load start.

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

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

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

Props #

onError?: function #

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

onLayout?: function #

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

onLoad?: function #

Invoked when load completes successfully.

onLoadEnd?: function #

Invoked when load either succeeds or fails.

onLoadStart?: function #

Invoked on load start.

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

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

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

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

  • contain: Scale the image uniformly (maintain the image's aspect ratio) 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.

  • repeat: Repeat the image to cover the frame of the view. The -image will keep it's size and aspect ratio. (iOS only)

source?: ImageSourcePropType #

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

This prop can also contain several remote URLs, specified together with +image will keep it's size and aspect ratio. (iOS only)

source?: ImageSourcePropType #

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

This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the best uri to display based on the measured size of the image container. A cache property can be added to -control how networked request interacts with the local cache.

style?: style #

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

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

androidoverlayColor string

When the image has rounded corners, specifying an overlayColor will +control how networked request interacts with the local cache.

style?: style #

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

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

androidoverlayColor string

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

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

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

testID?: string #

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

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

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

testID?: string #

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

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

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

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

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

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

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

iosaccessibilityLabel?: node #

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

iosaccessible?: bool #

When true, indicates the image is an accessibility element.

iosblurRadius?: number #

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

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

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

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

iosaccessibilityLabel?: node #

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

iosaccessible?: bool #

When true, indicates the image is an accessibility element.

iosblurRadius?: number #

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

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

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

iosdefaultSource?: [object Object], [object Object] #

A static image to display while loading the image source.

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

A static image to display while loading the image source.

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

iosonPartialLoad?: function #

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

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

    • iosonPartialLoad?: function #

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

    iosonProgress?: function #

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

    Methods #

    static getSize(uri: string, success: function, failure: function): #

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

    iosonProgress?: function #

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

    Methods #

    static getSize(uri: string, success: function, failure: function): #

    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.

    Parameters:
    Name and TypeDescription
    uri

    string

    The location of the image.

    success

    function

    The function that will be called if the image was successfully found and width +preload images will be provided as a separate API.

    Does not work for static image resources.

    Parameters:
    Name and TypeDescription
    uri

    string

    The location of the image.

    success

    function

    The function that will be called if the image was successfully found and width and height retrieved.

    failure

    function

    The function that will be called if there was an error, such as failing to to retrieve the image.

    static prefetch(url: string): #

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

    Parameters:
    Name and TypeDescription
    url

    string

    The remote location of the image.

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

    Examples #

    		Edit on GitHub
    'use strict'; diff --git a/releases/next/docs/imageeditor.html b/releases/next/docs/imageeditor.html index a888f80e8af..eaa448f40d6 100644 --- a/releases/next/docs/imageeditor.html +++ b/releases/next/docs/imageeditor.html @@ -1,4 +1,4 @@ -ImageEditor
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ImageEditor #

    Methods #

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

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

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ImageEditor #

    Methods #

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

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

    If the cropping process is successful, the resultant cropped image will be stored in the ImageStore, and the URI returned in the success diff --git a/releases/next/docs/imagepickerios.html b/releases/next/docs/imagepickerios.html index 2b2fa8dba9a..a6120a9610d 100644 --- a/releases/next/docs/imagepickerios.html +++ b/releases/next/docs/imagepickerios.html @@ -1,4 +1,4 @@ -ImagePickerIOS

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ImagePickerIOS #

    Methods #

    static canRecordVideos(callback) #

    static canUseCamera(callback) #

    static openCameraDialog(config, successCallback, cancelCallback) #

    static openSelectDialog(config, successCallback, cancelCallback) #

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ImagePickerIOS #

    Methods #

    static canRecordVideos(callback) #

    static canUseCamera(callback) #

    static openCameraDialog(config, successCallback, cancelCallback) #

    static openSelectDialog(config, successCallback, cancelCallback) #

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

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Images #

    Static Image Resources #

    React Native provides a unified way of managing images and other media assets 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 correct file for the platform.

    You can also use the @2x and @3x suffixes to provide images for different screen densities. If you have the following file structure:

    . +Images
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Images #

    Static Image Resources #

    React Native provides a unified way of managing images and other media assets 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 correct file for the platform.

    You can also use the @2x and @3x suffixes to provide images for different screen densities. If you have the following file structure:

    . ├── button.js └── img ├── check@2x.png diff --git a/releases/next/docs/imagestore.html b/releases/next/docs/imagestore.html index 94748087a57..bec633b66c1 100644 --- a/releases/next/docs/imagestore.html +++ b/releases/next/docs/imagestore.html @@ -1,4 +1,4 @@ -ImageStore
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ImageStore #

    Methods #

    static hasImageForTag(uri, callback) #

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

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    ImageStore #

    Methods #

    static hasImageForTag(uri, callback) #

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

    static removeImageForTag(uri) #

    Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to diff --git a/releases/next/docs/integration-with-existing-apps.html b/releases/next/docs/integration-with-existing-apps.html index 911a6e566b7..cc3edeeecbe 100644 --- a/releases/next/docs/integration-with-existing-apps.html +++ b/releases/next/docs/integration-with-existing-apps.html @@ -1,4 +1,4 @@ -Integration With Existing Apps

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Integration With Existing Apps #

    +Integration With Existing Apps
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    components

    APIs

    Integration With Existing Apps #