{"id":4141,"url":"https://github.com/mmazzarolo/react-native-dialog","last_synced_at":"2025-04-14T05:15:42.828Z","repository":{"id":28237888,"uuid":"117144928","full_name":"mmazzarolo/react-native-dialog","owner":"mmazzarolo","description":"Pure JavaScript React-Native dialog","archived":false,"fork":false,"pushed_at":"2024-03-12T17:08:36.000Z","size":3596,"stargazers_count":694,"open_issues_count":15,"forks_count":111,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-14T05:15:29.043Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/mmazzarolo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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,"publiccode":null,"codemeta":null}},"created_at":"2018-01-11T19:40:39.000Z","updated_at":"2025-03-30T03:14:51.000Z","dependencies_parsed_at":"2024-06-18T12:32:17.340Z","dependency_job_id":"33f02bb3-096b-4033-8f19-b5baf9bfe14f","html_url":"https://github.com/mmazzarolo/react-native-dialog","commit_stats":{"total_commits":155,"total_committers":34,"mean_commits":"4.5588235294117645","dds":"0.41290322580645167","last_synced_commit":"1921f3c5aaa6a6be94ee653b4272156c39e8592b"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmazzarolo%2Freact-native-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmazzarolo","download_url":"https://codeload.github.com/mmazzarolo/react-native-dialog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248824693,"owners_count":21167345,"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","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":[],"created_at":"2024-01-05T20:17:02.369Z","updated_at":"2025-04-14T05:15:42.792Z","avatar_url":"https://github.com/mmazzarolo.png","language":"TypeScript","funding_links":[],"categories":["Components","TypeScript"],"sub_categories":["UI"],"readme":"# react-native-dialog\n\n[![npm version](https://badge.fury.io/js/react-native-dialog.svg)](https://badge.fury.io/js/react-native-dialog)\n\nA flexible pure JavaScript React-Native dialog that follows closely the native UI guidelines.\n\n## Features\n\n- Support for iOS and Android (JavaScript API)\n- A flexible declarative API\n- Follows closely the UI of native dialogs/alerts\n- Can be used both as an alert and as an input prompt\n- Can be injected with any component\n- Supports light/dark mode\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/master/.github/docs-images/react-native-dialog-ios-alert.png\" height=\"500\" /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/master/.github/docs-images/react-native-dialog-android-alert.png\" height=\"500\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/master/.github/docs-images/react-native-dialog-ios-input.png\" height=\"500\" /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/master/.github/docs-images/react-native-dialog-android-input.png\" height=\"500\" /\u003e\n\u003c/p\u003e\n\n## Setup\n\nInstall the library using npm or yarn:\n\n```bash\n# Using npm:\n$ npm install react-native-dialog\n# Using yarn:\n$ yarn add react-native-dialog\n```\n\n## Usage\n\nReact-native-dialog exposes a set of components that can be used to build the UI of the dialog:\n\n- **Dialog.Container**: This component is the root component of the dialog and all the other components should be nested inside it.\n- **Dialog.Title**: A `Text` component styled as a native dialog title.\n- **Dialog.Description**: A `Text` component styled as a native dialog description.\n- **Dialog.Button**: A component styled as a native dialog button.\n- **Dialog.Input**: A `TextInput` component styled as a native dialog input.\n- **Dialog.CodeInput**: A `TextInput` component styled as one time code input.\n- **Dialog.Switch**: A native `Switch` component with an optional label.\n\n1. Import react-native-dialog:\n\n```javascript\nimport Dialog from \"react-native-dialog\";\n```\n\n2. Create a dialog and nest its content inside of it:\n\n```javascript\nreturn (\n  \u003cView\u003e\n    \u003cDialog.Container\u003e\n      \u003cDialog.Title\u003eAccount delete\u003c/Dialog.Title\u003e\n      \u003cDialog.Description\u003e\n        Do you want to delete this account? You cannot undo this action.\n      \u003c/Dialog.Description\u003e\n      \u003cDialog.Button label=\"Cancel\" /\u003e\n      \u003cDialog.Button label=\"Delete\" /\u003e\n    \u003c/Dialog.Container\u003e\n  \u003c/View\u003e\n);\n```\n\n3. Then simply show it by setting the `visible` prop to true:\n\n```javascript\nreturn (\n  \u003cView\u003e\n    \u003cDialog.Container visible={true}\u003e\n      \u003cDialog.Title\u003eAccount delete\u003c/Dialog.Title\u003e\n      \u003cDialog.Description\u003e\n        Do you want to delete this account? You cannot undo this action.\n      \u003c/Dialog.Description\u003e\n      \u003cDialog.Button label=\"Cancel\" /\u003e\n      \u003cDialog.Button label=\"Delete\" /\u003e\n    \u003c/Dialog.Container\u003e\n  \u003c/View\u003e\n);\n```\n\nThe `visible` prop is the only prop you'll really need to make the dialog work: you should control this prop value by saving it in your state and setting it to `true` or `false` when needed.\n\n## A complete example\n\nThe following example consists in a component (`DialogTester`) with a button and a dialog.\nThe dialog is controlled by the `dialogVisible` state variable and it is initially hidden since its value is `false`.\nPressing the button sets `dialogVisible` to true, making the dialog visible.\nInside the dialog there are two buttons that, when pressed, set `dialogVisible` to false, hiding the dialog.\n\n```javascript\nimport React, { useState } from \"react\";\nimport { Button, StyleSheet, View } from \"react-native\";\nimport Dialog from \"react-native-dialog\";\n\nexport default function App() {\n  const [visible, setVisible] = useState(false);\n\n  const showDialog = () =\u003e {\n    setVisible(true);\n  };\n\n  const handleCancel = () =\u003e {\n    setVisible(false);\n  };\n\n  const handleDelete = () =\u003e {\n    // The user has pressed the \"Delete\" button, so here you can do your own logic.\n    // ...Your logic\n    setVisible(false);\n  };\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cButton title=\"Show dialog\" onPress={showDialog} /\u003e\n      \u003cDialog.Container visible={visible}\u003e\n        \u003cDialog.Title\u003eAccount delete\u003c/Dialog.Title\u003e\n        \u003cDialog.Description\u003e\n          Do you want to delete this account? You cannot undo this action.\n        \u003c/Dialog.Description\u003e\n        \u003cDialog.Button label=\"Cancel\" onPress={handleCancel} /\u003e\n        \u003cDialog.Button label=\"Delete\" onPress={handleDelete} /\u003e\n      \u003c/Dialog.Container\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n```\n\n## Available props\n\n### Dialog.Button props\n\n| Name     | Type   | Default                                | Description                             |\n| -------- | ------ | -------------------------------------- | --------------------------------------- |\n| label    | string | **REQUIRED**                           | The label text                          |\n| color    | string | `#007ff9` on iOS, `#169689` on Android | The label color                         |\n| bold     | bool   | false                                  | Show the label with a bold font weight? |\n| disabled | bool   | false                                  | Disable the button?                     |\n| onPress  | func   | **REQUIRED**                           | Called when the button is pressed       |\n\n### Dialog.Description props\n\n| Name     | Type   | Default      | Description          |\n| -------- | ------ | ------------ | -------------------- |\n| children | string | **REQUIRED** | The description text |\n\n### Dialog.Container props\n\n| Name                   | Type   | Default       | Description                                                                                         |\n| ---------------------- | ------ | ------------- | --------------------------------------------------------------------------------------------------- |\n| blurComponentIOS       | node   | A low-opacity | The blur component used in iOS                                                                      |\n| visible                | bool   | **REQUIRED**  | Show the dialog?                                                                                    |\n| children               | node   | **REQUIRED**  | The dialog content                                                                                  |\n| contentStyle           | any    | undefined     | Extra style applied to the dialog content                                                           |\n| headerStyle            | any    | undefined     | Extra style applied to the dialog header                                                            |\n| footerStyle            | any    | undefined     | Extra style applied to the dialog footer                                                            |\n| buttonSeparatorStyle   | any    | undefined     | Extra style applied to the dialog button separator                                                  |\n| onBackdropPress        | func   | undefined     | Callback invoked when the backdrop is pressed                                                       |\n| onRequestClose         | func   | undefined     | Callback invoked when the hardware back button on Android or the menu button on Apple TV is pressed |\n| keyboardVerticalOffset | number | undefined     | keyboardVerticalOffset for iOS                                                                      |\n| verticalButtons        | bool   | false         | Renders button vertically                                                                           |\n| useNativeDriver        | bool   | false         | Defines if animations should use native driver                                                      |\n\n### Dialog.Input props\n\n| Name               | Type   | Default   | Description                                                             |\n| ------------------ | ------ | --------- | ----------------------------------------------------------------------- |\n| label              | string | undefined | The input floating label                                                |\n| wrapperStyle       | any    | undefined | The style applied to the input wrapper View                             |\n| textInputRef       | ref    | undefined | Ref to the input                                                        |\n| unstableLabelStyle | any    | undefined | Likely to be removed in a future version. See issue #141 for discussion |\n\n`Dialog.Input` also accepts all the React-Native's `TextInput` component props.\n\n### Dialog.CodeInput props\n\n| Name                       | Type   | Default   | Description                                                 |\n| -------------------------- | ------ | --------- | ----------------------------------------------------------- |\n| wrapperStyle               | any    | undefined | The style applied to the input wrapper View                 |\n| digitContainerStyle        | any    | undefined | The style applied to the digit container View               |\n| digitContainerFocusedStyle | any    | undefined | The style applied to the digit container View when in focus |\n| digitStyle                 | any    | undefined | The style applied to the digit text                         |\n| codeLength                 | number | 4         | The total number of digits                                  |\n| onCodeChange               | func   | undefined | Called when the input changed                               |\n\n`Dialog.CodeInput` also accepts all the React-Native's `TextInput` component props.\n\n### Dialog.Title props\n\n| Name     | Type   | Default      | Description    |\n| -------- | ------ | ------------ | -------------- |\n| children | string | **REQUIRED** | The title text |\n\n`Dialog.Title` also accepts all the React-Native's `Text` component props.\n\n### Dialog.Switch props\n\n| Name               | Type   | Default   | Description                                                             |\n| ------------------ | ------ | --------- | ----------------------------------------------------------------------- |\n| label              | string | undefined | The switch description text                                             |\n| unstableLabelStyle | any    | undefined | Likely to be removed in a future version. See issue #141 for discussion |\n\n`Dialog.Switch` also accepts all the React-Native's `Switch` component props.\n\n## Frequently Asked Questions\n\n### How can I use a custom blur component as the dialog background on iOS?\n\nTo achieve a look even closer to the native iOS dialog you can provide your own component in the `blurComponentIOS` prop of a `Dialog.Container` and it will be injected in the dialog to be used as a background.\nThe `blurComponentIOS` can be useful for example if you want to apply a native blur effect to the dialog.\nHere is an example using `react-native-blur`:\n\n```javascript\nconst blurComponentIOS = (\n  \u003cBlurView style={StyleSheet.absoluteFill} blurType=\"xlight\" blurAmount={50} /\u003e\n);\nreturn (\n  \u003cView style={styles.container}\u003e\n    \u003cDialog.Container visible={visible} blurComponentIOS={blurComponentIOS}\u003e\n      \u003cDialog.Title\u003eAccount delete\u003c/Dialog.Title\u003e\n      \u003cDialog.Description\u003e\n        Do you want to delete this account? You cannot undo this action.\n      \u003c/Dialog.Description\u003e\n      \u003cDialog.Button label=\"Cancel\" onPress={handleCancel} /\u003e\n      \u003cDialog.Button label=\"Delete\" onPress={handleConfirm} /\u003e\n    \u003c/Dialog.Container\u003e\n  \u003c/View\u003e\n);\n```\n\n### How can I add a 'tap outside dialog' callback?\n\n`react-native-dialog` uses [a thin abstraction on top of the React-Native's modal component](./src/Modal.tsx). Any properties you add to `Dialog.Container` are mapped through to the modal.\nThe modal has an `onBackdropPress` property that can be used to register clicks on the backdrop.\n\nBelow is an example of how you can close the dialog by tapping outside.\n\n```javascript\nconst [visible, setVisible] = useState(true);\n\nconst handleCancel = () =\u003e {\n  setVisible(false);\n};\n\nreturn (\n  \u003cDialog.Container visible={visible} onBackdropPress={handleCancel}\u003e\n    \u003cDialog.Title\u003eTitle\u003c/Dialog.Title\u003e\n    \u003cDialog.Button label=\"Cancel\" onPress={handleCancel} /\u003e\n  \u003c/Dialog.Container\u003e\n);\n```\n\n## Acknowledgments\n\nThanks to the user [@honaf](https://github.com/honaf) who has kindly offered the `react-native-dialog` namespace.\nAlso thanks to the user [@leecade](https://github.com/leecade) who offered the namespace `react-native-alert` (which has not been used since \"Dialog\" seems to suit better this component) and to [@tyxou](https://github.com/tyxou) for the entire codebase refactoring to hooks.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmazzarolo%2Freact-native-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmazzarolo%2Freact-native-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmazzarolo%2Freact-native-dialog/lists"}