Summary:The website now displays public methods on components. This was implemented mostly in react-docgen via #66. This adds a <Method> component that is used by the component and API doc pages to display documentation for a method.
It also adds some missing documentation and tweak some existing one to integrate with this feature. I also prefixed some component methods with an '_' so they don't show up in the doc.
**Test plan (required)**
Tested every component page locally to make sure the methods doc was displayed properly.
Tested an API page to make sure it still worked properly.
Closes https://github.com/facebook/react-native/pull/6890
Differential Revision: D3159911
Pulled By: vjeux
fb-gh-sync-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
fbshipit-source-id: 1e6a4640cda6794496d9844c1af6a1451c017dcc
Summary:New prop `hitSlop` allows extending the touch area of Touchable components. This makes it easier to touch small buttons without needing to change your styles.
It takes `top`, `bottom`, `left`, and `right` same as the `pressRetentionOffset` prop. When a touch is moved, `hitSlop` is combined with `pressRetentionOffset` to determine how far the touch can move off the button before deactivating the button.
On Android I had to add a new file `ids.xml` to generate a unique ID to use for the tag where I store the `hitSlop` state. The iOS side is more straightforward.
terribleben worked on the iOS and JS parts of this diff.
Fixes#110
Closes https://github.com/facebook/react-native/pull/5720
Differential Revision: D2941671
Pulled By: androidtrunkagent
fb-gh-sync-id: 07e3eb8b6a36eebf76968fdaac3c6ac335603194
shipit-source-id: 07e3eb8b6a36eebf76968fdaac3c6ac335603194
Summary:
accessibilityLabels are missing in these touchable*.js files.
for #5322
ide This is not tested yet. I will update with test.
Closes https://github.com/facebook/react-native/pull/5346
Reviewed By: svcscm
Differential Revision: D2882061
Pulled By: gkassabli
fb-gh-sync-id: dff0ef373e5f5895027cb1cc08c8887a6ace8eee
Summary: The touch-retention offset defines a rect around a touchable component in which the touch is retained. Easiest way to see this is to touch a button in a real navigation bar and slide your finger out of the range and back in. This diff exposes the offset as a prop (I thought touchRetentionOffset was a more informative name than pressRectOffset)
Fixes#198
Closes https://github.com/facebook/react-native/pull/713
Reviewed By: svcscm
Differential Revision: D2115370
Pulled By: shayne
fb-gh-sync-id: c3f57940dfa3806f9c88df03a01d4d65bb58cf32
Summary:
Supports `onLayout` for Touchable*` by piping onLayout
through to the native component inside since only native components support
it by default.
Summary:
We want to be able to access the touch data within our components' event handlers, so we need to thread the event object all the way through to them.
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:
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:
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.
Janic Duplessis
Jesse Ruder
fangmobile
Gabe Levi
James Ide
facebook-github-bot-6
Christopher Chedeau
Chace Liang
Spencer Ahrens
Hedger Wang
Martin Konicek
Bill Fisher
Eric Vicenti
jmstout
Patrick Williams
Ben Alpert
Brent Vatne
Ryan Warren
Basil Hosmer
Amjad Masad
