{"id":17689009,"url":"https://github.com/heysem-useinsider/react-native-native-dialog","last_synced_at":"2025-05-08T19:36:50.447Z","repository":{"id":34015258,"uuid":"165521910","full_name":"heysem-useinsider/react-native-native-dialog","owner":"heysem-useinsider","description":"A React Native module that exposes some of the common native dialogs to React Native.","archived":false,"fork":false,"pushed_at":"2023-02-04T08:19:22.000Z","size":5942,"stargazers_count":11,"open_issues_count":9,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-04T02:16:59.916Z","etag":null,"topics":["android","dialog","dialogs","ios","native","react-native"],"latest_commit_sha":null,"homepage":"","language":"Swift","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/heysem-useinsider.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-13T15:32:07.000Z","updated_at":"2024-06-20T16:46:38.000Z","dependencies_parsed_at":"2023-02-18T15:01:41.889Z","dependency_job_id":null,"html_url":"https://github.com/heysem-useinsider/react-native-native-dialog","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heysem-useinsider%2Freact-native-native-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heysem-useinsider%2Freact-native-native-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heysem-useinsider%2Freact-native-native-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heysem-useinsider%2Freact-native-native-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heysem-useinsider","download_url":"https://codeload.github.com/heysem-useinsider/react-native-native-dialog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253135450,"owners_count":21859646,"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":["android","dialog","dialogs","ios","native","react-native"],"created_at":"2024-10-24T11:46:11.639Z","updated_at":"2025-05-08T19:36:50.420Z","avatar_url":"https://github.com/heysem-useinsider.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-native-dialog\n\u003e A React Native module that exposes some of the common native dialogs to React Native.\n\n[![Latest Stable Version](https://img.shields.io/npm/v/react-native-native-dialog.svg)](https://www.npmjs.com/package/react-native-native-dialog)\n[![NPM Downloads](https://img.shields.io/npm/dm/react-native-native-dialog.svg)](https://www.npmjs.com/package/react-native-native-dialog)\n[![GitHub issues](https://img.shields.io/github/issues-raw/mohakapt/react-native-native-dialog.svg)](https://github.com/mohakapt/react-native-native-dialog/issues)\n[![Used Languages](https://img.shields.io/github/languages/top/mohakapt/react-native-native-dialog.svg)](https://github.com/mohakapt/react-native-native-dialog/issues)\n\n\u003ch2 id='section_features'\u003e\n✨ Features\n\u003c/h2\u003e\n\n* ✅ Native support for the most commonly used Dialogs on `iOS`  and `Android`.\n* ✅ Dark mode 🌓 and Accent Color 🌈.\n* ✅ Easy to use Api with support for both `Callback` and `Promise`.\n\n\n\u003ch2 id='section_table_of_contents'\u003e\n🚧 Table of Contents\n\u003c/h2\u003e\n\n- [🚀 Motivation](#section_motivation)\n- [⬇️ Installation](#section_installation)\n- [⚒️ Additional Setup](#section_additional_setup)\n- [☘️ Example](#section_example)\n- [🔌 Component API](#section_component_api)\n- [🤝 Contributing](#section_contributing)\n- [💡 FAQ](#section_faq)\n- [👍 Support](#section_support)\n- [📝 License](#section_license)\n\n\n\u003ch2 id='section_motivation'\u003e\n🚀 Motivation\n\u003c/h2\u003e\n\nThe issue with trying to mock native components using `\u003cView /\u003e`s is that no matter how much time and effort you spend to make it look like the real-deal, You end up with janky looking results (I spent hours taking screenshots of the real Android dialog and trying to imitate it, And didn't get a satisfying result). But to be fair, using `react-native` `\u003cView /\u003e`s offers a lot of customization which is something you cannot simply just get with native libraries. So there is a decision that needs to be made.\n\nAnyways I decided to make a library for some of the commonly used dialogs using native APIs.\n\n\n\u003ch2 id='section_installation'\u003e\n⬇️ Installation\n\u003c/h2\u003e\n\n```bash\nnpm install react-native-native-dialog --save\n\ncd ios \u0026\u0026 pod install   # Only if you're building for iOS\n```\n**Or if you're using yarn:**\n\n```bash\nyarn add react-native-native-dialog\n\ncd ios \u0026\u0026 pod install   # Only if you're building for iOS\n```\n\n\u003e ⚠️ The library only works with react-native@0.60 and up.\n\n\n\u003ch2 id='section_additional_setup'\u003e\n⚒️ Additional Setup\n\u003c/h2\u003e\n\nSince this library only works with react-native@0.60.0 and up there is no need to manually link the library, But there still some additional setup you need to do.\n\n**iOS**\n\nThis library is written in `Swift` so we need to create a bridging header in your `XCode` project (If you've already done it you can skip this section).\n\n![Create Bridging Header](https://raw.githubusercontent.com/mohakapt/react-native-native-dialog/master/images/create-bridging-header.gif)\n\n0. First of all make sure you run ```pod install``` in `Terminal` inside `ios` folder.\n0. In XCode, in the project navigator, right click `[your project's name]` ➜ `New File...`\n0. Select `Swift File`, click `Next` and then click `Create`.\n0. `XCode` will ask you whether you want to create bridging header, Click `Create Bridging Header`.\n0. Build your project (`Cmd+B`), And you're ready to go.\n\n**Android**\n\nUnfortunately `Android` doesn't support changing the `accentColor` dynamically, the only way to use a custom `accentColor` is to define your style statically in `res/values/styles.xml` (If you're ok with using the default `accentColor` ![#009688](https://placehold.it/15/009688/000000?text=+) in `Android` you can skip this section).\n\n0. Open `android/app/src/main/res/values/styles.xml`\n   - If you don't have one create a new file in the exact same path.\n   - Add those tow styles to the bottom of your `styles.xml` file and replace `colorPrimary`, `colorPrimaryDark` and `colorAccent` with your own colors:\n   ```diff\n   \u003cresources\u003e\n       ...\n\n   +    \u003cstyle name=\"AlertDialog\" parent=\"Theme.AppCompat.Dialog.Alert\"\u003e   \u003c!--This theme is used for dark dialog--\u003e\n   +        \u003citem name=\"colorPrimary\"\u003e#FFB300\u003c/item\u003e       \u003c!--Replace the these colors with your own colors--\u003e\n   +        \u003citem name=\"colorPrimaryDark\"\u003e#FFB300\u003c/item\u003e\n   +        \u003citem name=\"colorAccent\"\u003e#FFB300\u003c/item\u003e\n   +    \u003c/style\u003e\n\n   +    \u003cstyle name=\"LightAlertDialog\" parent=\"Theme.AppCompat.Light.Dialog.Alert\"\u003e   \u003c!--This theme is used for light dialog--\u003e\n   +        \u003citem name=\"colorPrimary\"\u003e#E6A100\u003c/item\u003e       \u003c!--Replace the these colors with your own colors--\u003e\n   +        \u003citem name=\"colorPrimaryDark\"\u003e#E6A100\u003c/item\u003e\n   +        \u003citem name=\"colorAccent\"\u003e#E6A100\u003c/item\u003e\n   +    \u003c/style\u003e\n\n   \u003c/resources\u003e\n   ```\n0. Next open up `android/app/src/main/java/[...]/MainAppliction.java`\n   - Add `import com.github.mohaka.nativedialog.RNNativeDialogPackage;` to the imports at the top of the file\n   - Add `RNNativeDialogPackage.setDialogTheme(R.style.AlertDialog, R.style.LightAlertDialog);` to the bottom of `onCreate()` method.\n   ```diff\n   ...\n\n   import android.app.Application;\n   import android.content.Context;\n\n   + import com.github.mohaka.nativedialog.RNNativeDialogPackage;\n\n   ...\n\n   @Override\n   public void onCreate() {\n       super.onCreate();\n       SoLoader.init(this, /* native exopackage */ false);\n   +   RNNativeDialogPackage.setDialogTheme(R.style.AlertDialog, R.style.LightAlertDialog);\n       initializeFlipper(this, getReactNativeHost().getReactInstanceManager());\n   }\n\n   ...\n   ```\n0. Build your project and start using `react-native-native-dialog`.\n\n\n\u003ch2 id='section_example'\u003e\n☘️ Example\n\u003c/h2\u003e\n\n```javascript\nimport NativeDialog from 'react-native-native-dialog';\n\nNativeDialog.showDialog({\n   title: 'Do you want to update your iCloud Backup before erasing?',\n   message: 'If you erase without updating your backup, you may lose photos and other data that are not yet uploaded to iCloud.',\n\n   positiveButton: 'Back Up Then Erase',\n   negativeButton: 'Erase Now',\n   neutralButton: 'Cancel',\n\n   negativeButtonStyle: 'default',\n   neutralButtonStyle: 'cancel',\n\n   theme: 'dark',\n   accentColor: '#ff4a9e',\n\n   onPositivePress: () =\u003e console.warn('positive'),\n   onNegativePress: () =\u003e console.warn('negative'),\n   onNeutralPress: () =\u003e console.warn('neutral'),\n\n   onDismiss: () =\u003e console.warn('dismiss'),\n});\n```\n\n\n\u003ch2 id='section_component_api'\u003e\n🔌 Component API\n\u003c/h2\u003e\n\n[`NativeDialog.showDialog()` API](docs/dialog.md)\n\n[`NativeDialog.showInputDialog()` API](docs/inputdialog.md)\n\n[`NativeDialog.showItemsDialog()` API](docs/itemsdialog.md)\n\n[`NativeDialog.showNumberPickerDialog()` API](docs/numberpickerdialog.md)\n\n[`NativeDialog.showRatingDialog()` API](docs/ratingdialog.md)\n\n\n\u003ch2 id='section_contributing'\u003e\n🤝 Contributing\n\u003c/h2\u003e\n\nWe would love to have community contributions and support! A few areas where could use help right now:\n* Bug reports and/or fixes\n* Writing tests\n* Creating examples for the docs\n\nIf you want to contribute, please submit a pull request, or contact mohakapt@gmail.com for more information.\nWhen you commit your messages, follow this convention:\n```\nApp changes subject\n- Optional message\n- Another optional message\n```\n\nIf you do a breaking change, add an explanation preceded by `BREAKING CHANGE:` keyword. For example:\n```\nBREAKING CHANGE: App changes subject\n- Optional message\n- Another optional message\n```\n\n\n\u003ch2 id='section_faq'\u003e\n💡 FAQ\n\u003c/h2\u003e\n\n\u003ch2 id='section_support'\u003e\n👍 Support\n\u003c/h2\u003e\n\n* **Heysem Katibi** - *Initial work*\n* **Yaman Katby**\n\nSee also the list of [contributors](https://github.com/mohakapt/react-native-native-dialog/contributors) who participated in this project.\n\n\u003ch2 id='section_license'\u003e\n📝 License\n\u003c/h2\u003e\n\nThis library is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheysem-useinsider%2Freact-native-native-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheysem-useinsider%2Freact-native-native-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheysem-useinsider%2Freact-native-native-dialog/lists"}