Summary:
Because we don't want to integrate Animated inside of the core of React, we can only pass Animated.Value to styles of <Animated.View>. TouchableOpacity unfortunately used cloneElement. This means that we should have asked every single call site to replace their children to Animated.View. This isn't great.
The other solution is to stop using cloneElement and instead wrap the children inside of an <Animated.View>. This has many advantages:
- We no longer use cloneElement so we're no longer messing up with elements that are not our own.
- Refs are now working correctly for children elements
- No longer need to enforce that there's only one child and that this child is a native element
The downside is that we're introducing a <View> into the hierarchy. Sadly with CSS there is no way to have a View that doesn't affect layout. What we need to do is to remove the inner <View> and transfer all the styles to the TouchableOpacity. It is annoying but fortunately a pretty mechanical process.
I think that having a wrapper is the best solution. I will investigate to see if we can make wrappers on TouchableHighliht and TouchableWithoutFeedback as well.
**Upgrade Path:**
If the child is a View, move the style of the View to TouchableOpacity and remove the View itself.
```
<TouchableOpacity onPress={...}>
<View style={...}>
...
</View>
</TouchableOpacity>
-->
<TouchableOpacity onPress={...} style={...}>
...
</TouchableOpacity>
```
If the child is an Image or Text, on all the examples at Facebook it worked without any change. But it is a great idea to double check them anyway.
Summary:
@public
This PR adds quite a bit of functionality to the Touchable components, allowing the ms delays of each of the handlers (`onPressIn, onPressOut, onPress, onLongPress`) to be configured.
It adds the following props to `TouchableWithoutFeedback, TouchableOpacity, and TouchableHighlight`:
```javascript
/**
* Delay in ms, from the release of the touch, before onPress is called.
*/
delayOnPress: React.PropTypes.number,
/**
* Delay in ms, from the start of the touch, before onPressIn is called.
*/
delayOnPressIn: React.PropTypes.number,
/**
* Delay in ms, from the release of the touch, before onPressOut is called.
*/
delayOnPressOut: React.PropTypes.number,
/**
* Delay in ms, from onPressIn, before onLongPress is called.
*/
delayOnLongPress: React.PropTypes.number,
```
`TouchableHighlight` also gets an additional set of props:
```javascript
/**
* Delay in ms, from the start of the touch, before the highlight is shown.
*/
delayHighlightShow: React.PropTypes.number,
/**
* Del
...
```
Closes https://github.com/facebook/react-native/pull/1255
Github Author: jmstout <git@jmstout.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
As per #941 - fixes bug with `TouchabeOpacity` always reseting child opacity to `1.0` after press.
A note about the code: we could probably use a general `getNativeProp(propName, callback)` function rather than `getOpacity` but just used that as it was simpler for this specific PR, perhaps that refactor could be left to another - or maybe there is a way to do this already that I missed.
Before:
After:
Example code:
```javascript
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
} = React;
var TestIt = React.createClass({
render() {
return (
<View style={styles.container}>
<TouchableOpacity activeOpacity={0.3}>
<View style={styles.searchButton}>
<Text>
Closes https://github.com/facebook/react-native/pull/977
Github Author: Brent Vatne <brent.vatne@madriska.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Added constraint of child type to touchablewithoutfeedback to match touchablehighlight (this would have failed silently previously), also added the cloneWithProps as by note of @vjeux
Closes https://github.com/facebook/react-native/pull/517
Github Author: Daniele Zannotti <d.zannotti@me.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
Found a typo in the TouchableOpacity and TouchableHighlight documentation
Closes https://github.com/facebook/react-native/pull/292
Github Author: Ryan Warren <ryan@war.re>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Summary:
If you give a TouchableHighlight component some styling (e.g. a background color) with the `underlayStyle` prop, the style is wiped away after touching the component. This diff restores the `underlayStyle`.
Closes https://github.com/facebook/react-native/pull/129
Github Author: James Ide <ide@jameside.com>
Test Plan:
Create a TouchableHighlight that receives `underlayStyle={{style:
'blue'}}`. It initially has a blue background. Touch it and let go. See the blue background now comes back as expected.
Summary:
Summary:
Instead of having a separate TouchablePropTypes, put those in TouchableWithoutFeedback and have the other ones use ...TouchableWithoutFeedback.propTypes. This makes it work with the docs parsing.
Closes https://github.com/facebook/react-native/pull/159
Github Author: Christopher Chedeau <vjeux@fb.com>
Test Plan:
Run the website, make sure all the touchable components have the right prop types
CC:
Task ID: #
Summary:
The following props are now supported on TouchableHighlight/Opacity components:
- onPress (was there before)
- onPressIn
- onPressOut
- onLongPress
There is a `TouchableFeedbackPropType` that is shared amongst the Touchable family for consistency.
Added UIExplorer example to demonstrate and test.
Fixes#101.
Closes https://github.com/facebook/react-native/pull/102
Github Author: James Ide <ide@jameside.com>
Test Plan: Imported from GitHub, without a `Test Plan:` line.
Chace Liang
Dorota Kapturkiewicz
Christopher Chedeau
Elliot Lynde
Nick Lockwood
Alex Kotliarskyi
jmstout
Changgeng Li
Krzysztof Magiera
Ben Alpert
Eric Vicenti
Brent Vatne
Spencer Ahrens
Daniele Zannotti
James Ide
Ryan Warren
Basil Hosmer
Tadeu Zagallo
Amjad Masad
Alex Akers
