├── .eslintrc
├── .github
├── ISSUE_TEMPLATE
│ ├── BUG_REPORT.md
│ └── QUESTION.md
├── PULL_REQUEST_TEMPLATE.md
├── docs-images
│ ├── react-native-dialog-android-alert.png
│ ├── react-native-dialog-android-input.png
│ ├── react-native-dialog-ios-alert.png
│ └── react-native-dialog-ios-input.png
└── workflows
│ ├── release.yml
│ └── test.yml
├── .gitignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── example
├── .buckconfig
├── .gitattributes
├── .gitignore
├── App.js
├── README.md
├── android
│ ├── app
│ │ ├── BUCK
│ │ ├── build.gradle
│ │ ├── build_defs.bzl
│ │ ├── proguard-rules.pro
│ │ └── src
│ │ │ ├── debug
│ │ │ ├── AndroidManifest.xml
│ │ │ └── java
│ │ │ │ └── com
│ │ │ │ └── example
│ │ │ │ └── ReactNativeFlipper.java
│ │ │ └── main
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── java
│ │ │ └── com
│ │ │ │ └── example
│ │ │ │ ├── MainActivity.java
│ │ │ │ ├── MainApplication.java
│ │ │ │ └── generated
│ │ │ │ └── BasePackageList.java
│ │ │ └── res
│ │ │ ├── drawable
│ │ │ ├── splashscreen.xml
│ │ │ └── splashscreen_image.png
│ │ │ ├── mipmap-hdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ ├── mipmap-mdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ ├── mipmap-xhdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ ├── mipmap-xxhdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ ├── mipmap-xxxhdpi
│ │ │ ├── ic_launcher.png
│ │ │ └── ic_launcher_round.png
│ │ │ └── values
│ │ │ ├── colors.xml
│ │ │ ├── strings.xml
│ │ │ └── styles.xml
│ ├── build.gradle
│ ├── gradle.properties
│ ├── gradle
│ │ └── wrapper
│ │ │ ├── gradle-wrapper.jar
│ │ │ └── gradle-wrapper.properties
│ ├── gradlew
│ ├── gradlew.bat
│ └── settings.gradle
├── app.json
├── babel.config.js
├── index.js
├── ios
│ ├── Podfile
│ ├── Podfile.lock
│ ├── example.xcodeproj
│ │ ├── project.pbxproj
│ │ └── xcshareddata
│ │ │ └── xcschemes
│ │ │ └── example.xcscheme
│ ├── example.xcworkspace
│ │ └── contents.xcworkspacedata
│ └── example
│ │ ├── AppDelegate.h
│ │ ├── AppDelegate.m
│ │ ├── Base.lproj
│ │ └── LaunchScreen.xib
│ │ ├── Images.xcassets
│ │ ├── AppIcon.appiconset
│ │ │ └── Contents.json
│ │ ├── Contents.json
│ │ ├── SplashScreen.imageset
│ │ │ ├── Contents.json
│ │ │ └── splashscreen.png
│ │ └── SplashScreenBackground.imageset
│ │ │ ├── Contents.json
│ │ │ └── background.png
│ │ ├── Info.plist
│ │ ├── SplashScreen.storyboard
│ │ ├── Supporting
│ │ └── Expo.plist
│ │ └── main.m
├── metro.config.js
├── package-lock.json
├── package.json
└── sync-local-package.sh
├── package-lock.json
├── package.json
├── src
├── Button.tsx
├── CodeInput.tsx
├── Container.tsx
├── Description.tsx
├── Input.tsx
├── Modal.tsx
├── Switch.tsx
├── Title.tsx
├── index.ts
└── useTheme.ts
└── tsconfig.json
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "parser": "@typescript-eslint/parser",
4 | "parserOptions": {
5 | "ecmaVersion": 2017,
6 | "sourceType": "module",
7 | "ecmaFeatures": {
8 | "jsx": true
9 | }
10 | },
11 | "plugins": [
12 | "@typescript-eslint",
13 | "react-native"
14 | ],
15 | "extends": [
16 | "plugin:react/recommended",
17 | "prettier/@typescript-eslint",
18 | "plugin:@typescript-eslint/eslint-recommended",
19 | "plugin:@typescript-eslint/recommended",
20 | "plugin:prettier/recommended"
21 | ],
22 | "settings": {
23 | "react": {
24 | "version": "detect"
25 | }
26 | },
27 | "rules": {
28 | "@typescript-eslint/explicit-module-boundary-types": 0,
29 | "@typescript-eslint/no-explicit-any": 0,
30 | "react/prop-types": 0
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/BUG_REPORT.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: 🐛 Report a bug
3 | about: Report a reproducible or regression bug.
4 | labels: "bug"
5 | ---
6 |
7 | ## Environment
8 |
9 |
10 |
11 | ## Platforms
12 |
13 |
14 |
15 | ## Versions
16 |
17 |
18 |
19 | - Android:
20 | - iOS:
21 | - react-native-dialog:
22 | - react-native:
23 | - react:
24 |
25 | ## Description
26 |
27 |
28 |
29 | ## Reproducible Demo
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/QUESTION.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: 💬 Question
3 | about: Need a new feature? Have a quick question about the library?
4 | labels: "question"
5 | ---
6 |
7 | ## Ask your Question
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | # Overview
2 |
3 |
4 |
5 |
6 | # Test Plan
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/.github/docs-images/react-native-dialog-android-alert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/1921f3c5aaa6a6be94ee653b4272156c39e8592b/.github/docs-images/react-native-dialog-android-alert.png
--------------------------------------------------------------------------------
/.github/docs-images/react-native-dialog-android-input.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/1921f3c5aaa6a6be94ee653b4272156c39e8592b/.github/docs-images/react-native-dialog-android-input.png
--------------------------------------------------------------------------------
/.github/docs-images/react-native-dialog-ios-alert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/1921f3c5aaa6a6be94ee653b4272156c39e8592b/.github/docs-images/react-native-dialog-ios-alert.png
--------------------------------------------------------------------------------
/.github/docs-images/react-native-dialog-ios-input.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/1921f3c5aaa6a6be94ee653b4272156c39e8592b/.github/docs-images/react-native-dialog-ios-input.png
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | jobs:
8 | release:
9 | name: Release
10 | runs-on: ubuntu-latest
11 | steps:
12 | - name: Checkout
13 | uses: actions/checkout@v2
14 |
15 | - name: Setup node
16 | uses: actions/setup-node@v1
17 | with:
18 | node-version: '12.x'
19 |
20 | - name: Restore ~/.npm cache
21 | uses: actions/cache@v2
22 | with:
23 | path: ~/.npm
24 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
25 | restore-keys: |
26 | ${{ runner.os }}-node-
27 |
28 | - name: Install dependencies
29 | run: npm ci
30 |
31 | - name: Build
32 | run: npm run build
33 |
34 | - name: Release
35 | env:
36 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
37 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
38 | run: npx semantic-release
--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: Build & Test
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | pull_request:
8 | branches:
9 | - master
10 |
11 | jobs:
12 | test:
13 | runs-on: ubuntu-latest
14 | name: Build & Lint
15 | steps:
16 | - name: Checkout
17 | uses: actions/checkout@v2
18 |
19 | - name: Setup node
20 | uses: actions/setup-node@v1
21 | with:
22 | node-version: '12.x'
23 |
24 | - name: Restore ~/.npm cache
25 | uses: actions/cache@v2
26 | with:
27 | path: ~/.npm
28 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
29 | restore-keys: |
30 | ${{ runner.os }}-node-
31 |
32 | - name: Install dependencies
33 | run: npm ci
34 |
35 | - name: Run build
36 | run: npm run build
37 |
38 | - name: Run lint
39 | run: npm run lint
40 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Node.js
6 | node_modules/
7 | npm-debug.log
8 | jsconfig.json
9 | dump.rdb
10 | .vscode
11 | .idea
12 |
13 | /lib
14 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # [9.3.0](https://github.com/mmazzarolo/react-native-dialog/compare/v9.2.2...v9.3.0) (2022-10-31)
2 |
3 |
4 | ### Features
5 |
6 | * Add unstableLabelStyle & fix switch statement comparison method ([#150](https://github.com/mmazzarolo/react-native-dialog/issues/150)) ([839915b](https://github.com/mmazzarolo/react-native-dialog/commit/839915bc546707526f3853d454fbe87b24d2cac3))
7 |
8 | ## [9.2.2](https://github.com/mmazzarolo/react-native-dialog/compare/v9.2.1...v9.2.2) (2022-06-09)
9 |
10 |
11 | ### Bug Fixes
12 |
13 | * remove usage of PropTypes ([#139](https://github.com/mmazzarolo/react-native-dialog/issues/139)) ([538ff00](https://github.com/mmazzarolo/react-native-dialog/commit/538ff007942145d1d9aa85a34d65afa25015db16))
14 |
15 | ## [9.2.1](https://github.com/mmazzarolo/react-native-dialog/compare/v9.2.0...v9.2.1) (2022-02-11)
16 |
17 |
18 | ### Bug Fixes
19 |
20 | * ios description platform color ([#133](https://github.com/mmazzarolo/react-native-dialog/issues/133)) ([2952f47](https://github.com/mmazzarolo/react-native-dialog/commit/2952f470130ce119e5d5dcd4844d3bcae3513e3d))
21 |
22 | # [9.2.0](https://github.com/mmazzarolo/react-native-dialog/compare/v9.1.2...v9.2.0) (2021-10-23)
23 |
24 |
25 | ### Features
26 |
27 | * Add `CodeInput` component ([#128](https://github.com/mmazzarolo/react-native-dialog/issues/128)) ([961f9a0](https://github.com/mmazzarolo/react-native-dialog/commit/961f9a0e9c1803fcc1bfcd8ded1e697054899bb9))
28 |
29 | ## [9.1.2](https://github.com/mmazzarolo/react-native-dialog/compare/v9.1.1...v9.1.2) (2021-10-01)
30 |
31 |
32 | ### Bug Fixes
33 |
34 | * Change style propType of Input from View to Text ([#124](https://github.com/mmazzarolo/react-native-dialog/issues/124)) ([d71d204](https://github.com/mmazzarolo/react-native-dialog/commit/d71d20489c5d4e7038ebbb8dc183fc352d87b409))
35 |
36 | ## [9.1.1](https://github.com/mmazzarolo/react-native-dialog/compare/v9.1.0...v9.1.1) (2021-09-30)
37 |
38 |
39 | ### Bug Fixes
40 |
41 | * Make Button label prop type required ([#123](https://github.com/mmazzarolo/react-native-dialog/issues/123)) ([e096d6b](https://github.com/mmazzarolo/react-native-dialog/commit/e096d6bf6814a114bb635585caa0babe72c3bd1c))
42 |
43 | # [9.1.0](https://github.com/mmazzarolo/react-native-dialog/compare/v9.0.0...v9.1.0) (2021-09-08)
44 |
45 |
46 | ### Features
47 |
48 | * Expose `useNativeDriver` as `Container` prop ([#122](https://github.com/mmazzarolo/react-native-dialog/issues/122)) ([dd6d979](https://github.com/mmazzarolo/react-native-dialog/commit/dd6d979279b22ad869d95ba530a1e9cd1fc1601b))
49 |
50 | # [9.0.0](https://github.com/mmazzarolo/react-native-dialog/compare/v8.2.0...v9.0.0) (2021-09-08)
51 |
52 |
53 | ### Bug Fixes
54 |
55 | * Typescript updates ([#121](https://github.com/mmazzarolo/react-native-dialog/issues/121)) ([1ba6f16](https://github.com/mmazzarolo/react-native-dialog/commit/1ba6f16fb2127f8da7e41c79444709b56cb0d4f6))
56 |
57 |
58 | ### BREAKING CHANGES
59 |
60 | * Updated TypeScript type definitions. Types _should_ just be more relaxed now — but since we updated the entire codebase we'll release this a major bump to be safe.
61 |
62 | # [8.2.0](https://github.com/mmazzarolo/react-native-dialog/compare/v8.1.1...v8.2.0) (2021-07-19)
63 |
64 |
65 | ### Features
66 |
67 | * Handle hardware back button on Android ([#114](https://github.com/mmazzarolo/react-native-dialog/issues/114)) ([e9b6cf5](https://github.com/mmazzarolo/react-native-dialog/commit/e9b6cf583cb5070cbb4c542ec9569e29fae3877a))
68 |
69 | ## [8.1.1](https://github.com/mmazzarolo/react-native-dialog/compare/v8.1.0...v8.1.1) (2021-07-15)
70 |
71 |
72 | ### Bug Fixes
73 |
74 | * **title:** children prop allows node instead of string ([#112](https://github.com/mmazzarolo/react-native-dialog/issues/112)) ([8290768](https://github.com/mmazzarolo/react-native-dialog/commit/8290768e73cf22e85404c6ebec9a328a3f0bf022))
75 |
76 | # [8.1.0](https://github.com/mmazzarolo/react-native-dialog/compare/v8.0.1...v8.1.0) (2021-07-12)
77 |
78 |
79 | ### Features
80 |
81 | * Added support for vertical buttons ([bebc3d0](https://github.com/mmazzarolo/react-native-dialog/commit/bebc3d040bdc0749e5bfbdc3c05ceebfaec7c8d5))
82 |
83 | ## [8.0.1](https://github.com/mmazzarolo/react-native-dialog/compare/v8.0.0...v8.0.1) (2021-04-18)
84 |
85 |
86 | ### Bug Fixes
87 |
88 | * Mark "textInputRef" and "blurComponentIOS" as optional ([#103](https://github.com/mmazzarolo/react-native-dialog/issues/103)) ([c92fe5d](https://github.com/mmazzarolo/react-native-dialog/commit/c92fe5d1492bbe55d06c7af4dec2be653360640f))
89 |
90 | # [8.0.0](https://github.com/mmazzarolo/react-native-dialog/compare/v7.0.0...v8.0.0) (2021-04-17)
91 |
92 |
93 | ### Features
94 |
95 | * Use TypeScript in the codebase and expose TypeScript type-definitions ([#101](https://github.com/mmazzarolo/react-native-dialog/issues/101)) ([77d41f6](https://github.com/mmazzarolo/react-native-dialog/commit/77d41f6f5fae17650245684c10ab3de3df93e76b))
96 |
97 |
98 | ### BREAKING CHANGES
99 |
100 | * Previous type definitions used in your app may not be compatible with this release anymore.
101 |
102 | # [7.0.0](https://github.com/mmazzarolo/react-native-dialog/compare/v6.2.0...v7.0.0) (2021-04-16)
103 |
104 |
105 | ### Features
106 |
107 | * Add support for dark mode ([#100](https://github.com/mmazzarolo/react-native-dialog/issues/100)) ([57b065e](https://github.com/mmazzarolo/react-native-dialog/commit/57b065e1524e64f28b7a07ebd8062d7b1982cc76))
108 |
109 |
110 | ### BREAKING CHANGES
111 |
112 | * We are now using the native colors instead of the hardcoded ones — which means that if your react-native app is using a specific accent/primary color it will be now shown correctly in the dialog.
113 |
114 | # [6.2.0](https://github.com/mmazzarolo/react-native-dialog/compare/v6.1.2...v6.2.0) (2021-02-19)
115 |
116 |
117 | ### Features
118 |
119 | * add keyboardVerticalOffset support for iOS ([#93](https://github.com/mmazzarolo/react-native-dialog/issues/93)) ([f44d21b](https://github.com/mmazzarolo/react-native-dialog/commit/f44d21bbe72183c129fba72b79440af26c348b1e))
120 |
121 | ## [6.1.2](https://github.com/mmazzarolo/react-native-dialog/compare/v6.1.1...v6.1.2) (2020-10-24)
122 |
123 |
124 | ### Bug Fixes
125 |
126 | * Always cover the whole screen (even with translucent status bar) ([#85](https://github.com/mmazzarolo/react-native-dialog/issues/85)) ([09b2f35](https://github.com/mmazzarolo/react-native-dialog/commit/09b2f3584890be76fd56d3e2719ea928e8130ebf))
127 |
128 | ## [6.1.1](https://github.com/mmazzarolo/react-native-dialog/compare/v6.1.0...v6.1.1) (2020-10-18)
129 |
130 |
131 | ### Bug Fixes
132 |
133 | * Added onBackdropPress on proptypes & docs update ([8b273d4](https://github.com/mmazzarolo/react-native-dialog/commit/8b273d45e76502d9366db2f6888bfc911ab6b1a1))
134 |
135 | # [6.1.0](https://github.com/mmazzarolo/react-native-dialog/compare/v6.0.1...v6.1.0) (2020-10-17)
136 |
137 |
138 | ### Features
139 |
140 | * Improved animation fidelity ([63ffbce](https://github.com/mmazzarolo/react-native-dialog/commit/63ffbce5f0e0fa63604529589815b94fc1625c85))
141 | * Improved animation fidelity ([4480c0e](https://github.com/mmazzarolo/react-native-dialog/commit/4480c0e4c1622d8a29287112c07ba6e0c7ae2d8a))
142 |
143 | ## [6.0.1](https://github.com/mmazzarolo/react-native-dialog/compare/v6.0.0...v6.0.1) (2020-10-17)
144 |
145 |
146 | ### Bug Fixes
147 |
148 | * Fix onBackdropPress trigger ([9a8865e](https://github.com/mmazzarolo/react-native-dialog/commit/9a8865ecbfb1fcc567dbea07235f3c3831b76c4c))
149 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 React Native Community
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-native-dialog
2 |
3 | [](https://badge.fury.io/js/react-native-dialog)
4 |
5 | A flexible pure JavaScript React-Native dialog that follows closely the native UI guidelines.
6 |
7 | ## Features
8 |
9 | - Support for iOS and Android (JavaScript API)
10 | - A flexible declarative API
11 | - Follows closely the UI of native dialogs/alerts
12 | - Can be used both as an alert and as an input prompt
13 | - Can be injected with any component
14 | - Supports light/dark mode
15 |
16 | ## Demo
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | ## Setup
29 |
30 | Install the library using npm or yarn:
31 |
32 | ```bash
33 | # Using npm:
34 | $ npm install react-native-dialog
35 | # Using yarn:
36 | $ yarn add react-native-dialog
37 | ```
38 |
39 | ## Usage
40 |
41 | React-native-dialog exposes a set of components that can be used to build the UI of the dialog:
42 |
43 | - **Dialog.Container**: This component is the root component of the dialog and all the other components should be nested inside it.
44 | - **Dialog.Title**: A `Text` component styled as a native dialog title.
45 | - **Dialog.Description**: A `Text` component styled as a native dialog description.
46 | - **Dialog.Button**: A component styled as a native dialog button.
47 | - **Dialog.Input**: A `TextInput` component styled as a native dialog input.
48 | - **Dialog.CodeInput**: A `TextInput` component styled as one time code input.
49 | - **Dialog.Switch**: A native `Switch` component with an optional label.
50 |
51 | 1. Import react-native-dialog:
52 |
53 | ```javascript
54 | import Dialog from "react-native-dialog";
55 | ```
56 |
57 | 2. Create a dialog and nest its content inside of it:
58 |
59 | ```javascript
60 | return (
61 |
62 |
63 | Account delete
64 |
65 | Do you want to delete this account? You cannot undo this action.
66 |
67 |
68 |
69 |
70 |
71 | );
72 | ```
73 |
74 | 3. Then simply show it by setting the `visible` prop to true:
75 |
76 | ```javascript
77 | return (
78 |
79 |
80 | Account delete
81 |
82 | Do you want to delete this account? You cannot undo this action.
83 |
84 |
85 |
86 |
87 |
88 | );
89 | ```
90 |
91 | The `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.
92 |
93 | ## A complete example
94 |
95 | The following example consists in a component (`DialogTester`) with a button and a dialog.
96 | The dialog is controlled by the `dialogVisible` state variable and it is initially hidden since its value is `false`.
97 | Pressing the button sets `dialogVisible` to true, making the dialog visible.
98 | Inside the dialog there are two buttons that, when pressed, set `dialogVisible` to false, hiding the dialog.
99 |
100 | ```javascript
101 | import React, { useState } from "react";
102 | import { Button, StyleSheet, View } from "react-native";
103 | import Dialog from "react-native-dialog";
104 |
105 | export default function App() {
106 | const [visible, setVisible] = useState(false);
107 |
108 | const showDialog = () => {
109 | setVisible(true);
110 | };
111 |
112 | const handleCancel = () => {
113 | setVisible(false);
114 | };
115 |
116 | const handleDelete = () => {
117 | // The user has pressed the "Delete" button, so here you can do your own logic.
118 | // ...Your logic
119 | setVisible(false);
120 | };
121 |
122 | return (
123 |
124 |
125 |
126 | Account delete
127 |
128 | Do you want to delete this account? You cannot undo this action.
129 |
130 |
131 |
132 |
133 |
134 | );
135 | }
136 |
137 | const styles = StyleSheet.create({
138 | container: {
139 | flex: 1,
140 | backgroundColor: "#fff",
141 | alignItems: "center",
142 | justifyContent: "center",
143 | },
144 | });
145 | ```
146 |
147 | ## Available props
148 |
149 | ### Dialog.Button props
150 |
151 | | Name | Type | Default | Description |
152 | | -------- | ------ | -------------------------------------- | --------------------------------------- |
153 | | label | string | **REQUIRED** | The label text |
154 | | color | string | `#007ff9` on iOS, `#169689` on Android | The label color |
155 | | bold | bool | false | Show the label with a bold font weight? |
156 | | disabled | bool | false | Disable the button? |
157 | | onPress | func | **REQUIRED** | Called when the button is pressed |
158 |
159 | ### Dialog.Description props
160 |
161 | | Name | Type | Default | Description |
162 | | -------- | ------ | ------------ | -------------------- |
163 | | children | string | **REQUIRED** | The description text |
164 |
165 | ### Dialog.Container props
166 |
167 | | Name | Type | Default | Description |
168 | | ---------------------- | ------ | ------------- | --------------------------------------------------------------------------------------------------- |
169 | | blurComponentIOS | node | A low-opacity | The blur component used in iOS |
170 | | visible | bool | **REQUIRED** | Show the dialog? |
171 | | children | node | **REQUIRED** | The dialog content |
172 | | contentStyle | any | undefined | Extra style applied to the dialog content |
173 | | headerStyle | any | undefined | Extra style applied to the dialog header |
174 | | footerStyle | any | undefined | Extra style applied to the dialog footer |
175 | | buttonSeparatorStyle | any | undefined | Extra style applied to the dialog button separator |
176 | | onBackdropPress | func | undefined | Callback invoked when the backdrop is pressed |
177 | | onRequestClose | func | undefined | Callback invoked when the hardware back button on Android or the menu button on Apple TV is pressed |
178 | | keyboardVerticalOffset | number | undefined | keyboardVerticalOffset for iOS |
179 | | verticalButtons | bool | false | Renders button vertically |
180 | | useNativeDriver | bool | false | Defines if animations should use native driver |
181 |
182 | ### Dialog.Input props
183 |
184 | | Name | Type | Default | Description |
185 | | ------------------ | ------ | --------- | ----------------------------------------------------------------------- |
186 | | label | string | undefined | The input floating label |
187 | | wrapperStyle | any | undefined | The style applied to the input wrapper View |
188 | | textInputRef | ref | undefined | Ref to the input |
189 | | unstableLabelStyle | any | undefined | Likely to be removed in a future version. See issue #141 for discussion |
190 |
191 | `Dialog.Input` also accepts all the React-Native's `TextInput` component props.
192 |
193 | ### Dialog.CodeInput props
194 |
195 | | Name | Type | Default | Description |
196 | | -------------------------- | ------ | --------- | ----------------------------------------------------------- |
197 | | wrapperStyle | any | undefined | The style applied to the input wrapper View |
198 | | digitContainerStyle | any | undefined | The style applied to the digit container View |
199 | | digitContainerFocusedStyle | any | undefined | The style applied to the digit container View when in focus |
200 | | digitStyle | any | undefined | The style applied to the digit text |
201 | | codeLength | number | 4 | The total number of digits |
202 | | onCodeChange | func | undefined | Called when the input changed |
203 |
204 | `Dialog.CodeInput` also accepts all the React-Native's `TextInput` component props.
205 |
206 | ### Dialog.Title props
207 |
208 | | Name | Type | Default | Description |
209 | | -------- | ------ | ------------ | -------------- |
210 | | children | string | **REQUIRED** | The title text |
211 |
212 | `Dialog.Title` also accepts all the React-Native's `Text` component props.
213 |
214 | ### Dialog.Switch props
215 |
216 | | Name | Type | Default | Description |
217 | | ------------------ | ------ | --------- | ----------------------------------------------------------------------- |
218 | | label | string | undefined | The switch description text |
219 | | unstableLabelStyle | any | undefined | Likely to be removed in a future version. See issue #141 for discussion |
220 |
221 | `Dialog.Switch` also accepts all the React-Native's `Switch` component props.
222 |
223 | ## Frequently Asked Questions
224 |
225 | ### How can I use a custom blur component as the dialog background on iOS?
226 |
227 | To 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.
228 | The `blurComponentIOS` can be useful for example if you want to apply a native blur effect to the dialog.
229 | Here is an example using `react-native-blur`:
230 |
231 | ```javascript
232 | const blurComponentIOS = (
233 |
234 | );
235 | return (
236 |
237 |
238 | Account delete
239 |
240 | Do you want to delete this account? You cannot undo this action.
241 |
242 |
243 |
244 |
245 |
246 | );
247 | ```
248 |
249 | ### How can I add a 'tap outside dialog' callback?
250 |
251 | `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.
252 | The modal has an `onBackdropPress` property that can be used to register clicks on the backdrop.
253 |
254 | Below is an example of how you can close the dialog by tapping outside.
255 |
256 | ```javascript
257 | const [visible, setVisible] = useState(true);
258 |
259 | const handleCancel = () => {
260 | setVisible(false);
261 | };
262 |
263 | return (
264 |
265 | Title
266 |
267 |
268 | );
269 | ```
270 |
271 | ## Acknowledgments
272 |
273 | Thanks to the user [@honaf](https://github.com/honaf) who has kindly offered the `react-native-dialog` namespace.
274 | Also 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.
275 |
--------------------------------------------------------------------------------
/example/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/example/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 |
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 |
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 |
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 |
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 |
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 |
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 |
55 | # Bundle artifacts
56 | *.jsbundle
57 |
58 | # CocoaPods
59 | /ios/Pods/
60 |
61 | # Expo
62 | .expo/*
63 | web-build/
64 |
--------------------------------------------------------------------------------
/example/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Button, StyleSheet, View } from "react-native";
3 | import Dialog from "react-native-dialog";
4 |
5 | export default function App() {
6 | const [visible, setVisible] = useState(false);
7 |
8 | const showDialog = () => {
9 | setVisible(true);
10 | };
11 |
12 | const handleCancel = () => {
13 | setVisible(false);
14 | };
15 |
16 | const handleDelete = () => {
17 | // The user has pressed the "Delete" button, so here you can do your own logic.
18 | // ...Your logic
19 | setVisible(false);
20 | };
21 |
22 | return (
23 |
24 |
25 |
26 | Account delete
27 |
28 | Do you want to delete this account? You cannot undo this action.
29 |
30 |
31 |
32 |
33 |
34 | );
35 | }
36 |
37 | const styles = StyleSheet.create({
38 | container: {
39 | flex: 1,
40 | backgroundColor: "#fff",
41 | alignItems: "center",
42 | justifyContent: "center",
43 | },
44 | });
45 |
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | # Example
2 |
3 | An example project that can be used to develop `react-native-dialog`.
4 | To sync the changes made in `src`, you need to run `npm run sync` from this project (each time you make a change).
5 |
--------------------------------------------------------------------------------
/example/android/app/BUCK:
--------------------------------------------------------------------------------
1 | # To learn about Buck see [Docs](https://buckbuild.com/).
2 | # To run your application with Buck:
3 | # - install Buck
4 | # - `npm start` - to start the packager
5 | # - `cd android`
6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8 | # - `buck install -r android/app` - compile, install and run application
9 | #
10 |
11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
12 |
13 | lib_deps = []
14 |
15 | create_aar_targets(glob(["libs/*.aar"]))
16 |
17 | create_jar_targets(glob(["libs/*.jar"]))
18 |
19 | android_library(
20 | name = "all-libs",
21 | exported_deps = lib_deps,
22 | )
23 |
24 | android_library(
25 | name = "app-code",
26 | srcs = glob([
27 | "src/main/java/**/*.java",
28 | ]),
29 | deps = [
30 | ":all-libs",
31 | ":build_config",
32 | ":res",
33 | ],
34 | )
35 |
36 | android_build_config(
37 | name = "build_config",
38 | package = "com.example",
39 | )
40 |
41 | android_resource(
42 | name = "res",
43 | package = "com.example",
44 | res = "src/main/res",
45 | )
46 |
47 | android_binary(
48 | name = "app",
49 | keystore = "//android/keystores:debug",
50 | manifest = "src/main/AndroidManifest.xml",
51 | package_type = "debug",
52 | deps = [
53 | ":app-code",
54 | ],
55 | )
56 |
--------------------------------------------------------------------------------
/example/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 |
3 | import com.android.build.OutputFile
4 |
5 | /**
6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
7 | * and bundleReleaseJsAndAssets).
8 | * These basically call `react-native bundle` with the correct arguments during the Android build
9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
10 | * bundle directly from the development server. Below you can see all the possible configurations
11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the
12 | * `apply from: "../../node_modules/react-native/react.gradle"` line.
13 | *
14 | * project.ext.react = [
15 | * // the name of the generated asset file containing your JS bundle
16 | * bundleAssetName: "index.android.bundle",
17 | *
18 | * // the entry file for bundle generation. If none specified and
19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is
20 | * // default. Can be overridden with ENTRY_FILE environment variable.
21 | * entryFile: "index.android.js",
22 | *
23 | * // https://reactnative.dev/docs/performance#enable-the-ram-format
24 | * bundleCommand: "ram-bundle",
25 | *
26 | * // whether to bundle JS and assets in debug mode
27 | * bundleInDebug: false,
28 | *
29 | * // whether to bundle JS and assets in release mode
30 | * bundleInRelease: true,
31 | *
32 | * // whether to bundle JS and assets in another build variant (if configured).
33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
34 | * // The configuration property can be in the following formats
35 | * // 'bundleIn${productFlavor}${buildType}'
36 | * // 'bundleIn${buildType}'
37 | * // bundleInFreeDebug: true,
38 | * // bundleInPaidRelease: true,
39 | * // bundleInBeta: true,
40 | *
41 | * // whether to disable dev mode in custom build variants (by default only disabled in release)
42 | * // for example: to disable dev mode in the staging build type (if configured)
43 | * devDisabledInStaging: true,
44 | * // The configuration property can be in the following formats
45 | * // 'devDisabledIn${productFlavor}${buildType}'
46 | * // 'devDisabledIn${buildType}'
47 | *
48 | * // the root of your project, i.e. where "package.json" lives
49 | * root: "../../",
50 | *
51 | * // where to put the JS bundle asset in debug mode
52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
53 | *
54 | * // where to put the JS bundle asset in release mode
55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release",
56 | *
57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
58 | * // require('./image.png')), in debug mode
59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
60 | *
61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
62 | * // require('./image.png')), in release mode
63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
64 | *
65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means
66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle
68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
69 | * // for example, you might want to remove it from here.
70 | * inputExcludes: ["android/**", "ios/**"],
71 | *
72 | * // override which node gets called and with what additional arguments
73 | * nodeExecutableAndArgs: ["node"],
74 | *
75 | * // supply additional arguments to the packager
76 | * extraPackagerArgs: []
77 | * ]
78 | */
79 |
80 | project.ext.react = [
81 | enableHermes: false
82 | ]
83 |
84 | apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
85 | apply from: "../../node_modules/react-native/react.gradle"
86 | apply from: "../../node_modules/expo-updates/scripts/create-manifest-android.gradle"
87 |
88 | /**
89 | * Set this to true to create two separate APKs instead of one:
90 | * - An APK that only works on ARM devices
91 | * - An APK that only works on x86 devices
92 | * The advantage is the size of the APK is reduced by about 4MB.
93 | * Upload all the APKs to the Play Store and people will download
94 | * the correct one based on the CPU architecture of their device.
95 | */
96 | def enableSeparateBuildPerCPUArchitecture = false
97 |
98 | /**
99 | * Run Proguard to shrink the Java bytecode in release builds.
100 | */
101 | def enableProguardInReleaseBuilds = false
102 |
103 | /**
104 | * The preferred build flavor of JavaScriptCore.
105 | *
106 | * For example, to use the international variant, you can use:
107 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
108 | *
109 | * The international variant includes ICU i18n library and necessary data
110 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
111 | * give correct results when using with locales other than en-US. Note that
112 | * this variant is about 6MiB larger per architecture than default.
113 | */
114 | def jscFlavor = 'org.webkit:android-jsc:+'
115 |
116 | /**
117 | * Whether to enable the Hermes VM.
118 | *
119 | * This should be set on project.ext.react and mirrored here. If it is not set
120 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
121 | * and the benefits of using Hermes will therefore be sharply reduced.
122 | */
123 | def enableHermes = project.ext.react.get("enableHermes", false);
124 |
125 | android {
126 | compileSdkVersion rootProject.ext.compileSdkVersion
127 |
128 | compileOptions {
129 | sourceCompatibility JavaVersion.VERSION_1_8
130 | targetCompatibility JavaVersion.VERSION_1_8
131 | }
132 |
133 | defaultConfig {
134 | applicationId "com.example"
135 | minSdkVersion rootProject.ext.minSdkVersion
136 | targetSdkVersion rootProject.ext.targetSdkVersion
137 | versionCode 1
138 | versionName "1.0"
139 | }
140 | splits {
141 | abi {
142 | reset()
143 | enable enableSeparateBuildPerCPUArchitecture
144 | universalApk false // If true, also generate a universal APK
145 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
146 | }
147 | }
148 | signingConfigs {
149 | debug {
150 | storeFile file('debug.keystore')
151 | storePassword 'android'
152 | keyAlias 'androiddebugkey'
153 | keyPassword 'android'
154 | }
155 | }
156 | buildTypes {
157 | debug {
158 | signingConfig signingConfigs.debug
159 | }
160 | release {
161 | // Caution! In production, you need to generate your own keystore file.
162 | // see https://reactnative.dev/docs/signed-apk-android.
163 | signingConfig signingConfigs.debug
164 | minifyEnabled enableProguardInReleaseBuilds
165 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
166 | }
167 | }
168 |
169 | // applicationVariants are e.g. debug, release
170 | applicationVariants.all { variant ->
171 | variant.outputs.each { output ->
172 | // For each separate APK per architecture, set a unique version code as described here:
173 | // https://developer.android.com/studio/build/configure-apk-splits.html
174 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
175 | def abi = output.getFilter(OutputFile.ABI)
176 | if (abi != null) { // null for the universal-debug, universal-release variants
177 | output.versionCodeOverride =
178 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
179 | }
180 |
181 | }
182 | }
183 | }
184 |
185 | dependencies {
186 | implementation fileTree(dir: "libs", include: ["*.jar"])
187 | //noinspection GradleDynamicVersion
188 | implementation "com.facebook.react:react-native:+" // From node_modules
189 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
190 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
191 | exclude group:'com.facebook.fbjni'
192 | }
193 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
194 | exclude group:'com.facebook.flipper'
195 | exclude group:'com.squareup.okhttp3', module:'okhttp'
196 | }
197 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
198 | exclude group:'com.facebook.flipper'
199 | }
200 | addUnimodulesDependencies()
201 |
202 | if (enableHermes) {
203 | def hermesPath = "../../node_modules/hermes-engine/android/";
204 | debugImplementation files(hermesPath + "hermes-debug.aar")
205 | releaseImplementation files(hermesPath + "hermes-release.aar")
206 | } else {
207 | implementation jscFlavor
208 | }
209 | }
210 |
211 | // Run this once to be able to run the application with BUCK
212 | // puts all compile dependencies into folder libs for BUCK to use
213 | task copyDownloadableDepsToLibs(type: Copy) {
214 | from configurations.compile
215 | into 'libs'
216 | }
217 |
218 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
219 |
--------------------------------------------------------------------------------
/example/android/app/build_defs.bzl:
--------------------------------------------------------------------------------
1 | """Helper definitions to glob .aar and .jar targets"""
2 |
3 | def create_aar_targets(aarfiles):
4 | for aarfile in aarfiles:
5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
6 | lib_deps.append(":" + name)
7 | android_prebuilt_aar(
8 | name = name,
9 | aar = aarfile,
10 | )
11 |
12 | def create_jar_targets(jarfiles):
13 | for jarfile in jarfiles:
14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
15 | lib_deps.append(":" + name)
16 | prebuilt_jar(
17 | name = name,
18 | binary_jar = jarfile,
19 | )
20 |
--------------------------------------------------------------------------------
/example/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
--------------------------------------------------------------------------------
/example/android/app/src/debug/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/example/android/app/src/debug/java/com/example/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | *