diff --git a/Examples/UIExplorer/TouchableExample.js b/Examples/UIExplorer/TouchableExample.js
index 377a6ce48f..0d2116a86b 100644
--- a/Examples/UIExplorer/TouchableExample.js
+++ b/Examples/UIExplorer/TouchableExample.js
@@ -100,6 +100,13 @@ exports.examples = [
render: function(): ReactElement {
return ;
},
+ }, {
+ title: 'Disabled Touchable*',
+ description: ' components accept disabled prop which prevents ' +
+ 'any interaction with component',
+ render: function(): ReactElement {
+ return ;
+ },
}];
var TextOnPressBox = React.createClass({
@@ -292,6 +299,45 @@ var TouchableHitSlop = React.createClass({
}
});
+var TouchableDisabled = React.createClass({
+ render: function() {
+ return (
+
+
+ Disabled TouchableOpacity
+
+
+
+ Enabled TouchableOpacity
+
+
+ console.log('custom THW text - hightlight')}>
+
+ Disabled TouchableHighlight
+
+
+
+ console.log('custom THW text - hightlight')}>
+
+ Disabled TouchableHighlight
+
+
+
+ );
+ }
+});
+
var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
var styles = StyleSheet.create({
@@ -310,9 +356,16 @@ var styles = StyleSheet.create({
text: {
fontSize: 16,
},
+ block: {
+ padding: 10,
+ },
button: {
color: '#007AFF',
},
+ disabledButton: {
+ color: '#007AFF',
+ opacity: 0.5,
+ },
hitSlopButton: {
color: 'white',
},
diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js
index 6622ce8ad5..83b07248a7 100644
--- a/Libraries/Components/Touchable/Touchable.js
+++ b/Libraries/Components/Touchable/Touchable.js
@@ -337,7 +337,7 @@ var TouchableMixin = {
* Must return true to start the process of `Touchable`.
*/
touchableHandleStartShouldSetResponder: function() {
- return true;
+ return !this.props.disabled;
},
/**
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index 1108c21e0b..3b67ed00e2 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -44,6 +44,10 @@ var TouchableWithoutFeedback = React.createClass({
React.PropTypes.oneOf(View.AccessibilityTraits),
React.PropTypes.arrayOf(React.PropTypes.oneOf(View.AccessibilityTraits)),
]),
+ /**
+ * If true, disable all interactions for this component.
+ */
+ disabled: React.PropTypes.bool,
/**
* Called when the touch is released, but not if cancelled (e.g. by a scroll
* that steals the responder lock).