KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

react-native-dialogs

★ 602 Open GitHub ↗

React Native wrappers for https://github.com/afollestad/material-dialogs

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## react-native-dialogs
[![All Contributors](https://img.shields.io/badge/all_contributors-25-orange.svg?style=flat-square)](https://raw.githubusercontent.com/react-native-dialogs/react-native-dialogs/master/)

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
>     }

##### `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)):

| [<img src="https://avatars1.githubusercontent.com/u/1566403?v=4" width="100px;"/> Vojtech Novak](https://github.com/vonovak) [💬](#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;"/> Noitidart](http://noitidart.github.io/) [💻](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;"/> Alisson Carvalho](http://alissoncs.com) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=alissoncs "Code") | [<img src="https://avatars1.githubusercontent.com/u/1567160?v=4" width="100px;"/> Anthony Ou](https://github.com/Anthonyzou) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=Anthonyzou "Code") | [<img src="https://avatars0.githubusercontent.com/u/844437?v=4" width="100px;"/> Ashley White](http://ashleyd.ws) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=ashleydw "Code") | [<img src="https://avatars0.githubusercontent.com/u/239360?v=4" width="100px;"/> Bee](https://github.com/1ne8ight7even) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=1ne8ight7even "Code") | [<img src="https://avatars3.githubusercontent.com/u/6874216?v=4" width="100px;"/> BrianSo](https://github.com/BrianSo) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=BrianSo "Code") |
|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
| [<img src="https://avatars3.githubusercontent.com/u/1411784?v=4" width="100px;"/> Byron Wang](https://github.com/byronpc) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=byronpc "Code") | [<img src="https://avatars3.githubusercontent.com/u/5062458?v=4" width="100px;"/> Farzad Abdolhosseini](https://github.com/farzadab) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=farzadab "Code") | [<img src="https://avatars3.githubusercontent.com/u/8598682?v=4" width="100px;"/> Geoffrey Goh](https://github.com/geof90) [🐛](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;"/> Gustavo Fão Valvassori](http://gustavofao.com/) [💻](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;"/> Henrik](https://github.com/Henreich) [📖](https://github.com/aakashns/react-native-dialogs/commits?author=Henreich "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/1103539?v=4" width="100px;"/> heydabop](https://github.com/heydabop) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=heydabop "Code") | [<img src="https://avatars0.githubusercontent.com/u/13056774?v=4" width="100px;"/> Huang Yu](https://github.com/hyugit) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=hyugit "Code") |
| [<img src="https://avatars0.githubusercontent.com/u/1516807?v=4" width="100px;"/> Iragne](http://pcdn.jairagne.ovh) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=Iragne "Code") | [<img src="https://avatars2.githubusercontent.com/u/2677334?v=4" width="100px;"/> Janic Duplessis](https://medium.com/@janicduplessis) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=janicduplessis "Code") | [<img src="https://avatars2.githubusercontent.com/u/7968613?v=4" width="100px;"/> jeffchienzabinet](https://github.com/jeffchienzabinet) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=jeffchienzabinet "Code") | [<img src="https://avatars3.githubusercontent.com/u/1088099?v=4" width="100px;"/> Jeremy Dagorn](http://www.jeremydagorn.com) [📖](https://github.com/aakashns/react-native-dialogs/commits?author=jrm2k6 "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/13287601?v=4" width="100px;"/> jykun](https://github.com/jykun) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=jykun "Code") | [<img src="https://avatars2.githubusercontent.com/u/195925?v=4" width="100px;"/> Mattias Pfeiffer](http://pfeiffer.dk) [📖](https://github.com/aakashns/react-native-dialogs/commits?author=pfeiffer "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/14799874?v=4" width="100px;"/> pureday](https://github.com/lakeoffaith) [📖](https://github.com/aakashns/react-native-dialogs/commits?author=lakeoffaith "Documentation") |
| [<img src="https://avatars0.githubusercontent.com/u/7029942?v=4" width="100px;"/> Radek Czemerys](https://twitter.com/radko93) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=radko93 "Code") | [<img src="https://avatars3.githubusercontent.com/u/1160365?v=4" width="100px;"/> Ricardo Fuhrmann](https://github.com/Fuhrmann) [📖](https://github.com/aakashns/react-native-dialogs/commits?author=Fuhrmann "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/22330398?v=4" width="100px;"/> Ross](https://thebhwgroup.com/) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=rdixonbhw "Code") | [<img src="https://avatars2.githubusercontent.com/u/5407363?v=4" width="100px;"/> Vinicius Zaramella](http://programei.com) [💻](https://github.com/aakashns/react-native-dialogs/commits?author=vzaramel "Code") | | | |

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

react-native-dialogs

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README