diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0e5a3b2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+# OSX
+.DS_Store
+
+# Node Module
+node_modules/
diff --git a/README.md b/README.md
index a97c070..4571cbe 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,171 @@
 # react-native-alert-pro
-The Pro Version of React Native Alert  (Android & iOS)
+
+[![npm version](https://badge.fury.io/js/react-native-alert-pro.svg)](//npmjs.com/package/react-native-alert-pro) [![npm downloads](https://img.shields.io/npm/dm/react-native-alert-pro.svg)
+](//npmjs.com/package/react-native-alert-pro)
+
+- Super lightweight component (50 KB)
+- Smooth animation
+- Beautiful
+- Use method instead of state
+- Work like a Pro
+- Customize whatever you like
+- Support all orientations
+- Support both Android and iOS
+
+|                                                    iOS                                                    |                                                  Android                                                  |
+| :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: |
+| ![](https://raw.githubusercontent.com/NYSamnang/stock-images/master/react-native-alert-pro/RNALP-IOS.gif) | ![](https://raw.githubusercontent.com/NYSamnang/stock-images/master/react-native-alert-pro/RNALP-AOS.gif) |
+
+## Installation
+
+```
+npm i react-native-alert-pro --save
+```
+
+### or
+
+```
+yarn add react-native-alert-pro
+```
+
+## Example
+
+```jsx
+import React, { Component } from "react";
+import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
+import AlertPro from "react-native-alert-pro";
+
+class Example extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>REACT NATIVE ALERT PRO</Text>
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity
+            onPress={() => this.AlertPro.open()}
+            style={styles.button}
+          >
+            <Text style={styles.text}>CUSTOM</Text>
+          </TouchableOpacity>
+        </View>
+
+        <AlertPro
+          ref={ref => {
+            this.AlertPro = ref;
+          }}
+          onConfirm={() => this.AlertPro.close()}
+          title="Delete confirmation"
+          message="Are you sure to delete the entry?"
+          textCancel="Cancel"
+          textConfirm="Delete"
+          customStyles={{
+            mask: {
+              backgroundColor: "transparent"
+            },
+            container: {
+              borderWidth: 1,
+              borderColor: "#9900cc",
+              shadowColor: "#000000",
+              shadowOpacity: 0.1,
+              shadowRadius: 10
+            },
+            buttonCancel: {
+              backgroundColor: "#4da6ff"
+            },
+            buttonConfirm: {
+              backgroundColor: "#ffa31a"
+            }
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#fff"
+  },
+  title: {
+    fontSize: 20,
+    marginTop: 120
+  },
+  buttonContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#FFFFFF"
+  },
+  button: {
+    backgroundColor: "#4EB151",
+    paddingVertical: 11,
+    paddingHorizontal: 17,
+    borderRadius: 3,
+    marginBottom: 15
+  },
+  text: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600"
+  }
+});
+
+export default Example;
+```
+
+## Props
+
+| Prop             | Type     | Description                                              | Default                    |
+| ---------------- | -------- | -------------------------------------------------------- | -------------------------- |
+| title            | string   | AlertPro's title                                         | "Do you want to continue?" |
+| message          | string   | AlertPro's message                                       | ""                         |
+| showCancel       | boolean  | Show a Cancel button                                     | true                       |
+| showConfirm      | boolean  | Show a Confirm button                                    | true                       |
+| textCancel       | string   | Text display on Cancel button                            | "No"                       |
+| textConfirm      | string   | Text display on Confirm button                           | "Yes"                      |
+| closeOnPressMask | boolean  | Close AlertPro when press on mask (The empty space area) | true                       |
+| customStyles     | object   | Custom style to AlertPro                                 | {}                         |
+| onCancel         | function | Event on Cancel button                                   |                            |
+| onConfirm        | function | Event on Confirm button                                  |                            |
+
+### Available Custom Style
+
+```jsx
+customStyles: {
+  title: {...}, // AlertPro's title
+  message: {...}, // AlertPro's message
+  mask: {...}, // The empty space area
+  container: {...}, // AlertPro container
+  content: {...}, // AlertPro content
+  buttonCancel: {...}, // Cancel button
+  buttonConfirm: {...}, // Confirm button
+  textCancel: {...}, // Cancel button's Text
+  textConfirm: {...} // Confirm button's Text
+
+}
+```
+
+## Methods
+
+| Method Name | Description    |
+| ----------- | -------------- |
+| open        | Open AlertPro  |
+| close       | Close AlertPro |
+
+### Note
+
+Always set `ref` to `AlertPro` and call each method by using `this.AlertPro.methodName()` like example above.
+
+### Give me a Star
+
+If you think this project is helpful just give me a ⭐️ Star is enough because i don't drink coffee :D
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/NYSamnang/react-native-alert-pro/blob/master/LICENSE) file for details
+
+## Author
+
+Made with ❤️ by [NY Samnang](https://github.com/NYSamnang).
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..daef382
--- /dev/null
+++ b/index.js
@@ -0,0 +1,3 @@
+import AlertPro from "./src";
+
+export default AlertPro;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..0209555
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-native-alert-pro",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "prop-types": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0055c14
--- /dev/null
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "react-native-alert-pro",
+  "version": "1.0.0",
+  "description": "The Pro Version of React Native Alert (Android & iOS)",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NYSamnang/react-native-alert-pro.git"
+  },
+  "keywords": [
+    "react-native",
+    "alert",
+    "alert-pro",
+    "dialog",
+    "popup",
+    "confirm",
+    "modal",
+    "box"
+  ],
+  "author": "NY Samnang",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NYSamnang/react-native-alert-pro/issues"
+  },
+  "homepage": "https://github.com/NYSamnang/react-native-alert-pro#readme",
+  "dependencies": {
+    "prop-types": "^15.6.2"
+  }
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..354093d
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,165 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Text, View, Animated, Modal, TouchableOpacity } from "react-native";
+
+import styles from "./style";
+
+const SUPPORTED_ORIENTATIONS = [
+  "portrait",
+  "portrait-upside-down",
+  "landscape",
+  "landscape-left",
+  "landscape-right"
+];
+
+class AlertPro extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      visible: false
+    };
+
+    this.springValue = new Animated.Value(0);
+
+    this.onCancel = this.onCancel.bind(this);
+    this.onConfirm = this.onConfirm.bind(this);
+    this.open = this.open.bind(this);
+    this.close = this.close.bind(this);
+  }
+
+  componentWillUnmount() {
+    this.springValue.setValue(0);
+  }
+
+  animatedConfirm() {
+    Animated.spring(this.springValue, {
+      toValue: 1,
+      speed: 15,
+      useNativeDriver: true
+    }).start();
+  }
+
+  onCancel() {
+    if (typeof this.props.onCancel === "function") {
+      this.props.onCancel();
+    }
+  }
+
+  onConfirm() {
+    if (typeof this.props.onConfirm === "function") {
+      this.props.onConfirm();
+    }
+  }
+
+  open() {
+    this.setState({ visible: true }, () => this.animatedConfirm());
+  }
+
+  close() {
+    this.setState({ visible: false }, () => this.springValue.setValue(0));
+  }
+
+  render() {
+    const {
+      title,
+      message,
+      showCancel,
+      showConfirm,
+      textCancel,
+      textConfirm,
+      customStyles,
+      closeOnPressMask
+    } = this.props;
+    return (
+      <Modal
+        visible={this.state.visible}
+        transparent={true}
+        animationType="fade"
+        supportedOrientations={SUPPORTED_ORIENTATIONS}
+        onRequestClose={() => {}}
+        onBackButtonPress={() => this.setState({ visible: false })}
+      >
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={closeOnPressMask ? this.close : null}
+          style={[styles.background, customStyles.mask]}
+        >
+          <Animated.View
+            style={[
+              styles.container,
+              {
+                transform: [{ scale: this.springValue }]
+              },
+              customStyles.container
+            ]}
+          >
+            <TouchableOpacity activeOpacity={1} style={customStyles.content}>
+              <View style={styles.content}>
+                <Text style={[styles.title, customStyles.title]}>{title}</Text>
+                {message ? (
+                  <Text style={[styles.message, customStyles.message]}>
+                    {message}
+                  </Text>
+                ) : null}
+              </View>
+
+              <View style={styles.buttonContainer}>
+                {showCancel ? (
+                  <TouchableOpacity
+                    onPress={this.onCancel}
+                    style={[
+                      styles.button,
+                      styles.buttonCancel,
+                      customStyles.buttonCancel
+                    ]}
+                  >
+                    <Text style={[styles.textButton, customStyles.textCancel]}>
+                      {textCancel}
+                    </Text>
+                  </TouchableOpacity>
+                ) : null}
+                {showConfirm ? (
+                  <TouchableOpacity
+                    onPress={this.onConfirm}
+                    style={[styles.button, customStyles.buttonConfirm]}
+                  >
+                    <Text style={[styles.textButton, customStyles.textConfirm]}>
+                      {textConfirm}
+                    </Text>
+                  </TouchableOpacity>
+                ) : null}
+              </View>
+            </TouchableOpacity>
+          </Animated.View>
+        </TouchableOpacity>
+      </Modal>
+    );
+  }
+}
+
+AlertPro.propTypes = {
+  customStyles: PropTypes.object,
+  title: PropTypes.string,
+  message: PropTypes.string,
+  showCancel: PropTypes.bool,
+  showConfirm: PropTypes.bool,
+  textCancel: PropTypes.string,
+  textConfirm: PropTypes.string,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  closeOnPressMask: PropTypes.bool
+};
+
+AlertPro.defaultProps = {
+  customStyles: {},
+  title: "Do you want to continue?",
+  message: "",
+  showCancel: true,
+  showConfirm: true,
+  textCancel: "No",
+  textConfirm: "Yes",
+  closeOnPressMask: true
+};
+
+export default AlertPro;
diff --git a/src/style.js b/src/style.js
new file mode 100644
index 0000000..3ca9b65
--- /dev/null
+++ b/src/style.js
@@ -0,0 +1,59 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    backgroundColor: "#FFF",
+    maxWidth: 350,
+    marginHorizontal: 30,
+    borderRadius: 5
+  },
+  content: {
+    justifyContent: "center",
+    padding: 20
+  },
+  title: {
+    textAlign: "center",
+    fontSize: 18,
+    color: "#333",
+    fontWeight: "500",
+    lineHeight: 25
+  },
+  message: {
+    textAlign: "center",
+    fontSize: 17,
+    color: "#666",
+    paddingTop: 10
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    borderRadius: 5,
+    flexWrap: "wrap"
+  },
+  button: {
+    backgroundColor: "#00ACEF",
+    marginBottom: 20,
+    marginHorizontal: 10,
+    alignItems: "center",
+    paddingVertical: 8,
+    borderRadius: 5,
+    minWidth: 90
+  },
+  buttonCancel: {
+    backgroundColor: "#F53D3D"
+  },
+  textButton: {
+    fontSize: 15,
+    textAlign: "center",
+    color: "#FFF",
+    fontWeight: "600"
+  }
+});
+
+export default styles;