Add disabled prop

Summary:
Implemented feature requested in https://github.com/facebook/react-native/issues/10354, updated docs.
The colours were picked from native interface for iOS and from material-ui for android.
Closes https://github.com/facebook/react-native/pull/10398

Differential Revision: D4026189

Pulled By: ericvicenti

fbshipit-source-id: f3316e76f5a4126c07ffcdfb134cd902f40624d5

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 (
+        <Button
+          disabled
+          onPress={onButtonPress}
+          title="I Am Disabled"
+          accessibilityLabel="See an informative alert"
+        />
+      );
+    },
+  },
 ];

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}>
         <View style={buttonStyles}>
           <Text style={textStyles}>{formattedTitle}</Text>
@@ -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;