feat: add cancelButtonTintColor props in ActionSheetIOS for change ca…

…ncel button tint color (#31972)

Summary:
we need to change the text color of the cancel button in `ActionSheetIOS` but `tintColor` changes the all button text color except `destructiveButtonIndex`

so I have added `cancelButtonTintColor` prop to change only the text color of the cancel button

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Changed] - added `cancelButtonTintColor` prop for `ActionSheetIOS` to change only the text color of the cancel button

Pull Request resolved: #31972

Test Plan:
With this PR you can change the cancel text button of `ActionSheetIOS` by this `cancelButtonTintColor` prop

| <img src="https://user-images.githubusercontent.com/36044436/128414537-c4454786-a5cf-49d2-8225-1ff26c9c5058.png"  /> | <img src="https://user-images.githubusercontent.com/36044436/128414549-74a21509-711e-48e0-baf1-3718beae1598.png"  /> | <img src="https://user-images.githubusercontent.com/36044436/128414559-4bee9d1a-ac9f-4cd2-b158-5c4c441158ec.png"  /> |
|-|-|-|

Reviewed By: lunaleaps

Differential Revision: D30878022

Pulled By: yungsters

fbshipit-source-id: c70204f9f2510c75d8e9bed4e0fba79f1c941a1f

Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -47,6 +47,7 @@ const ActionSheetIOS = {
  +cancelButtonIndex?: ?number,
  +anchor?: ?number,
  +tintColor?: ColorValue | ProcessedColorValue,
+ +cancelButtonTintColor?: ColorValue | ProcessedColorValue,
  +userInterfaceStyle?: string,
  +disabledButtonIndices?: Array<number>,
  |},
@@ -59,7 +60,12 @@ const ActionSheetIOS = {
  invariant(typeof callback === 'function', 'Must provide a valid callback');
  invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist");
 
- const {tintColor, destructiveButtonIndex, ...remainingOptions} = options;
+ const {
+ tintColor,
+ cancelButtonTintColor,
+ destructiveButtonIndex,
+ ...remainingOptions
+ } = options;
  let destructiveButtonIndices = null;
 
  if (Array.isArray(destructiveButtonIndex)) {
@@ -69,14 +75,21 @@ const ActionSheetIOS = {
  }
 
  const processedTintColor = processColor(tintColor);
+ const processedCancelButtonTintColor = processColor(cancelButtonTintColor);
  invariant(
  processedTintColor == null || typeof processedTintColor === 'number',
  'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions tintColor',
  );
+ invariant(
+ processedCancelButtonTintColor == null ||
+ typeof processedCancelButtonTintColor === 'number',
+ 'Unexpected color given for ActionSheetIOS.showActionSheetWithOptions cancelButtonTintColor',
+ );
  RCTActionSheetManager.showActionSheetWithOptions(
  {
  ...remainingOptions,
  tintColor: processedTintColor,
+ cancelButtonTintColor: processedCancelButtonTintColor,
  destructiveButtonIndices,
  },
  callback,

Libraries/ActionSheetIOS/NativeActionSheetManager.js

@@ -22,6 +22,7 @@ export interface Spec extends TurboModule {
  +cancelButtonIndex?: ?number,
  +anchor?: ?number,
  +tintColor?: ?number,
+ +cancelButtonTintColor?: ?number,
  +userInterfaceStyle?: ?string,
  +disabledButtonIndices?: Array<number>,
  |},
@@ -34,6 +35,7 @@ export interface Spec extends TurboModule {
  +subject?: ?string,
  +anchor?: ?number,
  +tintColor?: ?number,
+ +cancelButtonTintColor?: ?number,
  +excludedActivityTypes?: ?Array<string>,
  +userInterfaceStyle?: ?string,
  |},

React/CoreModules/RCTActionSheetManager.mm

@@ -94,6 +94,8 @@ - (void)presentViewController:(UIViewController *)alertController
  UIViewController *controller = RCTPresentedViewController();
  NSNumber *anchor = [RCTConvert NSNumber:options.anchor() ? @(*options.anchor()) : nil];
  UIColor *tintColor = [RCTConvert UIColor:options.tintColor() ? @(*options.tintColor()) : nil];
+ UIColor *cancelButtonTintColor =
+ [RCTConvert UIColor:options.cancelButtonTintColor() ? @(*options.cancelButtonTintColor()) : nil];
 
  if (controller == nil) {
  RCTLogError(
@@ -105,6 +107,7 @@ - (void)presentViewController:(UIViewController *)alertController
  @"destructiveButtonIndices" : destructiveButtonIndices,
  @"anchor" : anchor,
  @"tintColor" : tintColor,
+ @"cancelButtonTintColor" : cancelButtonTintColor,
  @"disabledButtonIndices" : disabledButtonIndices,
  });
  return;
@@ -122,20 +125,26 @@ - (void)presentViewController:(UIViewController *)alertController
  preferredStyle:UIAlertControllerStyleActionSheet];
 
  NSInteger index = 0;
+ bool isCancelButtonIndex = false;
  for (NSString *option in buttons) {
  UIAlertActionStyle style = UIAlertActionStyleDefault;
  if ([destructiveButtonIndices containsObject:@(index)]) {
  style = UIAlertActionStyleDestructive;
  } else if (index == cancelButtonIndex) {
  style = UIAlertActionStyleCancel;
+ isCancelButtonIndex = true;
  }
 
  NSInteger localIndex = index;
- [alertController addAction:[UIAlertAction actionWithTitle:option
- style:style
- handler:^(__unused UIAlertAction *action) {
- callback(@[ @(localIndex) ]);
- }]];
+ UIAlertAction *actionButton = [UIAlertAction actionWithTitle:option
+ style:style
+ handler:^(__unused UIAlertAction *action) {
+ callback(@[ @(localIndex) ]);
+ }];
+ if (isCancelButtonIndex) {
+ [actionButton setValue:cancelButtonTintColor forKey:@"titleTextColor"];
+ }
+ [alertController addAction:actionButton];
 
  index++;
  }

packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js

@@ -93,6 +93,41 @@ class ActionSheetTintExample extends React.Component<
  };
 }
 
+class ActionSheetCancelButtonTintExample extends React.Component<
+ $FlowFixMeProps,
+ $FlowFixMeState,
+> {
+ state = {
+ 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',
+ cancelButtonTintColor: 'brown',
+ },
+ buttonIndex => {
+ this.setState({clicked: BUTTONS[buttonIndex]});
+ },
+ );
+ };
+}
+
 class ActionSheetAnchorExample extends React.Component<
  $FlowFixMeProps,
  $FlowFixMeState,
@@ -342,6 +377,12 @@ exports.examples = [
  return <ActionSheetTintExample />;
  },
  },
+ {
+ title: 'Show Action Sheet with cancel tinted button',
+ render(): React.Element<any> {
+ return <ActionSheetCancelButtonTintExample />;
+ },
+ },
  {
  title: 'Show Action Sheet with anchor',
  render(): React.Element<any> {