{"id":4009,"url":"https://github.com/react-native-dialogs/react-native-dialogs","last_synced_at":"2025-08-04T00:30:56.503Z","repository":{"id":41814654,"uuid":"45305594","full_name":"react-native-dialogs/react-native-dialogs","owner":"react-native-dialogs","description":"React Native wrappers for https://github.com/afollestad/material-dialogs","archived":false,"fork":false,"pushed_at":"2023-12-23T22:29:40.000Z","size":927,"stargazers_count":603,"open_issues_count":26,"forks_count":118,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-07-29T15:45:03.886Z","etag":null,"topics":["cross-platform","dialog-box","mobile-development","react-native"],"latest_commit_sha":null,"homepage":"https://npmjs.com/react-native-dialogs","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-native-dialogs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2015-10-31T14:53:37.000Z","updated_at":"2025-03-22T07:18:57.000Z","dependencies_parsed_at":"2023-12-23T23:49:54.523Z","dependency_job_id":"68d0e3ca-5bbb-4a30-9fbc-71ce77bf38ab","html_url":"https://github.com/react-native-dialogs/react-native-dialogs","commit_stats":null,"previous_names":["aakashns/react-native-dialogs"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/react-native-dialogs/react-native-dialogs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-dialogs%2Freact-native-dialogs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-dialogs%2Freact-native-dialogs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-dialogs%2Freact-native-dialogs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-dialogs%2Freact-native-dialogs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-dialogs","download_url":"https://codeload.github.com/react-native-dialogs/react-native-dialogs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-dialogs%2Freact-native-dialogs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268630345,"owners_count":24281198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-platform","dialog-box","mobile-development","react-native"],"created_at":"2024-01-05T20:16:58.345Z","updated_at":"2025-08-04T00:30:56.183Z","avatar_url":"https://github.com/react-native-dialogs.png","language":"Java","readme":"## react-native-dialogs\n[![All Contributors](https://img.shields.io/badge/all_contributors-25-orange.svg?style=flat-square)](#contributors)\n\nAn 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.\n\n### Table of Contents\n  - [Installation](#installation)\n    - [Manual Linking](#manual-linking)\n  - [Usage](#usage)\n  - [API](#api)\n    - [Properties](#properties)\n      - [`defaults`](#defaults)\n      - [`actionDismiss`](#actiondismiss)\n      - [`actionNegative`](#actionnegative)\n      - [`actionNeutral`](#actionneutral)\n      - [`actionPositive`](#actionpositive)\n      - [`listPlain`](#listplain)\n      - [`listRadio`](#listradio)\n      - [`listCheckbox`](#listcheckbox)\n      - [`progressHorizontal`](#progresshorizontal)\n    - [Methods](#methods)\n      - [`alert`](#alert)\n      - [`assignDefaults`](#assigndefaults)\n      - [`dismiss`](#dismiss)\n      - [`prompt`](#prompt)\n      - [`showPicker`](#showpicker)\n      - [`showProgress`](#showprogress)\n  - [Types](#types)\n    - [Internal Types](#internal-types)\n      - [`type ActionType`](#type-actiontype)\n      - [`type ListItem`](#type-listitem)\n      - [`type ListType`](#type-listtype)\n      - [`type OptionsAlert`](#type-optionsalert)\n      - [`type OptionsCommon`](#type-optionscommon)\n      - [`type OptionsProgress`](#type-optionsprogress)\n      - [`type OptionsPicker`](#type-optionspicker)\n      - [`type OptionsPrompt`](#type-optionsprompt)\n      - [`type ProgressStyle`](#type-progressstyle)\n  - [Examples](#examples)\n    - [Progress Dialog](#progress-dialog)\n    - [Basic List](#basic-list)\n    - [Radio List](#radio-list)\n      - [Without auto-dismiss](#without-auto-dismiss)\n    - [Checklist](#checklist)\n      - [With clear list button](#with-clear-list-button)\n    - [Prompt](#prompt-1)\n    - [HTML](#html)\n    - [assignDefaults](#assigndefaults-1)\n- [Contributors](#contributors)\n\n### Installation\n\n1. Install:\n    - Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-dialogs --save`\n    - Using [Yarn](https://yarnpkg.com/): `yarn add react-native-dialogs`\n\n2. [Link](https://facebook.github.io/react-native/docs/linking-libraries-ios.html):\n    - `react-native link react-native-dialogs`\n    - Or if this fails, link manually using [these steps](#manual-linking)\n\n3. Compile application using `react-native run-android`\n\n#### Manual Linking\nFollow these steps if automatic linking (`react-native link`) failed.\n\n1. In `android/app/build.gradle`, add the dependency to your app build:\n\n   ```\n   dependencies {\n       ...\n       compile project(':react-native-dialogs') // Add this\n   }\n   ```\n\n2. 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):\n\n   ```\n   allprojects {\n       repositories {\n           ...\n           jcenter() // Add this if it is not already here\n           ...\n       }\n   }\n   ```\n\n3. In `android/settings.gradle`:\n\n   ```\n   rootProject.name = ...\n   ...\n   include ':react-native-dialogs' // Add this\n   project(':react-native-dialogs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dialogs/android') // Add this\n\n   ...\n   include ':app'\n   ```\n\n4. Import and add package, in `android/app/src/main/.../MainApplication.java`:\n\n   ```java\n   ...\n   import android.app.Application;\n   ...\n\n   import com.aakashns.reactnativedialogs.ReactNativeDialogsPackage; // Add new import\n\n   ...\n\n   public class MainApplication extends Application implements ReactApplication {\n     ...\n     @Override\n     protected List\u003cReactPackage\u003e getPackages() {\n       return Arrays.\u003cReactPackage\u003easList(\n         new MainReactPackage(),\n         ...\n         new ReactNativeDialogsPackage() // Add the package here\n       );\n     }\n   }\n   ```\n\n### Usage\n\n1. Import it in your JS:\n\n   ```js\n   import DialogAndroid from 'react-native-dialogs';\n   ```\n\n2. Call API:\n\n   ```js\n   class Blah extends Component {\n       render() {\n           return \u003cButton title=\"Show DialogAndroid\" onPress={this.showDialogAndroid} /\u003e\n       }\n\n       showDialogAndroid = async () =\u003e {\n           const { action } = await DialogAndroid.alert('Title', 'Message');\n           switch (action) {\n               case DialogAndroid.actionPositive:\n                   console.log('positive!')\n                   break;\n               case DialogAndroid.actionNegative:\n                   console.log('negative!')\n                   break;\n               case DialogAndroid.actionNeutral:\n                   console.log('neutral!')\n                   break;\n               case DialogAndroid.actionDismiss:\n                   console.log('dismissed!')\n                   break;\n           }\n       }\n   }\n   ```\n\n### API\n\n#### Properties\n\n##### `defaults`\n\n\u003e    {\n\u003e        positiveText: 'OK'\n\u003e    }\n\nThe default options to be used by all methods. To modify this, either directly manipulate with `DialogAndroid.defaults = { ... }` or use [`assignDefaults`](#assigndefaults)\n\n##### `actionDismiss`\n\n\u003e static actionDismiss = \"actionDismiss\"\n\n##### `actionNegative`\n\n\u003e static actionNegative = \"actionNegative\"\n\n##### `actionNeutral`\n\n\u003e static actionNeutral = \"actionNeutral\"\n\n##### `actionPositive`\n\n\u003e static actionPositive = \"actionPositive\"\n\n##### `listPlain`\n\n\u003e static listPlain = \"listPlain\"\n\n##### `listRadio`\n\n\u003e static listRadio = \"listRadio\"\n\n##### `listCheckbox`\n\n\u003e static listCheckbox = \"listCheckbox\"\n\n##### `progressHorizontal`\n\n\u003e static progressHorizontal = \"progressHorizontal\"\n\n#### Methods\n##### `alert`\n\n\u003e     static alert(\n\u003e         title: Title,\n\u003e         content: Content,\n\u003e         options: OptionsAlert\n\u003e     ): Promise\u003c\n\u003e         {| action: \"actionDismiss\" | \"actionNegative\" | \"actionNeutral\" | \"actionPositive\" |} |\n\u003e         {| action: \"actionDismiss\" | \"actionNegative\" | \"actionNeutral\" | \"actionPositive\", checked: boolean |}\n\u003e     \u003e\n\nShows a dialog.\n\n| Parameter | Type                                 | Default | Required | Description                              |\n|-----------|--------------------------------------|---------|----------|------------------------------------------|\n| title     | `string, null, void`                 |         |          | Title of dialog                          |\n| content   | `string, null, void`                 |         |          | Message of dialog                        |\n| options   | [`OptionsAlert`](#type-optionsalert) |         |          | See [`OptionsAlert`](#type-optionsalert) |\n\n##### `assignDefaults`\n\n\u003e     static assignDefaults({\n\u003e         [string]: value\n\u003e     ): void\n\nSet default colors for example, so you don't have to provide it on every method call.\n\n\u003e    {\n\u003e        positiveText: 'OK'\n\u003e    }\n\n\n##### `dismiss`\n\n\u003e     static dismiss(): void\n\nHides the currently showing dialog.\n\n##### `prompt`\n\n\u003e     static prompt(\n\u003e         title?: null | string,\n\u003e         content?: null | string,\n\u003e         options: OptionsPrompt\n\u003e     ): Promise\u003c\n\u003e         {| action: \"actionNegative\" | \"actionNeutral\" | \"actionDismiss\" |} |\n\u003e         {| action: \"actionNegative\" | \"actionNeutral\", checked: boolean |} |\n\u003e         {| action: \"actionPositive\", text: string |} |\n\u003e         {| action: \"actionPositive\", text: string, checked: boolean |}\n\u003e     \u003e\n\nShows a dialog with a text input field.\n\n| Parameter | Type                                   | Default | Required | Description                                |\n|-----------|----------------------------------------|---------|----------|--------------------------------------------|\n| title     | `string, null, void`                   |         |          | Title of dialog                            |\n| content   | `string, null, void`                   |         |          | Message of dialog                          |\n| options   | [`OptionsPrompt`](#type-optionsprompt) |         |          | See [`OptionsPrompt`](#type-optionsprompt) |\n\n##### `showPicker`\n\n\u003e     static showPicker(\n\u003e         title?: null | string,\n\u003e         content?: null | string,\n\u003e         options: OptionsPicker\n\u003e     ): Promise\u003c\n\u003e         {| action: \"actionNegative\" | \"actionNeutral\" | \"actionDismiss\" |} |\n\u003e         {| action: \"actionNegative\" | \"actionNeutral\" | \"actionDismiss\", checked: boolean |} |\n\u003e         {| action: \"actionSelect\", selectedItem: ListItem |} |\n\u003e         {| action: \"actionSelect\", selectedItem: ListItem, checked: boolean |} |\n\u003e         {| action: \"actionSelect\", selectedItems: ListItem[] |} |\n\u003e         {| action: \"actionSelect\", selectedItems: ListItem[], checked: boolean |}\n\u003e     \u003e\n\nShows a regular alert, but also with items that can be selected.\n\n| Parameter | Type                                     | Default | Required | Description                                |\n|-----------|------------------------------------------|---------|----------|--------------------------------------------|\n| title     | `string, null, void`                     |         |          | Title of dialog                            |\n| content   | `string, null, void`                     |         |          | Message of dialog                          |\n| options   | [`OptionsPicker`](#type-optionsprogress) |         |          | See [`OptionsPrompt`](#type-optionspicker) |\n\n##### `showProgress`\n\n\u003e     static showProgress(\n\u003e         content?: null | string,\n\u003e         options: OptionsProgress\n\u003e     ): Promise\u003c{| action:\"actionDismiss\" |}\u003e\n\nShows a progress dialog. By default no buttons are shown, and hardware back button does not close it. You must close it with `DialogAndroid.dismiss()`.\n\n| Parameter | Type                                       | Default | Required | Description                                  |\n|-----------|--------------------------------------------|---------|----------|----------------------------------------------|\n| content   | `string, null, void`                       |         |          | Message of dialog                            |\n| options   | [`OptionsProgress`](#type-optionsprogress) |         |          | See [`OptionsPrompt`](#type-optionsprogress) |\n\n### Types\n\n[Flow](http://flow.org/) is used as the typing system.\n\n#### Internal Types\n\n##### `type ActionType`\n\n\u003e     \"actionDismiss\" | \"actionNegative\" | \"actionNeutral\" | \"actionPositive\" | \"actionSelect\"\n\n##### `type ListItem`\n\n\u003e     { label:string } | { label:string, id:any } | {}\n\n**Notes**\n\n* If `label` key does not exist, specify which key should be used as the label with `labelKey` property of [`OptionsPicker`](#type-optionspicker).\n* `id` is only required if `selectedId`/`selectedIds` needs to be used.\n  * If `id` key does not exist, specify which key should be used as the id with `idKey` property of [`OptionsPicker`](#type-optionspicker).\n\n##### `type ListType`\n\n\u003e     \"listCheckbox\" | \"listPlain\" | \"listRadio\"\n\n##### `type OptionsAlert`\n\n\u003e     {\n\u003e         ...OptionsCommon\n\u003e     }\n\n| Key              | Type                                   | Default | Required | Description                                |\n|------------------|----------------------------------------|---------|----------|--------------------------------------------|\n| ...OptionsCommon | [`OptionsCommon`](#type-optionscommon) |         |          | See [`OptionsCommon`](#type-optionscommon) |\n\n##### `type OptionsCommon`\n\n\u003e     {\n\u003e         cancelable?: boolean,\n\u003e         checkboxDefaultValue?: boolean\n\u003e         checkboxLabel?: string,\n\u003e         content?: string,\n\u003e         contentColor?: string,\n\u003e         contentIsHtml?: boolean,\n\u003e         forceStacking?: boolean,\n\u003e         linkColor?: ColorValue,\n\u003e         negativeColor?: ColorValue,\n\u003e         negativeText?: string,\n\u003e         neutralColor?: ColorValue,\n\u003e         neutralText?: string,\n\u003e         positiveColor?: ColorValue,\n\u003e         positiveText?: string, // default \"OK\"\n\u003e         backgroundColor?: ColorValue,\n\u003e         title?: string,\n\u003e         titleColor?: ColorValue,\n\u003e     }\n\n| Key                  | Type                                                                     | Default | Required | Description                                                                                                                                     |\n|----------------------|--------------------------------------------------------------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------|\n| cancelable           | `boolean`                                                                |         |          | If tapping outside of dialog area, or hardware back button, should dismiss dialog.                                                              |\n| checkboxDefaultValue | `boolean`                                                                | `false` |          | The initial state of the checkbox. Does nothing if `checkboxLabel` is not set.                                                                  |\n| checkboxLabel        | `string`                                                                 |         |          | If set, then there is a checkbox shown at the bottom of the dialog with this label                                                              |\n| content              | `string`                                                                 |         |          | Dialog message                                                                                                                                  |\n| contentColor         | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          | Color of dialog message                                                                                                                         |\n| contentIsHtml        | `boolean`                                                                |         |          | If dialog message should be parsed as html. (supported tags include: `\u003ca\u003e`, `\u003cimg\u003e`, etc)                                                       |\n| 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. |\n| linkColor            | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          | If `contentIsHtml` is true, and `content` contains `\u003ca\u003e` tags, these are colored with this color                                                |\n| negativeColor        | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          |                                                                                                                                                 |\n| negativeText         | `string`                                                                 |         |          | If falsy, button is not shown.                                                                                                                  |\n| neutralColor         | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          |                                                                                                                                                 |\n| neutralText          | `string`                                                                 |         |          | Shows button in far left with this string as label. If falsy, button is not shown.                                                              |\n| positiveColor        | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          |                                                                                                                                                 |\n| positiveText         | `string`                                                                 |         |          | If falsy, button is not shown.                                                                                                                  |\n| backgroundColor      | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          |                                                                                                                                                 |\n| title                | `string`                                                                 |         |          | Title of dialog                                                                                                                                 |\n| titleColor           | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          | Color of title                                                                                                                                  |\n\n##### `type OptionsProgress`\n\n\u003e     {\n\u003e         contentColor: $PropertyType\u003cOptionsCommon, 'contentColor'\u003e,\n\u003e         contentIsHtml: $PropertyType\u003cOptionsCommon, 'contentIsHtml'\u003e,\n\u003e         linkColor: $PropertyType\u003cOptionsCommon, 'linkColor'\u003e,\n\u003e         style?: ProgressStyle,\n\u003e         title: $PropertyType\u003cOptionsCommon, 'title'\u003e,\n\u003e         titleColor: $PropertyType\u003cOptionsCommon, 'titleColor'\u003e',\n\u003e         widgetColor: $PropertyType\u003cOptionsCommon, 'widgetColor'\u003e\n\u003e     }\n\n| Key           | Type                                                                     | Default | Required | Description                                              |\n|---------------|--------------------------------------------------------------------------|---------|----------|----------------------------------------------------------|\n| contentColor  | [`OptionsCommon#contentColor`](#type-optionscommon)                      |         |          | See [`OptionsCommon#contentColor`](#type-optionscommon)  |\n| contentIsHtml | [`OptionsCommon#contentIsHtml`](#type-optionscommon)                     |         |          | See [`OptionsCommon#contentIsHtml`](#type-optionscommon) |\n| linkColor     | [`OptionsCommon#linkColor`](#type-optionscommon)                         |         |          | See [`OptionsCommon#linkColor`](#type-optionscommon)     |\n| style         | [`ProgressStyle`](#type-ProgressStyle)                                   |         |          | See [`ProgressStyle`](#type-progressstyle)               |\n| title         | [`OptionsCommon#title`](#type-optionscommon)                             |         |          | See [`OptionsCommon#title`](#type-optionscommon)         |\n| titleColor    | [`OptionsCommon#titleColor`](#type-optionscommon)                        |         |          | See [`OptionsCommon#titleColor`](#type-optionscommon)    |\n| widgetColor   | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          | Color of progress indicator                              |\n\n##### `type OptionsPicker`\n\n\u003e    {|\n\u003e        ...OptionsCommon,\n\u003e        type?: typeof ListType.listPlain,\n\u003e        maxNumberOfItems?: number,\n\u003e        items: ListItemJustLabel[],\n\u003e    |} | {|\n\u003e        ...OptionsCommon,\n\u003e        type?: typeof ListType.listPlain,\n\u003e        maxNumberOfItems?: number,\n\u003e        items: ListItemBare[],\n\u003e        labelKey: string\n\u003e    |} | {|\n\u003e        // radio - no preselected\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listRadio,\n\u003e        widgetColor?: ColorValue // radio color\n\u003e        items: ListItemJustLabel[],\n\u003e    |} | {|\n\u003e        // radio - no preselected\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listRadio,\n\u003e        widgetColor?: ColorValue // radio color\n\u003e        items: ListItemBare[],\n\u003e        labelKey: string\n\u003e    |} | {|\n\u003e        // radio - preselected - ListItemFull\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listRadio,\n\u003e        widgetColor?: ColorValue // radio color\n\u003e        items: ListItemFull[],\n\u003e        selectedId: any\n\u003e    |} | {|\n\u003e        // radio - preselected - ListItemJustlabel\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listRadio,\n\u003e        widgetColor?: ColorValue // radio color\n\u003e        items: ListItemJustLabel[],\n\u003e        idKey: string,\n\u003e        selectedId: any\n\u003e    |} | {|\n\u003e        // radio - preselected - ListItemJustId\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listRadio,\n\u003e        widgetColor?: ColorValue // radio color\n\u003e        items: ListItemJustId[],\n\u003e        labelKey: string,\n\u003e        selectedId: any\n\u003e    |} | {|\n\u003e        // radio - preselected - ListItemBare\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listRadio,\n\u003e        widgetColor?: ColorValue // radio color\n\u003e        items: ListItemBare[],\n\u003e        idKey: string,\n\u003e        labelKey: string,\n\u003e        selectedId: any\n\u003e    |} | {|\n\u003e        // checklist - no preselected - ListItemJustLabel\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listCheckbox,\n\u003e        neutralIsClear?: boolean,\n\u003e        widgetColor?: ColorValue, // checkbox color\n\u003e        items: ListItemJustLabel[]\n\u003e    |} | {|\n\u003e        // checklist - no preselected - ListItemBare\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listCheckbox,\n\u003e        neutralIsClear?: boolean,\n\u003e        widgetColor?: ColorValue, // checkbox color\n\u003e        items: ListItemBare[],\n\u003e        labelKey: string\n\u003e    |} | {|\n\u003e        // checklist - preselected - ListItemFull\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listCheckbox,\n\u003e        neutralIsClear?: boolean,\n\u003e        widgetColor?: ColorValue, // checkbox color\n\u003e        items: ListItemFull[],\n\u003e        selectedIds: any[]\n\u003e    |} | {|\n\u003e        // checklist - preselected - ListItemJustlabel\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listCheckbox,\n\u003e        neutralIsClear?: boolean,\n\u003e        widgetColor?: ColorValue, // checkbox color\n\u003e        items: ListItemJustLabel[],\n\u003e        idKey: string,\n\u003e        selectedIds: any\n\u003e    |} | {|\n\u003e        // checklist - preselected - ListItemJustId\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listCheckbox,\n\u003e        neutralIsClear?: boolean,\n\u003e        widgetColor?: ColorValue, // checkbox color\n\u003e        items: ListItemJustId[],\n\u003e        labelKey: string,\n\u003e        selectedIds: any\n\u003e    |} | {|\n\u003e        // checklist - preselected - ListItemBare\n\u003e        ...OptionsCommon,\n\u003e        type: typeof ListType.listCheckbox,\n\u003e        neutralIsClear?: boolean,\n\u003e        widgetColor?: ColorValue, // checkbox color\n\u003e        items: ListItemBare[],\n\u003e        idKey: string,\n\u003e        labelKey: string,\n\u003e        selectedIds: any\n\u003e    |}\n\n| Key              | Type                                                                     | Default                   | Required | Description                                                                                                                                                                                                                            |\n|------------------|--------------------------------------------------------------------------|---------------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| OptionsCommon    | [`OptionsCommon`](#type-optionscommon)                                   |                           |          | See [`OptionsCommon`](#type-optionscommon)                                                                                                                                                                                             |\n| idKey            | `string`                                                                 | \"id\"                      |          |                                                                                                                                                                                                                                        |\n| items            | [`ListItem`](#type-listitem)[]                                           |                           | Yes      | See [`ListItem`](#type-listitem)                                                                                                                                                                                                       |\n| labelKey         | `string`                                                                 | \"label\"                   |          |                                                                                                                                                                                                                                        |\n| maxNumberOfItems | `number`                                                                 |                           |          | If you want to set a max amount of visible items in a list                                                                                                                                                                             |\n| 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.                                                                                     |\n| 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`.              |\n| 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`. |\n| type             | [`ListType`](#type-listtype)                                             | `DialogAndroid.listPlain` |          | See [`ListType`](#type-listtype)                                                                                                                                                                                                       |\n| widgetColor      | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |                           |          | Color of radio or checkbox                                                                                                                                                                                                             |\n\n##### `type OptionsPrompt`\n\n\u003e     {\n\u003e         ...OptionsCommon,\n\u003e         keyboardType?:\n\u003e           | 'numeric'\n\u003e           | 'number-pad'\n\u003e           | 'numeric-password'\n\u003e           | 'decimal-pad'\n\u003e           | 'email-address'\n\u003e           | 'password'\n\u003e           | 'phone-pad'\n\u003e           | 'url',\n\u003e         defaultValue?: string,\n\u003e         placeholder?: string,\n\u003e         allowEmptyInput?: boolean,\n\u003e         minLength?: number,\n\u003e         maxLength?: number,\n\u003e         widgetColor?: ColorValue\n\u003e     }\n\n| Key           | Type                                                                     | Default | Required | Description                                |\n|---------------|--------------------------------------------------------------------------|---------|----------|--------------------------------------------|\n| OptionsCommon | [`OptionsCommon`](#type-optionscommon)                                   |         |          | See [`OptionsCommon`](#type-optionscommon) |\n| widgetColor   | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) |         |          | Color of field underline and cursor        |\n\n##### `type ProgressStyle`\n\n\u003e     \"progressHorizontal\"\n\n### Examples\n\nTo 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)\n\n#### Progress Dialog\n\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/progress-bar.png)\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/progress-circle.png)\n\n```js\nDialogAndroid.showProgress('Downloading...', {\n    style: DialogAndroid.progressHorizontal // omit this to get circular\n});\nsetTimeout(DialogAndroid.dismiss, 5000);\n```\n\n#### Basic List\n\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/list.png)\n\n```js\nconst { selectedItem } = await DialogAndroid.showPicker('Pick a fruit', null, {\n    items: [\n        { label:'Apple', id:'apple' },\n        { label:'Orange', id:'orange' },\n        { label:'Pear', id:'pear' }\n    ]\n});\nif (selectedItem) {\n    // when negative button is clicked, selectedItem is not present, so it doesn't get here\n    console.log('You selected item:', selectedItem);\n}\n```\n\n#### Radio List\n\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/radiolist-autodismiss.gif)\n\nSet `positiveText` to `null` for auto-dismiss behavior on press of a radio button item.\n\n```js\nconst { selectedItem } = await DialogAndroid.showPicker('Pick a fruit', null, {\n    // positiveText: null, // if positiveText is null, then on select of item, it dismisses dialog\n    negativeText: 'Cancel',\n    type: DialogAndroid.listRadio,\n    selectedId: 'apple',\n    items: [\n        { label:'Apple', id:'apple' },\n        { label:'Orange', id:'orange' },\n        { label:'Pear', id:'pear' }\n    ]\n});\nif (selectedItem) {\n    // when negative button is clicked, selectedItem is not present, so it doesn't get here\n    console.log('You picked:', selectedItem);\n}\n```\n\n##### Without auto-dismiss\n\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/radiolist-nodismiss.gif)\n\nHere we pass in a string to `positiveText`, this prevents the auto-dismiss on select of a radio item.\n\n```js\nconst { selectedItem } = await DialogAndroid.showPicker('Pick a fruit', null, {\n    positiveText: 'OK', // this is what makes disables auto dismiss\n    negativeText: 'Cancel',\n    type: DialogAndroid.listRadio,\n    selectedId: 'apple',\n    items: [\n        { label:'Apple', id:'apple' },\n        { label:'Orange', id:'orange' },\n        { label:'Pear', id:'pear' }\n    ]\n});\nif (selectedItem) {\n    // when negative button is clicked, selectedItem is not present, so it doesn't get here\n    console.log('You picked:', selectedItem);\n}\n```\n\n#### Checklist\n\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/checklist.png)\n\n```js\nconst { selectedItems } = await DialogAndroid.showPicker('Select multiple fruits', null, {\n    type: DialogAndroid.listCheckbox,\n    selectedIds: ['apple', 'orange'],\n    items: [\n        { label:'Apple', id:'apple' },\n        { label:'Orange', id:'orange' },\n        { label:'Pear', id:'pear' }\n    ]\n});\nif (selectedItems) {\n    if (!selectedItems.length) {\n        console.log('You selected no items.');\n    } else {\n        console.log('You selected items:', selectedItems);\n    }\n}\n```\n\n##### With clear list button\n\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/checklist-clear.png)\n\nWe 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.\n\n```js\nconst { selectedItems } = await DialogAndroid.showPicker('Select multiple fruits', null, {\n    type: DialogAndroid.listCheckbox,\n    selectedIds: ['apple', 'orange'],\n    neutralIsClear: true, /////// added this\n    neutralText: 'Clear', /////// added this\n    items: [\n        { label:'Apple', id:'apple' },\n        { label:'Orange', id:'orange' },\n        { label:'Pear', id:'pear' }\n    ]\n});\nif (selectedItems) {\n    if (!selectedItems.length) {\n        console.log('You selected no items.');\n    } else {\n        console.log('You selected items:', selectedItems);\n    }\n}\n```\n\n#### Prompt\n\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/prompt.png)\n\n```js\nconst { action, text } = await DialogAndroid.prompt('Title - optional', 'Message - optional');\nif (action === DialogAndroid.actionPositive) {\n    console.log(`You submitted: \"${text}\"`);\n}\n```\n\n#### HTML\n\n![](https://github.com/aakashns/react-native-dialogs/blob/master/screenshots/html.png)\n\n```js\nDialogAndroid.alert('Title', `This is a link \u003ca href=\"https://www.duckduckgo.com/\"\u003eDuckDuckGo\u003c/a\u003e`, {\n    contentIsHtml: true\n});\n```\n\n#### assignDefaults\n\nYou can set some defaults so you don't have to change it everytime.\n\n```js\nDialogAndroid.assignDefaults({\n    title: 'Default Title',\n    positiveText: null,\n    contentColor: 'rgba(0, 0, 0, 0.2)',\n    widgetColor: 'blue'\n})\n```\n\n\nNow any time you omit or pass `undefined` to `contentColor`, `widgetColor`, or `title`, it will use the defaults we assigned here.\n\n```js\nDialogAndroid.alert(undefined, 'message here')\n```\n\nThis 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.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/1566403?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVojtech Novak\u003c/b\u003e\u003c/sub\u003e](https://github.com/vonovak)\u003cbr /\u003e[💬](#question-vonovak \"Answering Questions\") [💻](https://github.com/aakashns/react-native-dialogs/commits?author=vonovak \"Code\") [🤔](#ideas-vonovak \"Ideas, Planning, \u0026 Feedback\") [👀](#review-vonovak \"Reviewed Pull Requests\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/6372489?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNoitidart\u003c/b\u003e\u003c/sub\u003e](http://noitidart.github.io/)\u003cbr /\u003e[💻](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, \u0026 Feedback\") |                                               [\u003cimg src=\"https://avatars3.githubusercontent.com/u/6080124?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlisson Carvalho\u003c/b\u003e\u003c/sub\u003e](http://alissoncs.com)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=alissoncs \"Code\")                                               |                               [\u003cimg src=\"https://avatars1.githubusercontent.com/u/1567160?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAnthony Ou\u003c/b\u003e\u003c/sub\u003e](https://github.com/Anthonyzou)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=Anthonyzou \"Code\")                              |         [\u003cimg src=\"https://avatars0.githubusercontent.com/u/844437?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAshley White\u003c/b\u003e\u003c/sub\u003e](http://ashleyd.ws)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=ashleydw \"Code\")        |   [\u003cimg src=\"https://avatars0.githubusercontent.com/u/239360?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBee\u003c/b\u003e\u003c/sub\u003e](https://github.com/1ne8ight7even)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=1ne8ight7even \"Code\")  |          [\u003cimg src=\"https://avatars3.githubusercontent.com/u/6874216?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBrianSo\u003c/b\u003e\u003c/sub\u003e](https://github.com/BrianSo)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=BrianSo \"Code\")          |\n|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n|                                                                           [\u003cimg src=\"https://avatars3.githubusercontent.com/u/1411784?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eByron Wang\u003c/b\u003e\u003c/sub\u003e](https://github.com/byronpc)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=byronpc \"Code\")                                                                          |                                                                                         [\u003cimg src=\"https://avatars3.githubusercontent.com/u/5062458?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFarzad Abdolhosseini\u003c/b\u003e\u003c/sub\u003e](https://github.com/farzadab)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=farzadab \"Code\")                                                                                        | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/8598682?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGeoffrey Goh\u003c/b\u003e\u003c/sub\u003e](https://github.com/geof90)\u003cbr /\u003e[🐛](https://github.com/aakashns/react-native-dialogs/issues?q=author%3Ageof90 \"Bug reports\") [💻](https://github.com/aakashns/react-native-dialogs/commits?author=geof90 \"Code\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/7588480?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGustavo Fão Valvassori\u003c/b\u003e\u003c/sub\u003e](http://gustavofao.com/)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=faogustavo \"Code\") [🤔](#ideas-faogustavo \"Ideas, Planning, \u0026 Feedback\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/16625347?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHenrik\u003c/b\u003e\u003c/sub\u003e](https://github.com/Henreich)\u003cbr /\u003e[📖](https://github.com/aakashns/react-native-dialogs/commits?author=Henreich \"Documentation\") |     [\u003cimg src=\"https://avatars2.githubusercontent.com/u/1103539?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eheydabop\u003c/b\u003e\u003c/sub\u003e](https://github.com/heydabop)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=heydabop \"Code\")    |          [\u003cimg src=\"https://avatars0.githubusercontent.com/u/13056774?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHuang Yu\u003c/b\u003e\u003c/sub\u003e](https://github.com/hyugit)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=hyugit \"Code\")          |\n|                                                                              [\u003cimg src=\"https://avatars0.githubusercontent.com/u/1516807?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIragne\u003c/b\u003e\u003c/sub\u003e](http://pcdn.jairagne.ovh)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=Iragne \"Code\")                                                                              |                                                                                     [\u003cimg src=\"https://avatars2.githubusercontent.com/u/2677334?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJanic Duplessis\u003c/b\u003e\u003c/sub\u003e](https://medium.com/@janicduplessis)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=janicduplessis \"Code\")                                                                                    |                                    [\u003cimg src=\"https://avatars2.githubusercontent.com/u/7968613?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ejeffchienzabinet\u003c/b\u003e\u003c/sub\u003e](https://github.com/jeffchienzabinet)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=jeffchienzabinet \"Code\")                                    |                            [\u003cimg src=\"https://avatars3.githubusercontent.com/u/1088099?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJeremy Dagorn\u003c/b\u003e\u003c/sub\u003e](http://www.jeremydagorn.com)\u003cbr /\u003e[📖](https://github.com/aakashns/react-native-dialogs/commits?author=jrm2k6 \"Documentation\")                           |         [\u003cimg src=\"https://avatars0.githubusercontent.com/u/13287601?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ejykun\u003c/b\u003e\u003c/sub\u003e](https://github.com/jykun)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=jykun \"Code\")         | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/195925?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMattias Pfeiffer\u003c/b\u003e\u003c/sub\u003e](http://pfeiffer.dk)\u003cbr /\u003e[📖](https://github.com/aakashns/react-native-dialogs/commits?author=pfeiffer \"Documentation\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/14799874?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003epureday\u003c/b\u003e\u003c/sub\u003e](https://github.com/lakeoffaith)\u003cbr /\u003e[📖](https://github.com/aakashns/react-native-dialogs/commits?author=lakeoffaith \"Documentation\") |\n|                                                                        [\u003cimg src=\"https://avatars0.githubusercontent.com/u/7029942?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRadek Czemerys\u003c/b\u003e\u003c/sub\u003e](https://twitter.com/radko93)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=radko93 \"Code\")                                                                        |                                                                                      [\u003cimg src=\"https://avatars3.githubusercontent.com/u/1160365?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRicardo Fuhrmann\u003c/b\u003e\u003c/sub\u003e](https://github.com/Fuhrmann)\u003cbr /\u003e[📖](https://github.com/aakashns/react-native-dialogs/commits?author=Fuhrmann \"Documentation\")                                                                                      |                                                   [\u003cimg src=\"https://avatars0.githubusercontent.com/u/22330398?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRoss\u003c/b\u003e\u003c/sub\u003e](https://thebhwgroup.com/)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=rdixonbhw \"Code\")                                                  |                                [\u003cimg src=\"https://avatars2.githubusercontent.com/u/5407363?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVinicius Zaramella\u003c/b\u003e\u003c/sub\u003e](http://programei.com)\u003cbr /\u003e[💻](https://github.com/aakashns/react-native-dialogs/commits?author=vzaramel \"Code\")                                |                                                                                                                                                                                                                                                    |                                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                                           |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-dialogs%2Freact-native-dialogs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-dialogs%2Freact-native-dialogs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-dialogs%2Freact-native-dialogs/lists"}