status-im
/
react-native-dialogs
mirror of https://github.com/status-im/react-native-dialogs.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
react-native-dialogs/README.md

741 lines
44 KiB
Markdown
Raw Permalink Blame History

## react-native-dialogs
[![All Contributors](https://img.shields.io/badge/all_contributors-25-orange.svg?style=flat-square)](#contributors)
An Android only module for Material Design dialogs. This is a wrapper over [afollestad/material-dialogs](https://github.com/afollestad/material-dialogs). This module is designed for Android only with no plans to support iOS.
### Table of Contents
- [Installation](#installation)
- [Manual Linking](#manual-linking)
- [Usage](#usage)
- [API](#api)
- [Properties](#properties)
- [`defaults`](#defaults)
- [`actionDismiss`](#actiondismiss)
- [`actionNegative`](#actionnegative)
- [`actionNeutral`](#actionneutral)
- [`actionPositive`](#actionpositive)
- [`listPlain`](#listplain)
- [`listRadio`](#listradio)
- [`listCheckbox`](#listcheckbox)
- [`progressHorizontal`](#progresshorizontal)
- [Methods](#methods)
- [`alert`](#alert)
- [`assignDefaults`](#assigndefaults)
- [`dismiss`](#dismiss)
- [`prompt`](#prompt)
- [`showPicker`](#showpicker)
- [`showProgress`](#showprogress)
- [Types](#types)
- [Internal Types](#internal-types)
- [`type ActionType`](#type-actiontype)
- [`type ListItem`](#type-listitem)
- [`type ListType`](#type-listtype)
- [`type OptionsAlert`](#type-optionsalert)
- [`type OptionsCommon`](#type-optionscommon)
- [`type OptionsProgress`](#type-optionsprogress)
- [`type OptionsPicker`](#type-optionspicker)
- [`type OptionsPrompt`](#type-optionsprompt)
- [`type ProgressStyle`](#type-progressstyle)
- [Examples](#examples)
- [Progress Dialog](#progress-dialog)
- [Basic List](#basic-list)
- [Radio List](#radio-list)
- [Without auto-dismiss](#without-auto-dismiss)
- [Checklist](#checklist)
- [With clear list button](#with-clear-list-button)
- [Prompt](#prompt-1)
- [HTML](#html)
- [assignDefaults](#assigndefaults-1)
- [Contributors](#contributors)
### Installation
1. Install:
- Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-dialogs --save`
- Using [Yarn](https://yarnpkg.com/): `yarn add react-native-dialogs`
2. [Link](https://facebook.github.io/react-native/docs/linking-libraries-ios.html):
- `react-native link react-native-dialogs`
- Or if this fails, link manually using [these steps](#manual-linking)
3. Compile application using `react-native run-android`
#### Manual Linking
Follow these steps if automatic linking (`react-native link`) failed.
1. In `android/app/build.gradle`, add the dependency to your app build:
```
dependencies {
...
compile project(':react-native-dialogs') // Add this
}
```
2. In `android/build.gradle`, it should already be there, but in case it is not, add Jitpack maven repository to download the library [afollestad/material-dialogs](https://github.com/afollestad/material-dialogs):
```
allprojects {
repositories {
...
jcenter() // Add this if it is not already here
...
}
}
```
3. In `android/settings.gradle`:
```
rootProject.name = ...
...
include ':react-native-dialogs' // Add this
project(':react-native-dialogs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dialogs/android') // Add this
...
include ':app'
```
4. Import and add package, in `android/app/src/main/.../MainApplication.java`:
```java
...
import android.app.Application;
...
import com.aakashns.reactnativedialogs.ReactNativeDialogsPackage; // Add new import
...
public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
...
new ReactNativeDialogsPackage() // Add the package here
);
}
}
```
### Usage
1. Import it in your JS:
```js
import DialogAndroid from 'react-native-dialogs';
```
2. Call API:
```js
class Blah extends Component {
render() {
return <Button title="Show DialogAndroid" onPress={this.showDialogAndroid} />
}
showDialogAndroid = async () => {
const { action } = await DialogAndroid.alert('Title', 'Message');
switch (action) {
case DialogAndroid.actionPositive:
console.log('positive!')
break;
case DialogAndroid.actionNegative:
console.log('negative!')
break;
case DialogAndroid.actionNeutral:
console.log('neutral!')
break;
case DialogAndroid.actionDismiss:
console.log('dismissed!')
break;
}
}
}
```
### API
#### Properties
##### `defaults`
> {
> positiveText: 'OK'
> }
The default options to be used by all methods. To modify this, either directly manipulate with `DialogAndroid.defaults = { ... }` or use [`assignDefaults`](#assigndefaults)
##### `actionDismiss`
> static actionDismiss = "actionDismiss"
##### `actionNegative`
> static actionNegative = "actionNegative"
##### `actionNeutral`
> static actionNeutral = "actionNeutral"
##### `actionPositive`
> static actionPositive = "actionPositive"
##### `listPlain`
> static listPlain = "listPlain"
##### `listRadio`
> static listRadio = "listRadio"
##### `listCheckbox`
> static listCheckbox = "listCheckbox"
##### `progressHorizontal`
> static progressHorizontal = "progressHorizontal"
#### Methods
##### `alert`
> static alert(
> title: Title,
> content: Content,
> options: OptionsAlert
> ): Promise<
> {| action: "actionDismiss" | "actionNegative" | "actionNeutral" | "actionPositive" |} |
> {| action: "actionDismiss" | "actionNegative" | "actionNeutral" | "actionPositive", checked: boolean |}
> >
Shows a dialog.
| Parameter | Type | Default | Required | Description |
|-----------|--------------------------------------|---------|----------|------------------------------------------|
| title | `string, null, void` | | | Title of dialog |
| content | `string, null, void` | | | Message of dialog |
| options | [`OptionsAlert`](#type-optionsalert) | | | See [`OptionsAlert`](#type-optionsalert) |
##### `assignDefaults`
> static assignDefaults({
> [string]: value
> ): void
Set default colors for example, so you don't have to provide it on every method call.
> {
> positiveText: 'OK'
> }
##### `dismiss`
> static dismiss(): void
Hides the currently showing dialog.
##### `prompt`
> static prompt(
> title?: null | string,
> content?: null | string,
> options: OptionsPrompt
> ): Promise<
> {| action: "actionNegative" | "actionNeutral" | "actionDismiss" |} |
> {| action: "actionNegative" | "actionNeutral", checked: boolean |} |
> {| action: "actionPositive", text: string |} |
> {| action: "actionPositive", text: string, checked: boolean |}
> >
Shows a dialog with a text input field.
| Parameter | Type | Default | Required | Description |
|-----------|----------------------------------------|---------|----------|--------------------------------------------|
| title | `string, null, void` | | | Title of dialog |
| content | `string, null, void` | | | Message of dialog |
| options | [`OptionsPrompt`](#type-optionsprompt) | | | See [`OptionsPrompt`](#type-optionsprompt) |
##### `showPicker`
> static showPicker(
> title?: null | string,
> content?: null | string,
> options: OptionsPicker
> ): Promise<
> {| action: "actionNegative" | "actionNeutral" | "actionDismiss" |} |
> {| action: "actionNegative" | "actionNeutral" | "actionDismiss", checked: boolean |} |
> {| action: "actionSelect", selectedItem: ListItem |} |
> {| action: "actionSelect", selectedItem: ListItem, checked: boolean |} |
> {| action: "actionSelect", selectedItems: ListItem[] |} |
> {| action: "actionSelect", selectedItems: ListItem[], checked: boolean |}
> >
Shows a regular alert, but also with items that can be selected.
| Parameter | Type | Default | Required | Description |
|-----------|------------------------------------------|---------|----------|--------------------------------------------|
| title | `string, null, void` | | | Title of dialog |
| content | `string, null, void` | | | Message of dialog |
| options | [`OptionsPicker`](#type-optionsprogress) | | | See [`OptionsPrompt`](#type-optionspicker) |
##### `showProgress`
> static showProgress(
> content?: null | string,
> options: OptionsProgress
> ): Promise<{| action:"actionDismiss" |}>
Shows a progress dialog. By default no buttons are shown, and hardware back button does not close it. You must close it with `DialogAndroid.dismiss()`.
| Parameter | Type | Default | Required | Description |
|-----------|--------------------------------------------|---------|----------|----------------------------------------------|
| content | `string, null, void` | | | Message of dialog |
| options | [`OptionsProgress`](#type-optionsprogress) | | | See [`OptionsPrompt`](#type-optionsprogress) |
### Types
[Flow](http://flow.org/) is used as the typing system.
#### Internal Types
##### `type ActionType`
> "actionDismiss" | "actionNegative" | "actionNeutral" | "actionPositive" | "actionSelect"
##### `type ListItem`
> { label:string } | { label:string, id:any } | {}
**Notes**
* If `label` key does not exist, specify which key should be used as the label with `labelKey` property of [`OptionsPicker`](#type-optionspicker).
* `id` is only required if `selectedId`/`selectedIds` needs to be used.
* If `id` key does not exist, specify which key should be used as the id with `idKey` property of [`OptionsPicker`](#type-optionspicker).
##### `type ListType`
> "listCheckbox" | "listPlain" | "listRadio"
##### `type OptionsAlert`
> {
> ...OptionsCommon
> }
| Key | Type | Default | Required | Description |
|------------------|----------------------------------------|---------|----------|--------------------------------------------|
| ...OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) |
##### `type OptionsCommon`
> {
> cancelable?: boolean,
> checkboxDefaultValue?: boolean
> checkboxLabel?: string,
> content?: string,
> contentColor?: string,
> contentIsHtml?: boolean,
> forceStacking?: boolean,
> linkColor?: ColorValue,
> negativeColor?: ColorValue,
> negativeText?: string,
> neutralColor?: ColorValue,
> neutralText?: string,
> positiveColor?: ColorValue,
> positiveText?: string, // default "OK"
> backgroundColor?: ColorValue,
> title?: string,
> titleColor?: ColorValue,
> }
| Key | Type | Default | Required | Description |
|----------------------|--------------------------------------------------------------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| cancelable | `boolean` | | | If tapping outside of dialog area, or hardware back button, should dismiss dialog. |
| checkboxDefaultValue | `boolean` | `false` | | The initial state of the checkbox. Does nothing if `checkboxLabel` is not set. |
| checkboxLabel | `string` | | | If set, then there is a checkbox shown at the bottom of the dialog with this label |
| content | `string` | | | Dialog message |
| contentColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of dialog message |
| contentIsHtml | `boolean` | | | If dialog message should be parsed as html. (supported tags include: `<a>`, `<img>`, etc) |
| forceStacking | `boolean` | | | If you have multiple action buttons that together are too wide to fit on one line, the dialog will stack the buttons to be vertically oriented. |
| linkColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | If `contentIsHtml` is true, and `content` contains `<a>` tags, these are colored with this color |
| negativeColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | |
| negativeText | `string` | | | If falsy, button is not shown. |
| neutralColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | |
| neutralText | `string` | | | Shows button in far left with this string as label. If falsy, button is not shown. |
| positiveColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | |
| positiveText | `string` | | | If falsy, button is not shown. |
| backgroundColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | |
| title | `string` | | | Title of dialog |
| titleColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of title |
##### `type OptionsProgress`
> {
> contentColor: $PropertyType<OptionsCommon, 'contentColor'>,
> contentIsHtml: $PropertyType<OptionsCommon, 'contentIsHtml'>,
> linkColor: $PropertyType<OptionsCommon, 'linkColor'>,
> style?: ProgressStyle,
> title: $PropertyType<OptionsCommon, 'title'>,
> titleColor: $PropertyType<OptionsCommon, 'titleColor'>',
> widgetColor: $PropertyType<OptionsCommon, 'widgetColor'>
> }
| Key | Type | Default | Required | Description |
|---------------|--------------------------------------------------------------------------|---------|----------|----------------------------------------------------------|
| contentColor | [`OptionsCommon#contentColor`](#type-optionscommon) | | | See [`OptionsCommon#contentColor`](#type-optionscommon) |
| contentIsHtml | [`OptionsCommon#contentIsHtml`](#type-optionscommon) | | | See [`OptionsCommon#contentIsHtml`](#type-optionscommon) |
| linkColor | [`OptionsCommon#linkColor`](#type-optionscommon) | | | See [`OptionsCommon#linkColor`](#type-optionscommon) |
| style | [`ProgressStyle`](#type-ProgressStyle) | | | See [`ProgressStyle`](#type-progressstyle) |
| title | [`OptionsCommon#title`](#type-optionscommon) | | | See [`OptionsCommon#title`](#type-optionscommon) |
| titleColor | [`OptionsCommon#titleColor`](#type-optionscommon) | | | See [`OptionsCommon#titleColor`](#type-optionscommon) |
| widgetColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of progress indicator |
##### `type OptionsPicker`
> {|
> ...OptionsCommon,
> type?: typeof ListType.listPlain,
> maxNumberOfItems?: number,
> items: ListItemJustLabel[],
> |} | {|
> ...OptionsCommon,
> type?: typeof ListType.listPlain,
> maxNumberOfItems?: number,
> items: ListItemBare[],
> labelKey: string
> |} | {|
> // radio - no preselected
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemJustLabel[],
> |} | {|
> // radio - no preselected
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemBare[],
> labelKey: string
> |} | {|
> // radio - preselected - ListItemFull
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemFull[],
> selectedId: any
> |} | {|
> // radio - preselected - ListItemJustlabel
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemJustLabel[],
> idKey: string,
> selectedId: any
> |} | {|
> // radio - preselected - ListItemJustId
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemJustId[],
> labelKey: string,
> selectedId: any
> |} | {|
> // radio - preselected - ListItemBare
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemBare[],
> idKey: string,
> labelKey: string,
> selectedId: any
> |} | {|
> // checklist - no preselected - ListItemJustLabel
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemJustLabel[]
> |} | {|
> // checklist - no preselected - ListItemBare
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemBare[],
> labelKey: string
> |} | {|
> // checklist - preselected - ListItemFull
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemFull[],
> selectedIds: any[]
> |} | {|
> // checklist - preselected - ListItemJustlabel
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemJustLabel[],
> idKey: string,
> selectedIds: any
> |} | {|
> // checklist - preselected - ListItemJustId
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemJustId[],
> labelKey: string,
> selectedIds: any
> |} | {|
> // checklist - preselected - ListItemBare
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemBare[],
> idKey: string,
> labelKey: string,
> selectedIds: any
> |}
| Key | Type | Default | Required | Description |
|------------------|--------------------------------------------------------------------------|---------------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) |
| idKey | `string` | "id" | | |
| items | [`ListItem`](#type-listitem)[] | | Yes | See [`ListItem`](#type-listitem) |
| labelKey | `string` | "label" | | |
| maxNumberOfItems | `number` | | | If you want to set a max amount of visible items in a list |
| neutralIsClear | `boolean` | | | Pressing the neutral button causes the dialog to be closed and `selectedItems` to be an empty array. Only works if `neutralText` is also supplied. |
| selectedId | `any` | | | The respective radio will be selected on dialog show. If no such id is found, then nothing is selected. Only applicable if `type` is `DialogAndroid.listRadio`. Requires that `items[]` contain key described by `idKey`. |
| selectedIds | `any[]` | | | The respective checkbox will be selected on dialog show. If no such id is found, nothing is selected for that id. Only applicable if `type` is `DialogAndroid.listCheckbox`. Requires that `items[]` contain key described by `idKey`. |
| type | [`ListType`](#type-listtype) | `DialogAndroid.listPlain` | | See [`ListType`](#type-listtype) |
| widgetColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of radio or checkbox |
##### `type OptionsPrompt`
> {
> ...OptionsCommon,
> keyboardType?:
> | 'numeric'
> | 'number-pad'
> | 'numeric-password'
> | 'decimal-pad'
> | 'email-address'
> | 'password'
> | 'phone-pad'
> | 'url',
> defaultValue?: string,
> placeholder?: string,
> allowEmptyInput?: boolean,
> minLength?: number,
> maxLength?: number,
> widgetColor?: ColorValue
> }
| Key | Type | Default | Required | Description |
|---------------|--------------------------------------------------------------------------|---------|----------|--------------------------------------------|
| OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) |
| widgetColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of field underline and cursor |
##### `type ProgressStyle`
> "progressHorizontal"
### Examples
To see the examples redone with `checkboxLabel` see this PR - [Github :: aakashns/react-native-dialogs - #86](https://github.com/aakashns/react-native-dialogs/pull/86#issuecomment-393408317)
#### Progress Dialog
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/progress-bar.png)
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/progress-circle.png)
```js
DialogAndroid.showProgress('Downloading...', {
style: DialogAndroid.progressHorizontal // omit this to get circular
});
setTimeout(DialogAndroid.dismiss, 5000);
```
#### Basic List
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/list.png)
```js
const { selectedItem } = await DialogAndroid.showPicker('Pick a fruit', null, {
items: [
{ label:'Apple', id:'apple' },
{ label:'Orange', id:'orange' },
{ label:'Pear', id:'pear' }
]
});
if (selectedItem) {
// when negative button is clicked, selectedItem is not present, so it doesn't get here
console.log('You selected item:', selectedItem);
}
```
#### Radio List
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/radiolist-autodismiss.gif)
Set `positiveText` to `null` for auto-dismiss behavior on press of a radio button item.
```js
const { selectedItem } = await DialogAndroid.showPicker('Pick a fruit', null, {
// positiveText: null, // if positiveText is null, then on select of item, it dismisses dialog
negativeText: 'Cancel',
type: DialogAndroid.listRadio,
selectedId: 'apple',
items: [
{ label:'Apple', id:'apple' },
{ label:'Orange', id:'orange' },
{ label:'Pear', id:'pear' }
]
});
if (selectedItem) {
// when negative button is clicked, selectedItem is not present, so it doesn't get here
console.log('You picked:', selectedItem);
}
```
##### Without auto-dismiss
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/radiolist-nodismiss.gif)
Here we pass in a string to `positiveText`, this prevents the auto-dismiss on select of a radio item.
```js
const { selectedItem } = await DialogAndroid.showPicker('Pick a fruit', null, {
positiveText: 'OK', // this is what makes disables auto dismiss
negativeText: 'Cancel',
type: DialogAndroid.listRadio,
selectedId: 'apple',
items: [
{ label:'Apple', id:'apple' },
{ label:'Orange', id:'orange' },
{ label:'Pear', id:'pear' }
]
});
if (selectedItem) {
// when negative button is clicked, selectedItem is not present, so it doesn't get here
console.log('You picked:', selectedItem);
}
```
#### Checklist
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/checklist.png)
```js
const { selectedItems } = await DialogAndroid.showPicker('Select multiple fruits', null, {
type: DialogAndroid.listCheckbox,
selectedIds: ['apple', 'orange'],
items: [
{ label:'Apple', id:'apple' },
{ label:'Orange', id:'orange' },
{ label:'Pear', id:'pear' }
]
});
if (selectedItems) {
if (!selectedItems.length) {
console.log('You selected no items.');
} else {
console.log('You selected items:', selectedItems);
}
}
```
##### With clear list button
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/checklist-clear.png)
We can make the neutral button be a special button. Pressing it will clear the list and close the dialog. If you want this behavior, set `neutralIsClear` to `true` and also set `neutralText` to a string. Both of these properties must be set.
```js
const { selectedItems } = await DialogAndroid.showPicker('Select multiple fruits', null, {
type: DialogAndroid.listCheckbox,
selectedIds: ['apple', 'orange'],
neutralIsClear: true, /////// added this
neutralText: 'Clear', /////// added this
items: [
{ label:'Apple', id:'apple' },
{ label:'Orange', id:'orange' },
{ label:'Pear', id:'pear' }
]
});
if (selectedItems) {
if (!selectedItems.length) {
console.log('You selected no items.');
} else {
console.log('You selected items:', selectedItems);
}
}
```
#### Prompt
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/prompt.png)
```js
const { action, text } = await DialogAndroid.prompt('Title - optional', 'Message - optional');
if (action === DialogAndroid.actionPositive) {
console.log(`You submitted: "${text}"`);
}
```
#### HTML
![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/html.png)
```js
DialogAndroid.alert('Title', `This is a link <a href="https://www.duckduckgo.com/">DuckDuckGo</a>`, {
contentIsHtml: true
});
```
#### assignDefaults
You can set some defaults so you don't have to change it everytime.
```js
DialogAndroid.assignDefaults({
title: 'Default Title',
positiveText: null,
contentColor: 'rgba(0, 0, 0, 0.2)',
widgetColor: 'blue'
})
```
Now any time you omit or pass `undefined` to `contentColor`, `widgetColor`, or `title`, it will use the defaults we assigned here.
```js
DialogAndroid.alert(undefined, 'message here')
```
This will show title "Default Title", with no positive button, and the color of the message will be 20% black. If you did `Dialog.showProgress`, the progress indicator would be blue. etc.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars1.githubusercontent.com/u/1566403?v=4" width="100px;"/><br /><sub><b>Vojtech Novak</b></sub>](https://github.com/vonovak)<br />[💬](#question-vonovak "Answering Questions") [💻](https://github.com/aakashns/react-native-dialogs/commits?author=vonovak "Code") [🤔](#ideas-vonovak "Ideas, Planning, & Feedback") [👀](#review-vonovak "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/6372489?v=4" width="100px;"/><br /><sub><b>Noitidart</b></sub>](http://noitidart.github.io/)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=Noitidart "Code") [📖](https://github.com/aakashns/react-native-dialogs/commits?author=Noitidart "Documentation") [💡](#example-Noitidart "Examples") [🤔](#ideas-Noitidart "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/6080124?v=4" width="100px;"/><br /><sub><b>Alisson Carvalho</b></sub>](http://alissoncs.com)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=alissoncs "Code") | [<img src="https://avatars1.githubusercontent.com/u/1567160?v=4" width="100px;"/><br /><sub><b>Anthony Ou</b></sub>](https://github.com/Anthonyzou)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=Anthonyzou "Code") | [<img src="https://avatars0.githubusercontent.com/u/844437?v=4" width="100px;"/><br /><sub><b>Ashley White</b></sub>](http://ashleyd.ws)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=ashleydw "Code") | [<img src="https://avatars0.githubusercontent.com/u/239360?v=4" width="100px;"/><br /><sub><b>Bee</b></sub>](https://github.com/1ne8ight7even)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=1ne8ight7even "Code") | [<img src="https://avatars3.githubusercontent.com/u/6874216?v=4" width="100px;"/><br /><sub><b>BrianSo</b></sub>](https://github.com/BrianSo)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=BrianSo "Code") |
|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| [<img src="https://avatars3.githubusercontent.com/u/1411784?v=4" width="100px;"/><br /><sub><b>Byron Wang</b></sub>](https://github.com/byronpc)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=byronpc "Code") | [<img src="https://avatars3.githubusercontent.com/u/5062458?v=4" width="100px;"/><br /><sub><b>Farzad Abdolhosseini</b></sub>](https://github.com/farzadab)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=farzadab "Code") | [<img src="https://avatars3.githubusercontent.com/u/8598682?v=4" width="100px;"/><br /><sub><b>Geoffrey Goh</b></sub>](https://github.com/geof90)<br />[🐛](https://github.com/aakashns/react-native-dialogs/issues?q=author%3Ageof90 "Bug reports") [💻](https://github.com/aakashns/react-native-dialogs/commits?author=geof90 "Code") | [<img src="https://avatars3.githubusercontent.com/u/7588480?v=4" width="100px;"/><br /><sub><b>Gustavo Fão Valvassori</b></sub>](http://gustavofao.com/)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=faogustavo "Code") [🤔](#ideas-faogustavo "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/16625347?v=4" width="100px;"/><br /><sub><b>Henrik</b></sub>](https://github.com/Henreich)<br />[📖](https://github.com/aakashns/react-native-dialogs/commits?author=Henreich "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/1103539?v=4" width="100px;"/><br /><sub><b>heydabop</b></sub>](https://github.com/heydabop)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=heydabop "Code") | [<img src="https://avatars0.githubusercontent.com/u/13056774?v=4" width="100px;"/><br /><sub><b>Huang Yu</b></sub>](https://github.com/hyugit)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=hyugit "Code") |
| [<img src="https://avatars0.githubusercontent.com/u/1516807?v=4" width="100px;"/><br /><sub><b>Iragne</b></sub>](http://pcdn.jairagne.ovh)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=Iragne "Code") | [<img src="https://avatars2.githubusercontent.com/u/2677334?v=4" width="100px;"/><br /><sub><b>Janic Duplessis</b></sub>](https://medium.com/@janicduplessis)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=janicduplessis "Code") | [<img src="https://avatars2.githubusercontent.com/u/7968613?v=4" width="100px;"/><br /><sub><b>jeffchienzabinet</b></sub>](https://github.com/jeffchienzabinet)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=jeffchienzabinet "Code") | [<img src="https://avatars3.githubusercontent.com/u/1088099?v=4" width="100px;"/><br /><sub><b>Jeremy Dagorn</b></sub>](http://www.jeremydagorn.com)<br />[📖](https://github.com/aakashns/react-native-dialogs/commits?author=jrm2k6 "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/13287601?v=4" width="100px;"/><br /><sub><b>jykun</b></sub>](https://github.com/jykun)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=jykun "Code") | [<img src="https://avatars2.githubusercontent.com/u/195925?v=4" width="100px;"/><br /><sub><b>Mattias Pfeiffer</b></sub>](http://pfeiffer.dk)<br />[📖](https://github.com/aakashns/react-native-dialogs/commits?author=pfeiffer "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/14799874?v=4" width="100px;"/><br /><sub><b>pureday</b></sub>](https://github.com/lakeoffaith)<br />[📖](https://github.com/aakashns/react-native-dialogs/commits?author=lakeoffaith "Documentation") |
| [<img src="https://avatars0.githubusercontent.com/u/7029942?v=4" width="100px;"/><br /><sub><b>Radek Czemerys</b></sub>](https://twitter.com/radko93)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=radko93 "Code") | [<img src="https://avatars3.githubusercontent.com/u/1160365?v=4" width="100px;"/><br /><sub><b>Ricardo Fuhrmann</b></sub>](https://github.com/Fuhrmann)<br />[📖](https://github.com/aakashns/react-native-dialogs/commits?author=Fuhrmann "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/22330398?v=4" width="100px;"/><br /><sub><b>Ross</b></sub>](https://thebhwgroup.com/)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=rdixonbhw "Code") | [<img src="https://avatars2.githubusercontent.com/u/5407363?v=4" width="100px;"/><br /><sub><b>Vinicius Zaramella</b></sub>](http://programei.com)<br />[💻](https://github.com/aakashns/react-native-dialogs/commits?author=vzaramel "Code") | | | |
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
Reference in New Issue View Git Blame Copy Permalink