React NativeTouchableHighlight #
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:
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:
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 #
activeOpacity number #
Determines what the opacity of the wrapped view should be when touch is +},
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 #
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 #
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:
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:
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:
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 #
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
rowHasChangedfunction is required to useListView. Here we just say a row has changed if the row we are on is not the same as the previous row.
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
rowHasChangedfunction is required to useListView. Here we just say a row has changed if the row we are on is not the same as the previous row.