├── .babelrc ├── .eslintrc ├── .gitignore ├── LICENSE.md ├── README.md ├── dialog-component-explorer ├── .babelrc ├── .gitignore ├── .watchmanconfig ├── App.js ├── app.json ├── assets │ └── icons │ │ ├── app-icon.png │ │ └── loading-icon.png ├── package.json └── src │ ├── DialogExplorer.js │ ├── Navigator.js │ ├── SettingsDialog.js │ ├── components │ ├── Button.js │ ├── Section.js │ ├── SettingsDialogAnimation.js │ ├── SettingsDialogContent.js │ ├── SettingsDialogSize.js │ └── SettingsDialogTitle.js │ └── containers │ ├── AutoDialogSize.js │ └── FixedDialogSize.js ├── dist ├── DialogComponent.js ├── DialogManager.js ├── components │ ├── DialogButton.js │ ├── DialogContent.js │ └── DialogTitle.js └── index.js ├── package.json ├── src ├── DialogComponent.js ├── DialogManager.js ├── components │ ├── DialogButton.js │ ├── DialogContent.js │ └── DialogTitle.js └── index.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2016", 4 | "react-native" 5 | ], 6 | "env": { 7 | "plugins": [ 8 | "flow-react-proptypes" 9 | ] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "installedESLint": true, 4 | "parser": "babel-eslint", 5 | "ecmaFeatures": { 6 | "jsx": true 7 | }, 8 | "env": { 9 | "es6": true 10 | }, 11 | "plugins": [ 12 | "react", 13 | "jsx-a11y" 14 | ], 15 | "rules": { 16 | "import/no-extraneous-dependencies": 0, 17 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dialogComponentExample/node_modules 3 | .DS_Store 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Jack Lam 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 Component 2 | React Native Dialog Component for iOS & Android. 3 | 4 | Pull request are welcomed. Please follow [Airbnb JS Style Guide](https://github.com/airbnb/javascript) 5 | 6 | #### Preview 7 | 8 |
9 |
10 | 11 | 12 | 13 | 14 | 15 | ## Try With Exponent 16 | [Exponent](https://exp.host/@jacklam718/dialog-component-explorer) 17 | 18 | ## Installation 19 | 20 | ``` 21 | npm install --save react-native-dialog-component 22 | # OR 23 | yarn add react-native-dialog-component 24 | ``` 25 | 26 | ## Exposed Modules 27 | 28 | * DialogManager 29 | * DialogComponent 30 | * Dialog 31 | * DialogContent 32 | * DialogButton 33 | * DialogTitle 34 | * Overlay 35 | * Animation 36 | * FadeAnimation 37 | * ScaleAnimation 38 | * SlideAnimation 39 | 40 | 41 | ## Examples 42 | [Example](https://github.com/jacklam718/react-native-dialog-component/blob/master/dialogComponentExample/DialogComponentExample.js) 43 | 44 | 45 | ## Usage With `DialogManager` 46 | ```javascript 47 | import DialogManager, { ScaleAnimation, DialogContent } from 'react-native-dialog-component'; 48 | ``` 49 | 50 | #### show 51 | ```javascript 52 | DialogManager.show({ 53 | title: 'Dialog', 54 | titleAlign: 'center', 55 | animationDuration: 200, 56 | ScaleAnimation: new ScaleAnimation(), 57 | children: ( 58 | 59 | 60 | 61 | React Native Dialog Component 62 | 63 | 64 | 65 | ), 66 | }, () => { 67 | console.log('callback - show'); 68 | }); 69 | ``` 70 | 71 | #### update 72 | ```javascript 73 | DialogManager.update({ 74 | title: 'Dialog Updated', 75 | titleAlign: 'center', 76 | animationDuration: 200, 77 | ScaleAnimation: new ScaleAnimation(), 78 | children: ( 79 | 80 | 81 | 82 | New Content 83 | 84 | 85 | 86 | ), 87 | }, () => { 88 | console.log('callback - update dialog'); 89 | }); 90 | ``` 91 | 92 | #### dismiss 93 | ```javascript 94 | // dismiss dialog 95 | DialogManager.dismiss(() => { 96 | console.log('callback - dismiss'); 97 | }); 98 | ``` 99 | 100 | #### dismiss all 101 | ```javascript 102 | DialogManager.dismissAll(() => { 103 | console.log('callback - dismiss all'); 104 | }); 105 | ``` 106 | 107 | ## Usage with `DialogComponent` 108 | ```javascript 109 | import { DialogComponent }from 'react-native-dialog-component'; 110 | 111 | 112 |