Add tintColor for buttons.

Summary:
Closes #3374
Closes https://github.com/facebook/react-native/pull/4590

Reviewed By: javache

Differential Revision: D2729616

Pulled By: mkonicek

fb-gh-sync-id: 4a3b6de10a09cad73dbd9d5d552adc3f6ba054e0

Examples/UIExplorer/ActionSheetIOSExample.js

@@ -27,7 +27,7 @@ var BUTTONS = [
   'Option 0',
   'Option 1',
   'Option 2',
-  'Destruct',
+  'Delete',
   'Cancel',
 ];
 var DESTRUCTIVE_INDEX = 3;
@@ -65,6 +65,40 @@ var ActionSheetExample = React.createClass({
   }
 });
 
+var ActionSheetTintExample = React.createClass({
+  getInitialState() {
+    return {
+      clicked: 'none',
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text onPress={this.showActionSheet} style={style.button}>
+          Click to show the ActionSheet
+        </Text>
+        <Text>
+          Clicked button: {this.state.clicked}
+        </Text>
+      </View>
+    );
+  },
+
+  showActionSheet() {
+    ActionSheetIOS.showActionSheetWithOptions({
+      options: BUTTONS,
+      cancelButtonIndex: CANCEL_INDEX,
+      destructiveButtonIndex: DESTRUCTIVE_INDEX,
+      tintColor: 'green',
+    },
+    (buttonIndex) => {
+      this.setState({ clicked: BUTTONS[buttonIndex] });
+    });
+  }
+});
+
+
 var ShareActionSheetExample = React.createClass({
   getInitialState() {
     return {
@@ -123,6 +157,10 @@ exports.examples = [
     title: 'Show Action Sheet',
     render(): ReactElement { return <ActionSheetExample />; }
   },
+  {
+    title: 'Show Action Sheet with tinted buttons',
+    render(): ReactElement { return <ActionSheetTintExample />; }
+  },
   {
     title: 'Show Share Action Sheet',
     render(): ReactElement { return <ShareActionSheetExample />; }

Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -14,6 +14,7 @@
 var RCTActionSheetManager = require('NativeModules').ActionSheetManager;
 
 var invariant = require('invariant');
+var processColor = require('processColor');
 
 var ActionSheetIOS = {
   showActionSheetWithOptions(options: Object, callback: Function) {
@@ -26,7 +27,7 @@ var ActionSheetIOS = {
       'Must provide a valid callback'
     );
     RCTActionSheetManager.showActionSheetWithOptions(
-      options,
+      {...options, tintColor: processColor(options.tintColor)},
       callback
     );
   },
@@ -49,7 +50,7 @@ var ActionSheetIOS = {
       'Must provide a valid successCallback'
     );
     RCTActionSheetManager.showShareActionSheetWithOptions(
-      options,
+      {...options, tintColor: processColor(options.tintColor)},
       failureCallback,
       successCallback
     );

Libraries/ActionSheetIOS/RCTActionSheetManager.m

@@ -16,7 +16,6 @@
 #import "RCTUIManager.h"
 
 @interface RCTActionSheetManager () <UIActionSheetDelegate>
-
 @end
 
 @implementation RCTActionSheetManager
@@ -139,6 +138,8 @@ RCT_EXPORT_METHOD(showActionSheetWithOptions:(NSDictionary *)options
       alertController.popoverPresentationController.permittedArrowDirections = 0;
     }
     [controller presentViewController:alertController animated:YES completion:nil];
+
+    alertController.view.tintColor = [RCTConvert UIColor:options[@"tintColor"]];
   }
 }
 
@@ -210,6 +211,8 @@ RCT_EXPORT_METHOD(showShareActionSheetWithOptions:(NSDictionary *)options
   }
 
   [controller presentViewController:shareController animated:YES completion:nil];
+
+  shareController.view.tintColor = [RCTConvert UIColor:options[@"tintColor"]];
 }
 
 #pragma mark UIActionSheetDelegate Methods