|
| 1 | +## React-Native-Dialog |
| 2 | + |
| 3 | +React native dialog library to show dialog boxes |
| 4 | + |
| 5 | +#### How to thank me ? |
| 6 | + |
| 7 | +Just click on ⭐️ button 😘 |
| 8 | + |
| 9 | +## Installation: |
| 10 | + |
| 11 | +``` |
| 12 | +npm install --save @irfanwani/react-native-dialog |
| 13 | +OR |
| 14 | +yarn add @irfanwani/react-native-dialog |
| 15 | +``` |
| 16 | + |
| 17 | +## Basic Usage |
| 18 | + |
| 19 | +```tsx |
| 20 | +import { useState } from "react"; |
| 21 | +import { |
| 22 | + StyleSheet, |
| 23 | + Text, |
| 24 | + Button, |
| 25 | + View, |
| 26 | + GestureResponderEvent, |
| 27 | +} from "react-native"; |
| 28 | + |
| 29 | +import Dialog from "@irfanwani/react-native-dialog"; |
| 30 | + |
| 31 | +export default () => { |
| 32 | + const [visible, setvisible] = useState(false); |
| 33 | + |
| 34 | + const showModal: (event: GestureResponderEvent) => void = () => { |
| 35 | + setvisible(true); |
| 36 | + }; |
| 37 | + return ( |
| 38 | + <View style={styles.container}> |
| 39 | + <Button title="show modal" onPress={showModal} /> |
| 40 | + <Dialog |
| 41 | + title="Dialog Title" |
| 42 | + cancelText="Cancel" |
| 43 | + subtitle="Dialog subtitle which is shown under the title" |
| 44 | + confirmText="Confirm" |
| 45 | + visible={visible} |
| 46 | + closeDialog={() => { |
| 47 | + setvisible(false); |
| 48 | + }} |
| 49 | + confirm={() => { |
| 50 | + console.log("confirmed"); |
| 51 | + }} |
| 52 | + /> |
| 53 | + </View> |
| 54 | + ); |
| 55 | +}; |
| 56 | +``` |
| 57 | + |
| 58 | +## Props |
| 59 | + |
| 60 | +| Prop | Type | Required | Note | |
| 61 | +| --------------------- | ---------------------------------------- | ------------------------------------- | ---------------------------------------------- | |
| 62 | +| `visible` | `boolean` | True | Determines whether the dialog is shown or not | |
| 63 | +| `title` | `string` | True | Title for the dialog | |
| 64 | +| `subtitle` | `string` | Extra description about the alert | |
| 65 | +| `closeDialog` | `(event: GestureResponderEvent) => void` | True | Callback for the close button | |
| 66 | +| `confirm` | `(event: GestureResponderEvent) => void` | True | Callback for the confirm button | |
| 67 | +| `confirmText` | `string` | True | text to be shown on the confirm button | |
| 68 | +| `cancelText` `string` | True | text to be shown on the cancel button | |
| 69 | +| `titleStyle?` | `Object` | False | Styles object for the title | |
| 70 | +| `cancelStyle?` | `Object` | False | Styles object for the cancel button container | |
| 71 | +| `confirmStyle?` | `Object` | False | Styles object for the confirm button container | |
| 72 | +| `subtitleStyle?` | `Object` | False | Styles object for the subtitle button | |
| 73 | +| `cancelTextStyle?` | `Object` | False | Styles object for the cancel button text | |
| 74 | +| `confirmTextStyle?` | `Object` | False | Styles object for the confirm button text | |
0 commit comments