diff --git a/README.md b/README.md index 2706582..1e714a4 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,8 @@ The below props allow modification of the Android ActionSheet. They have no effe | showSeparators | boolean | No | false | | containerStyle | ViewStyle | No | | | separatorStyle | ViewStyle | No | | -| useModal | boolean | No | false | +| useModal | boolean | No | false | +| destructiveColor | string | No | #d32f2f | #### `icons` (optional) @@ -150,6 +151,9 @@ Modify the look of the separators rather than use the default look. #### `useModal`: (optional) Wrap the ActionSheet with a Modal, in order to show in front of other Modals that were already opened ([issue reference](https://github.com/expo/react-native-action-sheet/issues/164)). +#### `destructiveColor`: (optional) +Modify color for text of destructive option. + ## Try it out Try it in Expo: https://expo.io/@community/react-native-action-sheet-example diff --git a/src/ActionSheet/ActionGroup.tsx b/src/ActionSheet/ActionGroup.tsx index 9cacae7..e785be1 100644 --- a/src/ActionSheet/ActionGroup.tsx +++ b/src/ActionSheet/ActionGroup.tsx @@ -75,6 +75,7 @@ export default class ActionGroup extends React.Component { options, icons, destructiveButtonIndex, + destructiveColor = DESTRUCTIVE_COLOR, onSelect, startIndex, length, @@ -92,7 +93,7 @@ export default class ActionGroup extends React.Component { const defaultColor = tintColor ? tintColor : (textStyle || {}).color || BLACK_87PC_TRANSPARENT; - const color = i === destructiveButtonIndex ? DESTRUCTIVE_COLOR : defaultColor; + const color = i === destructiveButtonIndex ? destructiveColor : defaultColor; const iconSource = icons != null ? icons[i] : null; optionViews.push( diff --git a/src/ActionSheet/index.tsx b/src/ActionSheet/index.tsx index 5c11393..2685d09 100644 --- a/src/ActionSheet/index.tsx +++ b/src/ActionSheet/index.tsx @@ -101,6 +101,7 @@ export default class ActionSheet extends React.Component { icons, tintIcons, destructiveButtonIndex, + destructiveColor, textStyle, tintColor, title, @@ -135,6 +136,7 @@ export default class ActionSheet extends React.Component { icons={icons} tintIcons={tintIcons === undefined ? true : tintIcons} destructiveButtonIndex={destructiveButtonIndex} + destructiveColor={destructiveColor} onSelect={this._onSelect} startIndex={0} length={optionsArray.length} diff --git a/src/types.ts b/src/types.ts index 35515a6..b913a43 100644 --- a/src/types.ts +++ b/src/types.ts @@ -27,4 +27,5 @@ export interface ActionSheetOptions extends ActionSheetIOSOptions { containerStyle?: ViewStyle; separatorStyle?: ViewStyle; useModal?: boolean; + destructiveColor?: string; }