completed the package

Author: Irfanwani

README.md

@@ -1,5 +1,5 @@
 {
-  "name": "@irfanwani/rn-dialog",
+  "name": "@irfanwani/react-native-dialog",
   "version": "0.0.1",
   "description": "This is a typescript package for react native apps to display a dialog box",
   "main": "lib/index.js",
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/irfanwani/rn-dialog.git"
+    "url": "git+https://github.com/irfanwani/react-native-dialog.git"
   },
   "keywords": [
     "react-native",
@@ -21,11 +21,11 @@
     "rn-dialog"
   ],
   "author": "Irfanwani <irfanwani347@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/irfanwani/rn-dialog/issues"
+    "url": "https://github.com/irfanwani/react-native-dialog/issues"
   },
-  "homepage": "https://github.com/irfanwani/rn-dialog#readme",
+  "homepage": "https://github.com/irfanwani/react-native-dialog#readme",
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-native": "^0.69",

package.json

@@ -1,25 +1,48 @@
-import { FC, useState, useEffect } from 'react';
+import { FC, useState, useEffect } from "react";
 import {
   View,
   TouchableOpacity,
   Text,
   GestureResponderEvent,
-  StyleSheet,
-  Dimensions,
-  Button,
-} from 'react-native';
+} from "react-native";
 
-import * as Animatable from 'react-native-animatable';
+import * as Animatable from "react-native-animatable";
 
-import styles from './styles'
+import styles from "./styles";
+
+// ADD OTHER PROPS LIKE CONFIRM STYLES, CANCEL STYLES,OTHER STYLES AS PROPS TO SUPPORT DYNAMIC STYLING, CHANGE TITLE, SUBTTILE FROM STRING TO REACT COMPONENTS FOR MORE CUSTOMIZATION OPTIONS, DARK AND LIGHT MODE, LINEARGRADIENT(OPTIONAL), BACKDROP (CLOSE WHEN CLICKED OUTSIDE DIALOG).
 
 interface DialogProps {
   visible: boolean;
+  title: string;
+  subtitle: string;
   closeDialog: (event: GestureResponderEvent) => void;
   confirm: (event: GestureResponderEvent) => void;
+  confirmText: string;
+  titleStyle?: Object;
+  cancelStyle?: Object;
+  confirmStyle?: Object;
+  subtitleStyle?: Object;
+  cancelTextStyle?: Object;
+  cancelText: string;
+  confirmTextStyle?: Object;
 }
 
-const Dialog: FC<DialogProps> = ({ visible, closeDialog, confirm }) => {
+const Dialog: FC<DialogProps> = ({
+  visible,
+  title,
+  subtitle,
+  closeDialog,
+  confirm,
+  confirmText,
+  confirmTextStyle,
+  titleStyle,
+  cancelStyle,
+  confirmStyle,
+  subtitleStyle,
+  cancelTextStyle,
+  cancelText,
+}) => {
   const [visiblest, setvisible] = useState(visible);
 
   useEffect(() => {
@@ -34,20 +57,27 @@ const Dialog: FC<DialogProps> = ({ visible, closeDialog, confirm }) => {
 
   if (visiblest) {
     return (
-      <View style={styles.dialog}>
+      <View style={styles.dialog} onTouchEnd={closeDialog}>
         <Animatable.View
-          animation={visible ? 'zoomIn' : 'zoomOut'}
+          animation={visible ? "zoomIn" : "zoomOut"}
           style={styles.dialogbox}
-          duration={250}>
-          <Text style={styles.warning}>Are you Sure?</Text>
-          <Text>This action cannot be reverted.</Text>
+          duration={250}
+        >
+          <Text style={[styles.warning, titleStyle]}>{title}</Text>
+          <Text style={subtitleStyle}>{subtitle}</Text>
 
           <View style={styles.card}>
-            <TouchableOpacity onPress={closeDialog} style={styles.cancel}>
-              <Text>Cancel</Text>
+            <TouchableOpacity
+              onPress={closeDialog}
+              style={[styles.cancel, cancelStyle]}
+            >
+              <Text style={cancelTextStyle}>{cancelText}</Text>
             </TouchableOpacity>
-            <TouchableOpacity onPress={confirm} style={styles.confirm}>
-              <Text>Delete</Text>
+            <TouchableOpacity
+              onPress={confirm}
+              style={[styles.confirm, confirmStyle]}
+            >
+              <Text style={confirmTextStyle}>{confirmText}</Text>
             </TouchableOpacity>
           </View>
         </Animatable.View>
@@ -58,5 +88,4 @@ const Dialog: FC<DialogProps> = ({ visible, closeDialog, confirm }) => {
   return <></>;
 };
 
-
 export default Dialog;

src/index.tsx

@@ -1,55 +1,47 @@
-import {StyleSheet, Dimensions} from 'react-native'
-
+import { StyleSheet, Dimensions } from "react-native";
 
 const styles = StyleSheet.create({
-    card: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      borderColor: 'grey',
-      borderWidth: 0.5,
-      padding: 15,
-      marginHorizontal: 10,
-      marginVertical: 5,
-      borderRadius: 10,
-      backgroundColor: 'rgba(50, 50, 50, 0.1)',
-    },
-    warning: {
-      color: 'red',
-      fontSize: 20,
-      alignSelf: 'center',
-      marginBottom: 20,
-    },
-    cancel: {
-      borderWidth: 0.5,
-      borderColor: 'grey',
-      padding: 10,
-      borderRadius: 10,
-      backgroundColor: 'rgba(50, 50, 50, 0.3)',
-    },
-    confirm: {
-      borderWidth: 0.5,
-      borderColor: 'red',
-      padding: 10,
-      borderRadius: 10,
-      backgroundColor: 'rgba(255, 0, 0, 0.4)',
-    },
-    dialog: {
-      flex: 1,
-      position: 'absolute',
-      backgroundColor: 'rgba(50, 50, 50, 0.4)',
-      width: Dimensions.get('window').width,
-      height: Dimensions.get('window').height,
-      marginTop: 30,
-      justifyContent: 'center',
-      alignItems: 'center',
-      elevation: 5,
-    },
-    dialogbox: {
-      backgroundColor: 'white',
-      padding: 20,
-      borderRadius: 20,
-      justifyContent: 'space-between',
-    },
-  });
+  card: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginHorizontal: 10,
+    marginVertical: 5,
+    padding: 10
+  },
+  warning: {
+    fontSize: 20,
+    alignSelf: "center",
+    marginBottom: 20,
+  },
+  cancel: {
+    borderWidth: 0.5,
+    borderColor: "grey",
+    padding: 10,
+    borderRadius: 10,
+    backgroundColor: "rgba(50, 50, 50, 0.3)",
+  },
+  confirm: {
+    borderWidth: 0.5,
+    borderColor: "green",
+    padding: 10,
+    borderRadius: 10,
+    backgroundColor: "rgba(100, 255, 100, 0.7)",
+  },
+  dialog: {
+    position: "absolute",
+    backgroundColor: "rgba(50, 50, 50, 0.4)",
+    width: Dimensions.get("window").width,
+    height: Dimensions.get("window").height,
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 999,
+  },
+  dialogbox: {
+    backgroundColor: "white",
+    padding: 20,
+    borderRadius: 20,
+    justifyContent: "space-between"
+  },
+});
 
-  export default styles;
+export default styles;

src/styles.ts

@@ -30,7 +30,7 @@
     /* Modules */
     "module": "ESNext" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */