mirror of
https://github.com/expo/react-native-action-sheet.git
synced 2026-11-14 19:11:42 -10:00
feat: Add destructiveColor option (#171)
This commit is contained in:
1 parent
b605fb8a3b
commit
5549e36a92
4 files changed
+10
-2
No files matched your search
@@ -121,7 +121,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)
|
||||
|
||||
@@ -155,6 +156,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
|
||||
|
||||
@@ -107,6 +107,7 @@ export default class ActionGroup extends React.Component<Props> {
|
||||
options,
|
||||
icons,
|
||||
destructiveButtonIndex,
|
||||
destructiveColor = DESTRUCTIVE_COLOR,
|
||||
onSelect,
|
||||
startIndex,
|
||||
length,
|
||||
@@ -125,7 +126,7 @@ export default class ActionGroup extends React.Component<Props> {
|
||||
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(
|
||||
|
||||
@@ -107,6 +107,7 @@ export default class ActionSheet extends React.Component<Props, State> {
|
||||
icons,
|
||||
tintIcons,
|
||||
destructiveButtonIndex,
|
||||
destructiveColor,
|
||||
textStyle,
|
||||
tintColor,
|
||||
title,
|
||||
@@ -142,6 +143,7 @@ export default class ActionSheet extends React.Component<Props, State> {
|
||||
icons={icons}
|
||||
tintIcons={tintIcons === undefined ? true : tintIcons}
|
||||
destructiveButtonIndex={destructiveButtonIndex}
|
||||
destructiveColor={destructiveColor}
|
||||
onSelect={this._onSelect}
|
||||
startIndex={0}
|
||||
length={optionsArray.length}
|
||||
|
||||
@@ -28,4 +28,5 @@ export interface ActionSheetOptions extends ActionSheetIOSOptions {
|
||||
containerStyle?: ViewStyle;
|
||||
separatorStyle?: ViewStyle;
|
||||
useModal?: boolean;
|
||||
destructiveColor?: string;
|
||||
}
|
||||
Reference in new issue
Block a user