├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── jsconfig.json ├── lib ├── DisplayPopup.js ├── PopContent.js ├── index.js ├── make-stylesheet.js ├── style-shape.js └── styles.js ├── package.json └── ui.gif /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | node_modules 3 | .settings 4 | .project 5 | .DS_Store 6 | .idea 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo 2 | doc 3 | example 4 | .gitignore 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### HEAD 2 | 3 | ### 0.6.10 (October 19, 2018) 4 | 5 | * Removed upper peer dependecy restriction on React Native (Supports 0.30 - 0.57) 6 | * Updated `prop-types` to 15.6.2 7 | * Updated `readme` 8 | 9 | ### 0.6.9 (February 19, 2018) 10 | 11 | * Removed greenkeeper post-publish as it is no longer supported. 12 | * Updated React Native peer range to support 53. 13 | * React Native warnings on `PropTypes` resolved. 14 | 15 | ### 0.6.8 (September 29, 2017) 16 | 17 | * Fixed issue with merging custom styles (thank you Royce Dy) 18 | * Updated PropTypes to version 15.6.0 19 | 20 | ### 0.6.7 (September 4, 2017) 21 | 22 | * Updated React Native peer range to support 47. 23 | * Moved PropTypes to external `prop-types` package 24 | 25 | ### 0.6.6 (April 14, 2017) 26 | 27 | * Updated React peer range (>=15.2.1 < 16.1.0) 28 | 29 | ### 0.6.5 (April 13, 2017) 30 | 31 | * Support for completely overriding internal styles using the style property 32 | * Support for overriding button text styles 33 | * Support for changing button rendering direction via `buttonFlow` property 34 | * Methods now return a `Promise` to use instead of callbacks 35 | * Updated React peer range (>=15.2.1 <15.6.0) 36 | * Updated React Native peer range (>=0.30 <0.44) 37 | 38 | ### 0.6.4 (February 9, 2017) 39 | 40 | * Updated React peer to 15.4.2 41 | * Updated React Native peer to 0.41.2 42 | 43 | ### 0.6.3 (November 26, 2016) 44 | 45 | * Fix for incorrect flex properties (may alter rendering in your app) 46 | * Fix for flex-grow components incorrectly using flex 47 | * Updated React peer to 15.3.1 48 | * Updated React Native peer to 0.33.0 49 | 50 | ### 0.6.2 (August 27, 2016) 51 | 52 | * Emergency fix for proptype js exception 53 | 54 | ### 0.6.1 (August 27, 2016) 55 | 56 | * Updates to readme 57 | * Updated React 15.2.1 to version 15.3.1 58 | * Updated React Native 0.31.0 to version 0.32.0 59 | * Updated PropTypes declaration to correct array 60 | 61 | ### 0.6.0 (August 19, 2016) 62 | 63 | * Forked from react-native-popup 64 | * Support added for React Native 0.30+ 65 | * Initial NPM release 66 | * Added License.md 67 | * Added Changelog.md 68 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ## ISC License (ISC) 2 | **REACT-NATIVE-DIALOGBOX** 3 | Copyright (c) 2016, 2017 [Victoria French](https://github.com/victoriafrench) and Contributors: 4 | 5 | * [Greg Berns](https://github.com/gregberns) 6 | * [Layton Whiteley](https://github.com/lwhiteley) 7 | * [Royce Dy](https://github.com/rad128) 8 | * [Laurent Cozic](https://github.com/laurent22) 9 | 10 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 11 | 12 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 13 | 14 | #### Fork of [react-native-popup](https://github.com/beefe/react-native-popup) (commit [cc12bc5](https://github.com/beefe/react-native-popup/tree/cc12bc595e2dd69801dbc1575cfb807e1371f6fa)) 15 | 16 | ## ICS License (ISC) 17 | **REACT-NATIVE-POPUP** 18 | Copyright (c) 2015, 2016 [skyRen](https://github.com/skyRen) 19 | 20 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 21 | 22 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://img.shields.io/npm/v/react-native-dialogbox.svg?style=flat-square)](https://www.npmjs.com/package/react-native-dialogbox) 2 | [![npm downloads](https://img.shields.io/npm/dm/react-native-dialogbox.svg?style=flat-square)](https://www.npmjs.com/package/react-native-dialogbox) 3 | [![Dependencies](https://david-dm.org/victoriafrench/react-native-dialogbox.svg)](https://david-dm.org/victoriafrench/react-native-dialogbox) 4 | [![React-Native](https://img.shields.io/badge/react--native-v0.30%20--%20v0.57-green.svg)]() 5 | [![platforms](https://img.shields.io/badge/platforms-ios%20%7C%20android-blue.svg)]() 6 | # react-native-dialogbox 7 | 8 | [![Greenkeeper badge](https://badges.greenkeeper.io/victoriafrench/react-native-dialogbox.svg)](https://greenkeeper.io/) 9 | 10 | This is a custom component for React Native, a simple popup, compatible with ios and android. 11 | 12 | >This is a forked distro of react-native-popup that adds support for the current versions of react-native, and adds additional features (style overrides, promise support). The originating distro can be found [here](https://github.com/beefe/react-native-popup) 13 | 14 | ### Demo 15 | ![ui](./ui.gif) 16 | 17 | [![NPM](https://nodei.co/npm/react-native-dialogbox.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-dialogbox/) 18 | 19 | ### Props 20 | - isOverlay *bool* - *`default true`* 21 | - isOverlayClickClose *bool* - *`default true`* 22 | - onDismiss *function()* - *`optional callback called when overlay dismisses dialogbox`* 23 | - style *object* - *`optional override for system styles`* 24 | 25 | ### Methods 26 | - alert(`message`: *string*|*number*, [...]) : *Promise* 27 | ```javascript 28 | e.g. 29 | 30 | dialogbox.alert(1); 31 | 32 | dialogbox.alert(1, 'two', '10 messages at most'); 33 | 34 | dialogbox.alert('promise example').then(() => dialogbox.alert('dismissed')); 35 | 36 | ``` 37 | - tip({ `title`: *string*, `content`: *string*|*number*|*array*<*string*|*number*> *`isRequired`*, `btn`: {`title`: *string* *`default 'OK'`*, `style`: *object*, `callback`: *function*}, }) : *Promise* 38 | ```javascript 39 | e.g. 40 | 41 | dialogbox.tip({ 42 | content: 'come on!', 43 | }); 44 | 45 | dialogbox.tip({ 46 | title: 'TipTip', 47 | content: 'come on!', 48 | }); 49 | 50 | dialogbox.tip({ 51 | content: ['come on!', 'go!'], 52 | btn: { 53 | text: 'OKOK', 54 | callback: () => { 55 | dialogbox.alert('over!'); 56 | }, 57 | }, 58 | }); 59 | 60 | dialogbox.tip({ 61 | content: 'promise example', 62 | btn: { 63 | text: 'done' 64 | } 65 | }).then(() => (dialogbox.alert('done'))); 66 | 67 | dialogbox.tip({ 68 | content: 'style example', 69 | style: { 70 | color: 'red'; 71 | } 72 | }); 73 | 74 | ``` 75 | - confirm({ `title`: *string*, `content`: *string*|*number*|*array*<*string*|*number*> *`isRequired`*, `buttonFlow`: *'auto' | 'row' | 'column'* *`default 'auto'`*, `ok`: {`title`: *string* *`default 'OK'`*, `style`: *object*, `callback`: *function*}, `cancel`: {`title`: *string* *`default 'Cancel'`*, `style`: *object*, `callback`: *function*}, }) : *Promise* 76 | ```javascript 77 | e.g. 78 | 79 | dialogbox.confirm({ 80 | content: 'Are you ready?', 81 | }); 82 | 83 | dialogbox.confirm({ 84 | content: 'Are you ready?', 85 | ok: { 86 | callback: () => { 87 | dialogbox.alert('Very good!'); 88 | }, 89 | }, 90 | }); 91 | 92 | dialogbox.confirm({ 93 | title: 'title', 94 | content: ['come on!', 'go!'], 95 | ok: { 96 | text: 'Y', 97 | style: { 98 | color: 'red' 99 | }, 100 | callback: () => { 101 | dialogbox.alert('Good!'); 102 | }, 103 | }, 104 | cancel: { 105 | text: 'N', 106 | style: { 107 | color: 'blue' 108 | }, 109 | callback: () => { 110 | dialogbox.alert('Hurry up！'); 111 | }, 112 | }, 113 | }); 114 | 115 | dialogbox.confirm({ 116 | title: 'title', 117 | content: ['come on!', 'go!'], 118 | ok: { 119 | text: 'Y', 120 | style: { 121 | color: 'red' 122 | } 123 | }, 124 | cancel: { 125 | text: 'N', 126 | style: { 127 | color: 'blue' 128 | } 129 | }, 130 | }).then((event) => { 131 | if (event.button) { 132 | dialogbox.alert(`You selected ${event.button.text}`); 133 | } else { 134 | dialogbox.alert('Dialog cancelled'); 135 | } 136 | }); 137 | ``` 138 | 139 | - pop({ `title`: *string*, `content`: *string*|*number*|*array*<*string*|*number*> *`isRequired`*, `buttonFlow`: *'auto' | 'row' | 'column'* *`default 'auto'`*, `btns`: [{`title`: *string* *`default 'OK'`*, `style`: *object*, `callback`: *function*}] }) : *Promise* 140 | ```javascript 141 | e.g. 142 | 143 | dialogbox.pop({ 144 | title: 'Animals', 145 | content: 'Which animal do you like?', 146 | btns: [ 147 | { 148 | text: 'Frog', 149 | callback: () => { 150 | dialogbox.alert('Ribbit!'); 151 | }, 152 | }, 153 | { 154 | text: 'Dog', 155 | callback: () => { 156 | dialogbox.alert('Woof!'); 157 | }, 158 | }, 159 | { 160 | text: 'Cat', 161 | callback: () => { 162 | dialogbox.alert('Meow!'); 163 | }, 164 | } 165 | ] 166 | }); 167 | 168 | dialogbox.pop({ 169 | title: 'Animals', 170 | content: 'Which animal do you like?', 171 | btns: [ 172 | { 173 | text: 'Frog' 174 | }, 175 | { 176 | text: 'Dog' 177 | }, 178 | { 179 | text: 'Cat' 180 | } 181 | ] 182 | }).then(event => { 183 | if (event.button) { 184 | dialogbox.alert([ 185 | `You selected ${event.button.text}`, 186 | `It was button index ${event.index}` 187 | ]); 188 | } else { 189 | dialogbox.alert([ 190 | 'Dialog was dismissed without selection', 191 | 'Index for this event is always -1' 192 | ]); 193 | } 194 | }); 195 | 196 | dialogbox.pop({ 197 | title: 'Animals with Stacked Buttons', 198 | content: 'Which animal do you like?', 199 | buttonFlow: 'column', 200 | btns: [ 201 | { 202 | text: 'Frog' 203 | }, 204 | { 205 | text: 'Dog' 206 | }, 207 | { 208 | text: 'Cat' 209 | } 210 | ] 211 | }).then(event => { 212 | if (event.button) { 213 | dialogbox.alert([ 214 | `You selected ${event.button.text}`, 215 | `It was button index ${event.index}` 216 | ]); 217 | } else { 218 | dialogbox.alert([ 219 | 'Dialog was dismissed without selection', 220 | 'Index for this event is always -1' 221 | ]); 222 | } 223 | }); 224 | ``` 225 | 226 | ### Usage 227 | #### Step 1 - install 228 | 229 | ``` 230 | npm install react-native-dialogbox --save 231 | ``` 232 | 233 | #### Step 2 - import and use in project 234 | 235 | ```javascript 236 | import React, { Component } from 'react'; 237 | import { View, Text, StyleSheet } from 'react-native'; 238 | import DialogBox from 'react-native-dialogbox'; 239 | 240 | export default class App extends Component { 241 | constructor(props) { 242 | super(props); 243 | this.dialogbox = React.createRef(); 244 | this.handleOnPress = this.handleOnPress.bind(this); 245 | } 246 | 247 | handleOnPress() { 248 | // alert 249 | this.dialogbox.current.alert(1); 250 | }, 251 | 252 | render() { 253 | return ( 254 | 255 | 256 | click me ! 257 | 258 | {/** dialogbox component */} 259 | 260 | 261 | 262 | ); 263 | }, 264 | 265 | }; 266 | ``` 267 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true 5 | }, 6 | "exclude": [ 7 | "node_modules" 8 | ] 9 | } -------------------------------------------------------------------------------- /lib/DisplayPopup.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, Text, Dimensions, TouchableWithoutFeedback, PixelRatio, Platform } from 'react-native'; 4 | import PopContent from './PopContent'; 5 | import styleShape from './style-shape'; 6 | import makeStyleProxy from './make-stylesheet'; 7 | 8 | export default class DisplayPopup extends Component { 9 | 10 | static propTypes = { 11 | isOverlay: PropTypes.bool, 12 | isOverlayClickClose: PropTypes.bool, 13 | onDismiss: PropTypes.func, 14 | style: PropTypes.shape(styleShape), 15 | content: PropTypes.oneOfType([ 16 | PropTypes.string, 17 | PropTypes.number, 18 | PropTypes.arrayOf(PropTypes.oneOfType([ 19 | PropTypes.string, 20 | PropTypes.number 21 | ])), 22 | ]), 23 | title: PropTypes.string, 24 | btns: PropTypes.arrayOf(PropTypes.shape({ 25 | text: PropTypes.string.isRequired, 26 | style: PropTypes.object, 27 | callback: PropTypes.func, 28 | })), 29 | buttonFlow: PropTypes.oneOf(['auto', 'column', 'row']), 30 | } 31 | 32 | static defaultProps = { 33 | isOverlay: true, 34 | isOverlayClickClose: true, 35 | buttonFlow: 'auto', 36 | btns: [{ 37 | text: 'ok', 38 | callback: () => {}, 39 | }], 40 | style: {} 41 | }; 42 | 43 | constructor(props, context) { 44 | super(props, context); 45 | 46 | this.state = { 47 | isVisible: true, 48 | }; 49 | 50 | } 51 | 52 | close = () => { 53 | this.setState({ 54 | isVisible: false, 55 | }); 56 | } 57 | 58 | _onOverlayPress = () => { 59 | const { isOverlayClickClose, onDismiss } = this.props; 60 | if (isOverlayClickClose) { 61 | this.close(); 62 | if (onDismiss && typeof onDismiss === 'function') { 63 | onDismiss(); 64 | } 65 | } 66 | } 67 | 68 | _renderOverlay = (styles) => { 69 | const { isOverlay } = this.props; 70 | if(isOverlay) { 71 | return ( 72 | 73 | 74 | 75 | ); 76 | } 77 | } 78 | 79 | render() { 80 | let { isVisible } = this.state; 81 | const { title, content, btns, style, buttonFlow } = this.props; 82 | const styles = makeStyleProxy(style, Dimensions, Platform, PixelRatio)(); 83 | const buttons = btns.map((item) => { 84 | return { 85 | text: item.text, 86 | style: item.style || {}, 87 | callback: () => { 88 | typeof item.callback === 'function' && item.callback(); 89 | this.close(); 90 | }, 91 | }; 92 | }); 93 | if(isVisible) { 94 | return ( 95 | 96 | {this._renderOverlay(style)} 97 | 98 | 99 | 100 | 101 | ); 102 | } 103 | return ; 104 | } 105 | 106 | }; 107 | -------------------------------------------------------------------------------- /lib/PopContent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, Text, TouchableOpacity, Dimensions, Platform, PixelRatio } from 'react-native'; 4 | import styleShape from './style-shape'; 5 | import makeStyleProxy from './make-stylesheet'; 6 | 7 | export default class PopContent extends Component { 8 | 9 | static propTypes = { 10 | title: PropTypes.string, 11 | content: PropTypes.oneOfType([ 12 | PropTypes.string, 13 | PropTypes.number, 14 | PropTypes.arrayOf(PropTypes.oneOfType([ 15 | PropTypes.string, 16 | PropTypes.number 17 | ])), 18 | ]), 19 | btns: PropTypes.arrayOf(PropTypes.shape({ 20 | text: PropTypes.string.isRequired, 21 | style: PropTypes.object, 22 | callback: PropTypes.func, 23 | })), 24 | style: PropTypes.shape(styleShape), 25 | buttonFlow: PropTypes.oneOf(['auto', 'column', 'row']), 26 | }; 27 | 28 | static defaultProps = { 29 | buttonFlow: 'auto', 30 | style: {}, 31 | content: '', 32 | } 33 | 34 | render() { 35 | const {title, content, btns, style} = this.props; 36 | const styleSheet = makeStyleProxy(style, Dimensions, Platform, PixelRatio)(); 37 | const buttonFlowAuto = this.props.buttonFlow.toLowerCase() === 'auto'; 38 | const buttonFlowColumn = buttonFlowAuto ? btns.length !== 1 ? true : false : this.props.buttonFlow.toLowerCase() === 'column'; 39 | const btnNumber = btns.length; 40 | const btnContent = []; 41 | Array.prototype.forEach.call(btns, (btn, index) => { 42 | btnContent.push( 43 | 44 | {btn.text} 45 | 46 | ); 47 | index !== btnNumber - 1 && btnContent.push(); 48 | }); 49 | 50 | return ( 51 | 52 | { title && {title} } 53 | 54 | {(() => { 55 | let tipContent = []; 56 | if (content instanceof Array) { 57 | content.forEach((item, index, arr) => { 58 | if (index > 9) { 59 | return; 60 | } 61 | item && ( tipContent[index] = ({item}) ); 62 | }); 63 | } else { 64 | content && ( tipContent[0] = ({content}) ); 65 | } 66 | return tipContent; 67 | })()} 68 | 69 | 70 | 71 | {btnContent} 72 | 73 | 74 | ); 75 | } 76 | 77 | }; 78 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, Text, TouchableWithoutFeedback, Dimensions, Platform, PixelRatio } from 'react-native'; 4 | import PopContent from './PopContent'; 5 | import DisplayPopup from './DisplayPopup'; 6 | import styleShape from './style-shape'; 7 | import makeStyleProxy from './make-stylesheet'; 8 | 9 | export default class DialogBox extends Component { 10 | 11 | static DisplayPopup = DisplayPopup; 12 | 13 | static propTypes = { 14 | isOverlay: PropTypes.bool, 15 | isOverlayClickClose: PropTypes.bool, 16 | onDismiss: PropTypes.func, 17 | style: PropTypes.shape(styleShape), 18 | } 19 | 20 | static defaultProps = { 21 | isOverlay: true, 22 | isOverlayClickClose: true, 23 | }; 24 | 25 | constructor(props, context) { 26 | super(props, context); 27 | 28 | this.state = { 29 | isVisible: false, 30 | content: null, 31 | }; 32 | } 33 | 34 | _onOverlayDismiss = () => { 35 | const { isOverlayClickClose, onDismiss } = this.props; 36 | if (isOverlayClickClose) { 37 | this.close(); 38 | if (onDismiss && typeof onDismiss === 'function') { 39 | onDismiss(); 40 | } 41 | } 42 | } 43 | 44 | _pop = (args) => { 45 | if (this._resolve) { 46 | this._resolve({ index: -1, button: undefined }); 47 | } 48 | const transformed = Object.assign({}, args, { 49 | btns: Array.prototype.map.call(args.btns, (item, index) => (Object.assign({}, item, { 50 | callback: () => { 51 | const resolve = this._resolve; 52 | this._resolve = null; 53 | const { callback, ...button} = item; 54 | if (callback) { 55 | callback(); 56 | } 57 | resolve({ index, button }); 58 | } 59 | }))) 60 | }); 61 | return new Promise((resolve, reject) => { 62 | this._resolve = resolve; 63 | this.setState({ 64 | content: ( ), 65 | isVisible: true, 66 | }); 67 | }); 68 | } 69 | 70 | alert = (...text) => { 71 | text = text.map(text => text); 72 | return this._pop({ 73 | content: text || '', 74 | buttonFlow: 'column', 75 | btns: [{ 76 | text: 'OK', 77 | callback: () => { 78 | this.close(); 79 | }, 80 | }], 81 | }); 82 | } 83 | 84 | tip = (args) => { 85 | const { title, content, btn } = args; 86 | return this._pop({ 87 | title: title || 'Tip', 88 | buttonFlow: 'row', 89 | content: content, 90 | btns: [{ 91 | text: btn && btn.text || 'OK', 92 | style: btn && btn.style, 93 | callback: () => { 94 | this.close(); 95 | btn && typeof btn.callback === 'function' && btn.callback(); 96 | }, 97 | }], 98 | }); 99 | } 100 | 101 | confirm = (args) => { 102 | const {title, content, ok, cancel } = args; 103 | return this._pop({ 104 | title, 105 | buttonFlow: 'row', 106 | content, 107 | btns: [ 108 | { 109 | text: cancel && cancel.text || 'Cancel', 110 | style: cancel && cancel.style, 111 | callback: () => { 112 | this.close(); 113 | cancel && typeof cancel.callback === 'function' && cancel.callback(); 114 | }, 115 | }, 116 | { 117 | text: ok && ok.text || 'OK', 118 | style: ok && ok.style, 119 | callback: () => { 120 | this.close(); 121 | ok && typeof ok.callback === 'function' && ok.callback(); 122 | }, 123 | }, 124 | ], 125 | }); 126 | } 127 | 128 | pop = (args) => { 129 | return this._pop(args); 130 | } 131 | 132 | close = () => { 133 | if (this._resolve) { 134 | this._resolve({ index: -1, button: undefined }); 135 | this._resolve = null; 136 | } 137 | this.setState({ 138 | isVisible: false, 139 | }); 140 | } 141 | 142 | _renderOverlay = (styles) => { 143 | const { isOverlay } = this.props; 144 | 145 | if(isOverlay) { 146 | return ( 147 | 148 | 149 | 150 | ); 151 | } 152 | return null; 153 | } 154 | 155 | _renderContent = (styles) => { 156 | return ( 157 | 158 | {this.state.content} 159 | 160 | ); 161 | } 162 | 163 | render() { 164 | const { isVisible } = this.state; 165 | const { style } = this.props; 166 | const styles = makeStyleProxy(style, Dimensions, Platform, PixelRatio)(); 167 | 168 | if(isVisible) { 169 | return ( 170 | 171 | {this._renderOverlay(styles)} 172 | {this._renderContent(styles)} 173 | 174 | ); 175 | } 176 | return ; 177 | } 178 | 179 | }; 180 | -------------------------------------------------------------------------------- /lib/make-stylesheet.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet } from 'react-native'; 3 | import defaultStyleProxy from './styles'; 4 | 5 | export default (style, dimensions, platform, pixelRatio) => { 6 | const defaultStyle = defaultStyleProxy(dimensions, platform, pixelRatio); 7 | const override = style || {}; 8 | let newStyle = defaultStyle; 9 | const hasOwnProperty = Object.prototype.hasOwnProperty; 10 | for (const name of Object.keys(override)) { 11 | if (hasOwnProperty.call(defaultStyle, name) && hasOwnProperty.call(override, name)) { 12 | newStyle = Object.assign({}, newStyle, { [name]: override[name] }); 13 | } 14 | } 15 | const styleSheet = StyleSheet.create(newStyle); 16 | return (name) => { 17 | if (name && typeof name === 'string' && name.trim().length > 0) { 18 | return styleSheet[name]; 19 | } 20 | return styleSheet; 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /lib/style-shape.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export default { 5 | popupContainer: PropTypes.object, 6 | overlay: PropTypes.object, 7 | tipBoxView: PropTypes.object, 8 | tipBox: PropTypes.object, 9 | tipTitleBox: PropTypes.object, 10 | tipTitle: PropTypes.object, 11 | tipContentBox: PropTypes.object, 12 | tipContent: PropTypes.object, 13 | line: PropTypes.object, 14 | btnBox: PropTypes.object, 15 | btnBoxMulti: PropTypes.object, 16 | btnTextBox: PropTypes.object, 17 | btnTextBoxMulti: PropTypes.object, 18 | btnLineVertical: PropTypes.object, 19 | btnLineHorizontal: PropTypes.object, 20 | btnText: PropTypes.object, 21 | btnTextTextBoxMulti: PropTypes.object, 22 | hidden: PropTypes.object 23 | }; 24 | -------------------------------------------------------------------------------- /lib/styles.js: -------------------------------------------------------------------------------- 1 | export default (dimensions, platform, pixelRatio) => { 2 | const screen = { 3 | pixel: 1 / pixelRatio.get(), 4 | ...dimensions.get('window'), 5 | isIOS: platform.OS === 'ios' 6 | }; 7 | 8 | return { 9 | popupContainer: { 10 | position: 'absolute', 11 | top: 0, 12 | left: 0, 13 | justifyContent: 'center', 14 | alignItems: 'center', 15 | width: screen.width, 16 | height: screen.height, 17 | overflow: 'hidden', 18 | backgroundColor: 'rgba(00, 00, 00, 0)', 19 | }, 20 | overlay: { 21 | position: 'absolute', 22 | top: 0, 23 | left: 0, 24 | width: screen.width, 25 | height: screen.height, 26 | backgroundColor: '#000', 27 | opacity: .5, 28 | }, 29 | tipBoxView: { 30 | backgroundColor: '#fff', 31 | justifyContent: 'center', 32 | alignItems: 'center', 33 | width: screen.width - 50, 34 | borderRadius: 12, 35 | overflow: 'hidden', 36 | }, 37 | tipBox: { 38 | paddingTop: 15, 39 | flexDirection: 'column', 40 | justifyContent: 'center', 41 | alignItems: 'center', 42 | }, 43 | tipTitleBox: { 44 | height: 30, 45 | width: screen.width - 50, 46 | justifyContent: 'center', 47 | alignItems: 'center', 48 | }, 49 | tipTitle: { 50 | fontSize: screen.isIOS ? 20 : 19, 51 | fontWeight: '500', 52 | textAlign: 'center', 53 | color: 'black' 54 | }, 55 | tipContentBox: { 56 | flexDirection: 'column', 57 | marginBottom: 15, 58 | marginTop: 10, 59 | justifyContent: 'center', 60 | alignItems: 'center', 61 | }, 62 | tipContent: { 63 | fontSize: 16, 64 | margin: 5, 65 | marginTop: screen.isIOS ? 3 : 5, 66 | marginBottom: screen.isIOS ? 7 : 5, 67 | textAlign: 'center', 68 | color: 'black' 69 | }, 70 | line: { 71 | height: screen.pixel, 72 | width: screen.width - 50, 73 | backgroundColor: '#ddd', 74 | }, 75 | btnBox: { 76 | width: screen.width - 50, 77 | flexDirection: 'row', 78 | justifyContent: 'center', 79 | alignItems: 'center', 80 | height: 50, 81 | }, 82 | btnBoxMulti: { 83 | width: screen.width - 50, 84 | flexDirection: 'column', 85 | justifyContent: 'center', 86 | alignItems: 'center', 87 | height: 'auto', 88 | }, 89 | btnTextBox: { 90 | flexGrow: 1, 91 | height: 50, 92 | justifyContent: 'center', 93 | alignItems: 'center', 94 | }, 95 | btnTextBoxMulti: { 96 | flexGrow: 1, 97 | flexDirection: 'row', 98 | height: 50, 99 | justifyContent: 'center', 100 | alignItems: 'center', 101 | }, 102 | btnLineVertical: { 103 | height: 50, 104 | width: screen.pixel, 105 | backgroundColor: '#ddd', 106 | }, 107 | btnLineHorizontal: { 108 | height: screen.pixel, 109 | width: '100%', 110 | backgroundColor: '#ddd', 111 | }, 112 | btnText: { 113 | textAlign: 'center', 114 | fontSize: 16, 115 | color: '#149be0', 116 | }, 117 | btnTextTextBoxMulti: { 118 | flex: 1, 119 | textAlign: 'center', 120 | fontSize: 16, 121 | color: '#149be0', 122 | }, 123 | hidden: { 124 | position: 'absolute', 125 | height: 0, 126 | width: 0, 127 | top: 0, 128 | left: 0, 129 | }, 130 | }; 131 | }; 132 | 133 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-dialogbox", 3 | "version": "0.6.10", 4 | "description": "dialog popup for react-native", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/victoriafrench/react-native-dialogbox.git" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "popup", 16 | "dialog", 17 | "dialogbox", 18 | "dialog box", 19 | "alert" 20 | ], 21 | "author": { 22 | "name": "Victoria French", 23 | "email": "victoria.french@cinecove.com" 24 | }, 25 | "engines": { 26 | "node": ">=6" 27 | }, 28 | "license": "ISC", 29 | "bugs": { 30 | "url": "https://github.com/victoriafrench/react-native-dialogbox/issues" 31 | }, 32 | "homepage": "https://github.com/victoriafrench/react-native-dialogbox#readme", 33 | "peerDependencies": { 34 | "react": "*", 35 | "react-native": ">=0.30.0" 36 | }, 37 | "dependencies": { 38 | "prop-types": "^15.6.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /ui.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deavial/react-native-dialogbox/ea570dd3bf91455a5888ad61c61a10093dad36b9/ui.gif --------------------------------------------------------------------------------