From 5379511eaf89c678303b2298315bbc9f5a35fd5d Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 28 Feb 2017 02:08:20 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/alert.html | 8 +++++--- releases/next/docs/communication-ios.html | 2 +- releases/next/docs/touchablehighlight.html | 11 ++++++----- releases/next/docs/touchablenativefeedback.html | 6 +++--- releases/next/docs/touchableopacity.html | 5 ++--- releases/next/docs/touchablewithoutfeedback.html | 3 ++- releases/next/docs/using-a-listview.html | 2 +- 7 files changed, 20 insertions(+), 17 deletions(-) diff --git a/releases/next/docs/alert.html b/releases/next/docs/alert.html index c62e9e4d157..d33941c23be 100644 --- a/releases/next/docs/alert.html +++ b/releases/next/docs/alert.html @@ -4,9 +4,11 @@ button will be an 'OK' button.

This is an API that works both on alerts. To show an alert that prompts the user to enter some information, see AlertIOS; entering text in an alert is common on iOS only.

iOS #

On iOS you can specify any number of buttons. Each button can optionally specify a style, which is one of 'default', 'cancel' or 'destructive'.

Android #

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

Note that by default alerts on Android can be dismissed by clicking outside of their alert box. -To prevent this behavior, you can provide -an optional options parameter { cancelable: false } to the Alert method.

Example usage:

// Works on both iOS and Android +of a neutral, negative and a positive button:

  • If you specify one button, it will be the 'positive' one (such as 'OK')
  • Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
  • Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')

By default alerts on Android can be dismissed by tapping outside of the alert +box. This event can be handled by providing an optional options parameter, +with an onDismiss callback property { onDismiss: () => {} }.

Alternatively, the dismissing behavior can be disabled altogether by providing +an optional options parameter with the cancelable property set to false +i.e. { cancelable: false }

Example usage:

// Works on both iOS and Android Alert.alert( 'Alert Title', 'My Alert Msg', diff --git a/releases/next/docs/communication-ios.html b/releases/next/docs/communication-ios.html index 92bcb6c779c..074214d853c 100644 --- a/releases/next/docs/communication-ios.html +++ b/releases/next/docs/communication-ios.html @@ -71,7 +71,7 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F - (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView { CGRect newFrame = rootView.frame; - newFrame.size = rootView.intrinsicSize; + newFrame.size = rootView.intrinsicContentSize; rootView.frame = newFrame; }

In the example we have a FlexibleSizeExampleView view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to RCTRootViewSizeFlexibilityHeight, which means that rootViewDidChangeIntrinsicSize: method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.

You can checkout full source code of the example here.

It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate rootViewDidChangeIntrinsicSize: method will be called once the content size is known.

Note: React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.

Note: React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use UIView's hidden property). Then change its visibility in the delegate method.

← 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

TouchableHighlight #

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows -the underlay color to show through, darkening or tinting the view. The -underlay comes from adding a view to the view hierarchy, which can sometimes -cause unwanted visual artifacts if not used correctly, for example if the -backgroundColor of the wrapped view isn't explicitly set to an opaque color.

Example:

renderButton: function() { +the underlay color to show through, darkening or tinting the view.

The underlay comes from wrapping the child in a new View, which can affect +layout, and sometimes cause unwanted visual artifacts if not used correctly, +for example if the backgroundColor of the wrapped view isn't explicitly set +to an opaque color.

TouchableHighlight must have one child (not zero or more than one). +If you wish to have several child components, wrap them in a View.

Example:

renderButton: function() { return ( <TouchableHighlight onPress={this._onPressButton}> <Image @@ -12,7 +13,7 @@ backgroundColor of the wrapped view isn't explicitly set to an opaque color /> </TouchableHighlight> ); -},

NOTE: TouchableHighlight must have one child (not zero or more than one)

If you wish to have several child components, wrap them in a View.

Props #

TouchableWithoutFeedback props... #

activeOpacity number #

Determines what the opacity of the wrapped view should be when touch is +},

Props #

TouchableWithoutFeedback props... #

activeOpacity number #

Determines what the opacity of the wrapped view should be when touch is active.

onHideUnderlay function #

Called immediately after the underlay is hidden

onShowUnderlay function #

Called immediately after the underlay is shown

style View#style #

underlayColor color #

The color of the underlay that will show through when the touch is active.

ioshasTVPreferredFocus bool #

(Apple TV only) TV preferred focus (see documentation for the View component).

iostvParallaxProperties object #

(Apple TV only) Object with properties to control Apple TV parallax effects.

enabled: If true, parallax effects are enabled. Defaults to true. shiftDistanceX: Defaults to 2.0. diff --git a/releases/next/docs/touchablenativefeedback.html b/releases/next/docs/touchablenativefeedback.html index 4cae82e3c9d..94ff703bd88 100644 --- a/releases/next/docs/touchablenativefeedback.html +++ b/releases/next/docs/touchablenativefeedback.html @@ -1,8 +1,8 @@ TouchableNativeFeedback

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

TouchableNativeFeedback #

A wrapper for making views respond properly to touches (Android only). On Android this component uses native state drawable to display touch -feedback. At the moment it only supports having a single View instance as a -child node, as it's implemented by replacing that View with another instance -of RCTView node with some additional properties set.

Background drawable of native feedback touchable can be customized with +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 of +RCTView node with some additional properties set.

Background drawable of native feedback touchable can be customized with background property.

Example:

renderButton: function() { return ( <TouchableNativeFeedback diff --git a/releases/next/docs/touchableopacity.html b/releases/next/docs/touchableopacity.html index 8a408af20dc..07fce8d5841 100644 --- a/releases/next/docs/touchableopacity.html +++ b/releases/next/docs/touchableopacity.html @@ -1,7 +1,6 @@ TouchableOpacity
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

TouchableOpacity #

A wrapper for making views respond properly to touches. -On press down, the opacity of the wrapped view is decreased, dimming it. -This is done without actually changing the view hierarchy, and in general is -easy to add to an app without weird side-effects.

Example:

renderButton: function() { +On press down, the opacity of the wrapped view is decreased, dimming it.

Opacity is controlled by wrapping the children in an Animated.View, which is +added to the view hiearchy. Be aware that this can affect layout.

Example:

renderButton: function() { return ( <TouchableOpacity onPress={this._onPressButton}> <Image diff --git a/releases/next/docs/touchablewithoutfeedback.html b/releases/next/docs/touchablewithoutfeedback.html index 61461f67094..94f3ec00243 100644 --- a/releases/next/docs/touchablewithoutfeedback.html +++ b/releases/next/docs/touchablewithoutfeedback.html @@ -1,5 +1,6 @@ TouchableWithoutFeedback
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

TouchableWithoutFeedback #

Do not use unless you have a very good reason. All the elements that -respond to press should have a visual feedback when touched.

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 +respond to press should have a visual feedback when touched.

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. NOTE The touch area never extends past the parent view bounds and the Z-index diff --git a/releases/next/docs/using-a-listview.html b/releases/next/docs/using-a-listview.html index 5c494cdb308..a9fa68aae4d 100644 --- a/releases/next/docs/using-a-listview.html +++ b/releases/next/docs/using-a-listview.html @@ -1,4 +1,4 @@ -Using a ListView

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Using a ListView #

The ListView component displays a vertically scrolling list of changing, but similarly structured, data.

ListView works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the ListView only renders elements that are currently showing on the screen, not all the elements at once.

The ListView component requires two props: dataSource and renderRow. dataSource is the source of information for the list. renderRow takes one item from the source and returns a formatted component to render.

This example creates a simple ListView of hardcoded data. It first initializes the dataSource that will be used to populate the ListView. Each item in the dataSource is then rendered as a Text component. Finally it renders the ListView and all Text components.

A rowHasChanged function is required to use ListView. Here we just say a row has changed if the row we are on is not the same as the previous row.

import React, { Component } from 'react'; +Using a ListView
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Using a ListView #

The ListView component displays a scrolling list of changing, but similarly structured, data.

ListView works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the ListView only renders elements that are currently showing on the screen, not all the elements at once.

The ListView component requires two props: dataSource and renderRow. dataSource is the source of information for the list. renderRow takes one item from the source and returns a formatted component to render.

This example creates a simple ListView of hardcoded data. It first initializes the dataSource that will be used to populate the ListView. Each item in the dataSource is then rendered as a Text component. Finally it renders the ListView and all Text components.

A rowHasChanged function is required to use ListView. Here we just say a row has changed if the row we are on is not the same as the previous row.

import React, { Component } from 'react'; import { AppRegistry, ListView, Text, View } from 'react-native'; class ListViewBasics extends Component {