diff --git a/Examples/UIExplorer/js/ButtonExample.js b/Examples/UIExplorer/js/ButtonExample.js
index a9c68847d..b84b3ecbd 100644
--- a/Examples/UIExplorer/js/ButtonExample.js
+++ b/Examples/UIExplorer/js/ButtonExample.js
@@ -93,4 +93,18 @@ exports.examples = [
);
},
},
+ {
+ title: 'Disabled Button',
+ description: 'All interactions for the component are disabled.',
+ render: function() {
+ return (
+
+ );
+ },
+ },
];
diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 95488868c..9616f63df 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -54,6 +54,7 @@ class Button extends React.Component {
onPress: () => any,
color?: ?string,
accessibilityLabel?: ?string,
+ disabled?: ?boolean,
};
static propTypes = {
@@ -69,6 +70,10 @@ class Button extends React.Component {
* Color of the text (iOS), or background color of the button (Android)
*/
color: ColorPropType,
+ /**
+ * If true, disable all interactions for this component.
+ */
+ disabled: React.PropTypes.bool,
/**
* Handler to be called when the user taps the button
*/
@@ -81,6 +86,7 @@ class Button extends React.Component {
color,
onPress,
title,
+ disabled,
} = this.props;
const buttonStyles = [styles.button];
const textStyles = [styles.text];
@@ -90,6 +96,10 @@ class Button extends React.Component {
} else if (color) {
buttonStyles.push({backgroundColor: color});
}
+ if (disabled) {
+ buttonStyles.push(styles.buttonDisabled);
+ textStyles.push(styles.textDisabled);
+ }
invariant(
typeof title === 'string',
'The title prop of a Button must be a string',
@@ -100,6 +110,7 @@ class Button extends React.Component {
accessibilityComponentType="button"
accessibilityLabel={accessibilityLabel}
accessibilityTraits={['button']}
+ disabled={disabled}
onPress={onPress}>
{formattedTitle}
@@ -139,6 +150,21 @@ const styles = StyleSheet.create({
fontWeight: '500',
},
}),
+ buttonDisabled: Platform.select({
+ ios: {},
+ android: {
+ elevation: 0,
+ backgroundColor: '#dfdfdf',
+ }
+ }),
+ textDisabled: Platform.select({
+ ios: {
+ color: '#cdcdcd',
+ },
+ android: {
+ color: '#a1a1a1',
+ }
+ }),
});
module.exports = Button;
diff --git a/website/src/react-native/img/buttonExample.png b/website/src/react-native/img/buttonExample.png
index 3d8a5753d..40ce923b4 100644
Binary files a/website/src/react-native/img/buttonExample.png and b/website/src/react-native/img/buttonExample.png differ