feat: Allow multiple destructive indices (#210)

Author: evrimfeyyaz

src/ActionSheet/ActionGroup.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import {
-  StyleSheet,
-  Text,
-  Image,
-  View,
-  ScrollView,
-  findNodeHandle,
   AccessibilityInfo,
+  findNodeHandle,
+  Image,
   Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
   UIManager,
+  View,
 } from 'react-native';
 import TouchableNativeFeedbackSafe from './TouchableNativeFeedbackSafe';
 import { ActionSheetOptions } from '../types';
@@ -46,6 +46,14 @@ const focusViewOnRender = (ref: React.Component | null) => {
   }
 };
 
+const isIndexDestructive = (index: number, destructiveIndex?: number | number[]) => {
+  if (Array.isArray(destructiveIndex)) {
+    return destructiveIndex.includes(index);
+  }
+
+  return index === destructiveIndex;
+};
+
 export default class ActionGroup extends React.Component<Props> {
   static defaultProps = {
     title: null,
@@ -126,7 +134,7 @@ export default class ActionGroup extends React.Component<Props> {
       const defaultColor = tintColor
         ? tintColor
         : (textStyle || {}).color || BLACK_87PC_TRANSPARENT;
-      const color = i === destructiveButtonIndex ? destructiveColor : defaultColor;
+      const color = isIndexDestructive(i, destructiveButtonIndex) ? destructiveColor : defaultColor;
       const iconSource = icons != null ? icons[i] : null;
 
       optionViews.push(
@@ -169,7 +177,7 @@ const styles = StyleSheet.create({
     width: 24,
     height: 24,
     marginRight: 32,
-    justifyContent: "center",
+    justifyContent: 'center',
   },
   message: {
     marginTop: 12,

src/ActionSheet/index.ios.tsx

@@ -34,6 +34,7 @@ export default class ActionSheet extends React.Component<Props> {
       anchor: dataOptions.anchor || undefined,
       userInterfaceStyle: dataOptions.userInterfaceStyle || undefined,
     };
+    // @ts-ignore: Even though ActionSheetIOS supports array of numbers for `destructiveIndex` the types are not yet updated. See https://github.com/facebook/react-native/pull/18254.
     ActionSheetIOS.showActionSheetWithOptions(iosOptions, onSelect);
   }
 }

src/types.ts

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 
 export interface ActionSheetProps {
-  showActionSheetWithOptions: (options: ActionSheetOptions, callback: (i: number) => void | Promise<void>) => void;
+  showActionSheetWithOptions: (
+    options: ActionSheetOptions,
+    callback: (i: number) => void | Promise<void>
+  ) => void;
 }
 
 // for iOS
@@ -12,7 +15,7 @@ export interface ActionSheetIOSOptions {
   message?: string;
   tintColor?: string;
   cancelButtonIndex?: number;
-  destructiveButtonIndex?: number;
+  destructiveButtonIndex?: number | number[];
   anchor?: number;
   userInterfaceStyle?: 'light' | 'dark';
 }