feat: support cancelButtonTintColor (#278)

* feat: bump expo to sdk 46
* feat: add support for cancelButtonTintColor

example/App.tsx

@@ -96,6 +96,12 @@ class App extends React.Component<Props, State> {
           onSelection={this._updateSelectionText}
           showActionSheetWithOptions={showActionSheetWithOptions}
         />
+        <ShowActionSheetButton
+          title="Cancel Button Tint Color"
+          withCancelButtonTintColor
+          onSelection={this._updateSelectionText}
+          showActionSheetWithOptions={showActionSheetWithOptions}
+        />
         <ShowActionSheetButton
           title="iPad Anchor"
           withAnchor

example/ShowActionSheetButton.tsx

@@ -19,6 +19,7 @@ interface Props {
   withIcons?: boolean;
   withSeparators?: boolean;
   withCustomStyles?: boolean;
+  withCancelButtonTintColor?: boolean;
   withAnchor?: boolean;
   useModal?: boolean;
 }
@@ -32,6 +33,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
     withSeparators: false,
     withCustomStyles: false,
     withAnchor: false,
+    withCancelButtonTintColor: false,
     onSelection: null,
     useModal: false,
   };
@@ -46,6 +48,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
       withIcons,
       withSeparators,
       withCustomStyles,
+      withCancelButtonTintColor,
       onSelection,
       showActionSheetWithOptions,
       useModal,
@@ -98,6 +101,7 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
       {
         options,
         cancelButtonIndex,
+        cancelButtonTintColor: withCancelButtonTintColor ? '#D93F0B' : undefined,
         destructiveButtonIndex,
         disabledButtonIndices,
         title,

example/package.json

@@ -13,18 +13,18 @@
   },
   "dependencies": {
     "@expo/react-native-action-sheet": "../src",
-    "@expo/vector-icons": "^12.0.0",
-    "expo": "^43.0.0-beta.3",
+    "@expo/vector-icons": "^13.0.0",
+    "expo": "^46.0.0",
     "hoist-non-react-statics": "^3.3.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-native": "0.64.2",
-    "react-native-web": "0.17.1"
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.6",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@types/react": "~17.0.21",
-    "@types/react-native": "~0.64.12",
-    "babel-preset-expo": "8.5.1",
-    "typescript": "~4.3.5"
+    "@types/react": "~18.0.0",
+    "@types/react-native": "~0.69.1",
+    "babel-preset-expo": "~9.2.0",
+    "typescript": "^4.6.3"
   }
 }

src/ActionSheet/ActionGroup.tsx

@@ -119,6 +119,8 @@ export default class ActionGroup extends React.Component<Props> {
     const {
       options,
       icons,
+      cancelButtonIndex,
+      cancelButtonTintColor,
       destructiveButtonIndex,
       disabledButtonIndices,
       destructiveColor = DESTRUCTIVE_COLOR,
@@ -141,7 +143,12 @@ export default class ActionGroup extends React.Component<Props> {
         ? tintColor
         : (textStyle || {}).color || BLACK_87PC_TRANSPARENT;
       const disabled = isIndexDisabled(i, disabledButtonIndices);
-      const color = isIndexDestructive(i, destructiveButtonIndex) ? destructiveColor : defaultColor;
+      const isCancelButton = i === cancelButtonIndex;
+      const color = isIndexDestructive(i, destructiveButtonIndex)
+        ? destructiveColor
+        : isCancelButton
+        ? cancelButtonTintColor || defaultColor
+        : defaultColor;
       const iconSource = icons != null ? icons[i] : null;
 
       optionViews.push(

src/ActionSheet/index.ios.tsx

@@ -21,13 +21,20 @@ export default class ActionSheet extends React.Component<Props> {
 
   showActionSheetWithOptions(dataOptions: ActionSheetIOSOptions, onSelect: onSelect) {
     // ...dataOptions include other keys which use in android and web, thats why `Android-Only options` Crash on IOS
-    const { cancelButtonIndex, destructiveButtonIndex, options, tintColor, disabledButtonIndices } =
-      dataOptions;
+    const {
+      cancelButtonIndex,
+      destructiveButtonIndex,
+      options,
+      tintColor,
+      cancelButtonTintColor,
+      disabledButtonIndices,
+    } = dataOptions;
     const iosOptions: ActionSheetIOSOptions = {
       cancelButtonIndex,
       destructiveButtonIndex,
       options,
       tintColor,
+      cancelButtonTintColor,
       disabledButtonIndices,
       // A null title or message on iOS causes a crash
       title: dataOptions.title || undefined,

src/ActionSheet/index.tsx

@@ -141,6 +141,8 @@ export default class ActionSheet extends React.Component<Props, State> {
       showSeparators,
       containerStyle,
       separatorStyle,
+      cancelButtonIndex,
+      cancelButtonTintColor,
     } = options;
     return (
       <TouchableWithoutFeedback importantForAccessibility="yes" onPress={this._selectCancelButton}>
@@ -165,6 +167,8 @@ export default class ActionSheet extends React.Component<Props, State> {
               options={optionsArray}
               icons={icons}
               tintIcons={tintIcons === undefined ? true : tintIcons}
+              cancelButtonIndex={cancelButtonIndex}
+              cancelButtonTintColor={cancelButtonTintColor}
               destructiveButtonIndex={destructiveButtonIndex}
               destructiveColor={destructiveColor}
               disabledButtonIndices={disabledButtonIndices}

src/types.ts

@@ -15,6 +15,7 @@ export interface ActionSheetIOSOptions {
   message?: string;
   tintColor?: string;
   cancelButtonIndex?: number;
+  cancelButtonTintColor?: string;
   destructiveButtonIndex?: number | number[];
   anchor?: number;
   userInterfaceStyle?: 'light' | 'dark';