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  [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
facebook · Sep 22, 2021 · 0185663 · 0185663
1 parent e2b5b65
commit 0185663
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 6 deletions.
diff --git a/Libraries/ActionSheetIOS/ActionSheetIOS.js b/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,

diff --git a/Libraries/ActionSheetIOS/NativeActionSheetManager.js b/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,
     |},

diff --git a/React/CoreModules/RCTActionSheetManager.mm b/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++;
   }

diff --git a/packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js b/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> {