From df95da49cfbadb5c42673dae70aa485672ac5dfe Mon Sep 17 00:00:00 2001
From: jacklam718 <jacklam718@gmail.com>
Date: Mon, 2 Sep 2019 15:28:00 +0800
Subject: [PATCH] Rename popup dialog -> modal

---
 README.md                                     | 142 +++++++++---------
 .../.flowconfig                               |   0
 .../.gitignore                                |   0
 .../.watchmanconfig                           |   0
 .../App.js                                    |  18 +--
 .../app.json                                  |   4 +-
 .../assets/icon.png                           | Bin
 .../assets/splash.png                         | Bin
 .../babel.config.js                           |   0
 .../package.json                              |   4 +-
 .../yarn.lock                                 |   2 +-
 package.json                                  |  16 +-
 12 files changed, 91 insertions(+), 95 deletions(-)
 rename {popup-dialog-example => modals-example}/.flowconfig (100%)
 rename {popup-dialog-example => modals-example}/.gitignore (100%)
 rename {popup-dialog-example => modals-example}/.watchmanconfig (100%)
 rename {popup-dialog-example => modals-example}/App.js (94%)
 rename {popup-dialog-example => modals-example}/app.json (87%)
 rename {popup-dialog-example => modals-example}/assets/icon.png (100%)
 rename {popup-dialog-example => modals-example}/assets/splash.png (100%)
 rename {popup-dialog-example => modals-example}/babel.config.js (100%)
 rename {popup-dialog-example => modals-example}/package.json (76%)
 rename {popup-dialog-example => modals-example}/yarn.lock (99%)

diff --git a/README.md b/README.md
index 52cecec..b863129 100644
--- a/README.md
+++ b/README.md
@@ -2,25 +2,21 @@
 [![npm](https://img.shields.io/npm/dm/react-native-popup-dialog.svg)]()
 [![npm](https://img.shields.io/npm/v/react-native-popup-dialog.svg)]()
 
-## React Native Popup Dialog
-React Native Popup Dialog for iOS & Android.
-
-Another similar dialog component: [react-native-dialog-component](https://github.com/jacklam718/react-native-dialog-component) the main difference is style.
-
-Pull request are welcomed. Please follow [Airbnb JS Style Guide](https://github.com/airbnb/javascript)
+## React Native Modals
+React Native Modals Library for iOS & Android.
 
 #### How to thank me ?
 Just click on ⭐️ button 😘
 
 [Try it with Exponent](https://exp.host/@jacklam718/popup-dialog-example)<br>
-<img src="https://raw.githubusercontent.com/jacklam718/react-native-popup-dialog/master/.github/popup-dialog.png" width="220">
+<img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/popup-dialog.png" width="220">
 <br>
 <br>
-<!-- ![Example](https://jacklam718.github.io/react-native-popup-dialog/resources/react-native-popup-dialog.gif) -->
+<!-- ![Example](https://jacklam718.github.io/react-native-modals/resources/react-native-modals.gif) -->
 <span>
-  <img src="https://raw.githubusercontent.com/jacklam718/react-native-popup-dialog/master/.github/fade-animation.gif" width="220">&nbsp;&nbsp;
-  <img src="https://raw.githubusercontent.com/jacklam718/react-native-popup-dialog/master/.github/scale-animation.gif" width="220">&nbsp;&nbsp;
-  <img src="https://raw.githubusercontent.com/jacklam718/react-native-popup-dialog/master/.github/slide-animation.gif" width="220">
+  <img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/fade-animation.gif" width="220">&nbsp;&nbsp;
+  <img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/scale-animation.gif" width="220">&nbsp;&nbsp;
+  <img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/slide-animation.gif" width="220">
 </span>
 
 ## BREAKING CHANGE
@@ -29,149 +25,149 @@ Has a lot of backward incompatible changes in `v0.16.0`. Please, Read the Docs b
 ## Installation
 
 ```
-npm install --save react-native-popup-dialog
+npm install --save react-native-modals
 # OR
-yarn add react-native-popup-dialog
+yarn add react-native-modals
 ```
 
 ## Exposed Modules
 
-* Dialog
-* Overlay
-* DialogButton
-* DialogContent
-* DialogTitle
-* DialogFooter
+* Modal
+* Backdrop
+* ModalButton
+* ModalContent
+* ModalTitle
+* ModalFooter
 * Animation
 * FadeAnimation
 * ScaleAnimation
 * SlideAnimation
-* DialogProps
-* DialogFooterProps
-* DialogButtonProps
-* DialogTitleProps
-* DialogContentProps
-* OverlayProps
+* ModalProps
+* ModalFooterProps
+* ModalButtonProps
+* ModalTitleProps
+* ModalContentProps
+* BackdropProps
 
 ## Examples
-[Example](https://github.com/jacklam718/react-native-popup-dialog/blob/master/popup-dialog-example/App.js)
+[Example](https://github.com/jacklam718/react-native-modals/blob/master/modals-example/App.js)
 
 
 ## Basic Usage
 ```jsx
-import Dialog, { DialogContent } from 'react-native-popup-dialog';
+import Modal, { ModalContent } from 'react-native-modals';
 import { Button } from 'react-native'
 
 <View style={styles.container}>
   <Button
-    title="Show Dialog"
+    title="Show Modal"
     onPress={() => {
       this.setState({ visible: true });
     }}
   />
-  <Dialog
+  <Modal
     visible={this.state.visible}
     onTouchOutside={() => {
       this.setState({ visible: false });
     }}
   >
-    <DialogContent>
+    <ModalContent>
       {...}
-    </DialogContent>
-  </Dialog>
+    </ModalContent>
+  </Modal>
 </View>
 ```
 
 ## Usage - Animation
 ```jsx
-import Dialog, { SlideAnimation, DialogContent } from 'react-native-popup-dialog';
+import Modal, { SlideAnimation, ModalContent } from 'react-native-modals';
 
 <View style={styles.container}>
-  <Dialog
+  <Modal
     visible={this.state.visible}
-    dialogAnimation={new SlideAnimation({
+    modalAnimation={new SlideAnimation({
       slideFrom: 'bottom',
     })}
   >
-    <DialogContent>
+    <ModalContent>
       {...}
-    </DialogContent>
-  </Dialog>
+    </ModalContent>
+  </Modal>
 </View>
 ```
 
-## Usage - Dialog Dialog Title
+## Usage - Modal Title
 ```jsx
-import Dialog, { DialogTitle, DialogContent } from 'react-native-popup-dialog';
+import Modal, { ModalTitle, ModalContent } from 'react-native-modals';
 
 <View style={styles.container}>
-  <Dialog
+  <Modal
     visible={this.state.visible}
-    dialogTitle={<DialogTitle title="Dialog Title" />}
+    modalTitle={<ModalTitle title="Modal Title" />}
   >
-    <DialogContent>
+    <ModalContent>
       {...}
-    </DialogContent>
-  </Dialog>
+    </ModalContent>
+  </Modal>
 </View>
 ```
 
-## Usage - Dialog Action
+## Usage - Modal Action
 ```jsx
-import Dialog, { DialogFooter, DialogButton, DialogContent } from 'react-native-popup-dialog';
+import Modal, { ModalFooter, ModalButton, ModalContent } from 'react-native-modals';
 
 <View style={styles.container}>
-  <Dialog
+  <Modal
     visible={this.state.visible}
     footer={
-      <DialogFooter>
-        <DialogButton
+      <ModalFooter>
+        <ModalButton
           text="CANCEL"
           onPress={() => {}}
         />
-        <DialogButton
+        <ModalButton
           text="OK"
           onPress={() => {}}
         />
-      </DialogFooter>
+      </ModalFooter>
     }
   >
-    <DialogContent>
+    <ModalContent>
       {...}
-    </DialogContent>
-  </Dialog>
+    </ModalContent>
+  </Modal>
 </View>
 ```
 
 
 ## Props
 
-### Dialog
+### Modal
 | Prop | Type | Default | Note |
 |---|---|---|---|
 | `visible` | `boolean` | `false` | |
 | `rounded` | `boolean` | `true` | |
 | `useNativeDriver` | `boolean` | `true` | |
 | `children` | `any` | | |
-| `dialogTitle?` | `React Element` | | You can pass a `DialogTitle` component or pass a `View` for customizing titlebar |
-| `width?` | `Number` | Your device width | The Width of Dialog, you can use fixed width or use percentage. For example `0.5` it means `50%`
-| `height?` | `Number` | 300 | The Height of Dialog, you can use fixed height or use percentage. For example `0.5` it means `50%`
-| `dialogAnimation?` |  | `FadeAnimation` | animation for dialog | |
-| `dialogStyle?` | `any` | | | |
+| `modalTitle?` | `React Element` | | You can pass a `modalTitle` component or pass a `View` for customizing titlebar |
+| `width?` | `Number` | Your device width | The Width of modal, you can use fixed width or use percentage. For example `0.5` it means `50%`
+| `height?` | `Number` | 300 | The Height of modal, you can use fixed height or use percentage. For example `0.5` it means `50%`
+| `modalAnimation?` |  | `FadeAnimation` | animation for modal | |
+| `modalStyle?` | `any` | | | |
 | `containerStyle?` | `any` | `null` | For example: ``` {  zIndex: 10, elevation: 10 } ``` | |
 | `animationDuration?` | `Number` | `200` | | |
 | `overlayPointerEvents?` | `String` | | Available option: `auto`, `none` |
 | `overlayBackgroundColor?` | `String` | `#000` |
 | `overlayOpacity?` | `Number` | `0.5` |
 | `hasOverlay?` | `Boolean` | `true` | | |
-| `onShow?` | `Function` | | You can pass shown function as a callback function, will call the function when dialog shown | |
-| `onDismiss?` | `Function` | | You can pass onDismiss function as a callback function, will call the function when dialog dismissed | |
+| `onShow?` | `Function` | | You can pass shown function as a callback function, will call the function when modal shown | |
+| `onDismiss?` | `Function` | | You can pass onDismiss function as a callback function, will call the function when modal dismissed | |
 | `onTouchOutside?` | `Function` | `() => {}` | | |
 | `onHardwareBackPress?` | `Function` | `() => true` | [Handle hardware button presses](https://facebook.github.io/react-native/docs/backhandler) | |
 | `footer?` | `React Element` | `null` | for example: ```<View><Button text="DISMISS" align="center" onPress={() => {}}/></View>``` | |
 
 
-### DialogTitle
+### ModalTitle
 | Prop | Type | Default | Note |
 |---|---|---|---|
 | `title` | `String` | | | |
@@ -181,22 +177,22 @@ import Dialog, { DialogFooter, DialogButton, DialogContent } from 'react-native-
 | `hasTitleBar?` | `Bool` | `true` | | |
 
 
-### DialogContent
+### ModalContent
 | Prop | Type | Default | Note |
 |---|---|---|---|
 | `children` | `any` | | | |
 | `style?` | `any` | `null` | | |
 
 
-### DialogFooter
+### ModalFooter
 | Prop | Type | Default | Note |
 |---|---|---|---|
-| `children` | `DialogButton` | | | |
+| `children` | `ModalButton` | | | |
 | `bordered?` | `Boolean` | `true` | | |
 | `style?` | `any` | null | | |
 
 
-### DialogButton
+### ModalButton
 | Prop | Type | Default | Note |
 |---|---|---|---|
 | `text` | `String` | | | |
@@ -209,7 +205,7 @@ import Dialog, { DialogFooter, DialogButton, DialogContent } from 'react-native-
 | `bordered?` | `Boolean` | `false` | | |
 
 
-### Overlay
+### Backdrop
 | Prop | Type | Default | Note |
 |---|---|---|---|
 | `visible` | `Boolean` | | | |
@@ -226,7 +222,7 @@ import Dialog, { DialogFooter, DialogButton, DialogContent } from 'react-native-
 
 ### FadeAnimation
 ##### Preview:
-<img src="https://raw.githubusercontent.com/jacklam718/react-native-popup-dialog/master/.github/fade-animation.gif" width="200">
+<img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/fade-animation.gif" width="200">
 
 ##### Example:
 ```javascript
@@ -244,7 +240,7 @@ new FadeAnimation({
 
 ### ScaleAnimation
 ##### Preview:
-<img src="https://raw.githubusercontent.com/jacklam718/react-native-popup-dialog/master/.github/scale-animation.gif" width="200">
+<img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/scale-animation.gif" width="200">
 
 ##### Example:
 ```javascript
@@ -260,7 +256,7 @@ new ScaleAnimation({
 
 ### SlideAnimation
 ##### Preview:
-<img src="https://raw.githubusercontent.com/jacklam718/react-native-popup-dialog/master/.github/slide-animation.gif" width="200">
+<img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/slide-animation.gif" width="200">
 
 ##### Example:
 ```javascript
@@ -282,7 +278,7 @@ new SlideAnimation({
 
 ```javascript
 import { Animated } from 'react-native';
-import { Animation } from 'react-native-popup-dialog';
+import { Animation } from 'react-native-modals';
 
 class CustomAnimation extends Animation {
   in(onFinished) {
diff --git a/popup-dialog-example/.flowconfig b/modals-example/.flowconfig
similarity index 100%
rename from popup-dialog-example/.flowconfig
rename to modals-example/.flowconfig
diff --git a/popup-dialog-example/.gitignore b/modals-example/.gitignore
similarity index 100%
rename from popup-dialog-example/.gitignore
rename to modals-example/.gitignore
diff --git a/popup-dialog-example/.watchmanconfig b/modals-example/.watchmanconfig
similarity index 100%
rename from popup-dialog-example/.watchmanconfig
rename to modals-example/.watchmanconfig
diff --git a/popup-dialog-example/App.js b/modals-example/App.js
similarity index 94%
rename from popup-dialog-example/App.js
rename to modals-example/App.js
index 44306b1..4af4b51 100644
--- a/popup-dialog-example/App.js
+++ b/modals-example/App.js
@@ -7,7 +7,7 @@ import Modal, {
   ModalButton,
   SlideAnimation,
   ScaleAnimation,
-} from 'react-native-popup-dialog';
+} from 'react-native-modals';
 
 const styles = StyleSheet.create({
   container: {
@@ -60,7 +60,7 @@ export default class App extends Component {
       <View style={{ flex: 1 }}>
         <View style={styles.container}>
           <Button
-            title="Show Dialog - Default Animation"
+            title="Show Modal - Default Animation"
             onPress={() => {
               this.setState({
                 defaultAnimationModal: true,
@@ -69,7 +69,7 @@ export default class App extends Component {
           />
 
           <Button
-            title="Show Dialog - Swipeable Modal Animation"
+            title="Show Modal - Swipeable Modal Animation"
             onPress={() => {
               this.setState({
                 swipeableModal: true,
@@ -78,7 +78,7 @@ export default class App extends Component {
           />
 
           <Button
-            title="Show Dialog - Scale Animation"
+            title="Show Modal - Scale Animation"
             onPress={() => {
               this.setState({
                 scaleAnimationModal: true,
@@ -87,7 +87,7 @@ export default class App extends Component {
           />
 
           <Button
-            title="Show Dialog - Slide Animation"
+            title="Show Modal - Slide Animation"
             onPress={() => {
               this.setState({
                 slideAnimationModal: true,
@@ -96,7 +96,7 @@ export default class App extends Component {
           />
 
           <Button
-            title="Show Dialog - Custom Background Style"
+            title="Show Modal - Custom Background Style"
             onPress={() => {
               this.setState({
                 customBackgroundModal: true,
@@ -232,7 +232,7 @@ export default class App extends Component {
           }}
           modalTitle={
             <ModalTitle
-              title="Popup Dialog - Scale Animation"
+              title="Modal - Scale Animation"
               hasTitleBar={false}
             />
           }
@@ -268,7 +268,7 @@ export default class App extends Component {
           visible={this.state.slideAnimationModal}
           modalTitle={
             <ModalTitle
-              title="Popup Dialog - Slide Animation"
+              title="Modal - Slide Animation"
               hasTitleBar={false}
             />
           }
@@ -293,7 +293,7 @@ export default class App extends Component {
           }}
           modalTitle={
             <ModalTitle
-              title="Popup Dialog - Custom Background Style"
+              title="Modal - Custom Background Style"
               hasTitleBar={false}
               textStyle={{ color: '#fff' }}
             />
diff --git a/popup-dialog-example/app.json b/modals-example/app.json
similarity index 87%
rename from popup-dialog-example/app.json
rename to modals-example/app.json
index 227d880..bc1bd87 100644
--- a/popup-dialog-example/app.json
+++ b/modals-example/app.json
@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "popup-dialog-example",
-    "slug": "popup-dialog-example",
+    "name": "modals-example",
+    "slug": "modals-example",
     "privacy": "public",
     "sdkVersion": "32.0.0",
     "platforms": [
diff --git a/popup-dialog-example/assets/icon.png b/modals-example/assets/icon.png
similarity index 100%
rename from popup-dialog-example/assets/icon.png
rename to modals-example/assets/icon.png
diff --git a/popup-dialog-example/assets/splash.png b/modals-example/assets/splash.png
similarity index 100%
rename from popup-dialog-example/assets/splash.png
rename to modals-example/assets/splash.png
diff --git a/popup-dialog-example/babel.config.js b/modals-example/babel.config.js
similarity index 100%
rename from popup-dialog-example/babel.config.js
rename to modals-example/babel.config.js
diff --git a/popup-dialog-example/package.json b/modals-example/package.json
similarity index 76%
rename from popup-dialog-example/package.json
rename to modals-example/package.json
index 86e701c..a99187c 100644
--- a/popup-dialog-example/package.json
+++ b/modals-example/package.json
@@ -5,13 +5,13 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "eject": "expo eject",
-    "postinstall": "rimraf node_modules/react-native-popup-dialog/node_modules/react-native"
+    "postinstall": "rimraf node_modules/react-native-modals/node_modules/react-native"
   },
   "dependencies": {
     "expo": "^32.0.0",
     "react": "16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
-    "react-native-popup-dialog": ".."
+    "react-native-modals": ".."
   },
   "devDependencies": {
     "babel-preset-expo": "^5.0.0"
diff --git a/popup-dialog-example/yarn.lock b/modals-example/yarn.lock
similarity index 99%
rename from popup-dialog-example/yarn.lock
rename to modals-example/yarn.lock
index f06149b..1418d02 100644
--- a/popup-dialog-example/yarn.lock
+++ b/modals-example/yarn.lock
@@ -4437,7 +4437,7 @@ react-native-maps@expo/react-native-maps#v0.22.1-exp.0:
   version "0.22.1"
   resolved "https://codeload.github.com/expo/react-native-maps/tar.gz/e6f98ff7272e5d0a7fe974a41f28593af2d77bb2"
 
-react-native-popup-dialog@..:
+react-native-modals@..:
   version "0.18.3"
   dependencies:
     babel-plugin-flow-react-proptypes "^9.1.1"
diff --git a/package.json b/package.json
index f0ea5de..8e8dd86 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "react-native-popup-dialog",
-  "version": "0.18.3",
-  "description": "React Native Popup Dialog for IOS & Android.",
+  "name": "react-native-modals",
+  "version": "0.19.3",
+  "description": "React Native Modals Library for IOS & Android.",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -10,24 +10,24 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/jacklam718/react-native-popup-dialog.git"
+    "url": "https://github.com/jacklam718/react-native-modals.git"
   },
   "keywords": [
     "dialog",
     "popup",
     "react dialog",
     "react-native",
-    "react-native-popup-dialog",
+    "react-native-modals",
     "react-native-dialog",
     "react native dialog",
-    "popup-dialog",
+    "modals",
     "react-component",
     "ios",
     "android"
   ],
   "author": "jacklam <jacklam718@gmail.com> (https://github.com/jacklam718)",
   "license": "MIT",
-  "homepage": "https://github.com/jacklam718/react-native-popup-dialog/blob/master/README.md",
+  "homepage": "https://github.com/jacklam718/react-native-modals/blob/master/README.md",
   "dependencies": {
     "babel-plugin-flow-react-proptypes": "^9.1.1",
     "prop-types": "^15.6.0",
@@ -66,7 +66,7 @@
     ],
     "testRegex": "__tests__/.+\\.test.js$",
     "modulePathIgnorePatterns": [
-      "popup-dialog-example/node_modules"
+      "modals-example/node_modules"
     ]
   }
 }