Update Toast.tsx to support padding for modal

README.md

@@ -1,23 +1,23 @@
-# react-native-alert-notification
+# react-native-alert-dialog
 
 ## Example Dialog Box
 
-|                                                                             Theme Light                                                                              |                                                                             Theme Dark                                                                             |
-| :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-| <img src="https://github.com/CodingByJerez/react-native-alert-notification/blob/master/.github/images/dialog-light.gif?raw=true" height="350" alt="Dialogs light" /> | <img src="https://github.com/CodingByJerez/react-native-alert-notification/blob/master/.github/images/dialog-dark.gif?raw=true" height="350" alt="Dialogs Dark" /> |
+|                                                                           Theme Light                                                                           |                                                                          Theme Dark                                                                           |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| <img src="https://github.com/manhtruongwang/react-native-toast-dialog/blob/master/.github/images/dialog-light.gif?raw=true" height="350" alt="Dialogs light" /> | <img src="https://github.com/manhtruongwang/react-native-toast-dialog/blob/master/.github/images/dialog-dark.gif?raw=true" height="350" alt="Dialogs Dark" /> |
 
 ## Example Toast Notification
 
-|                                                                            Theme Light                                                                             |                                                                            Theme Dark                                                                            |
-| :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-| <img src="https://github.com/CodingByJerez/react-native-alert-notification/blob/master/.github/images/toast-light.gif?raw=true" height="350" alt="toasts light" /> | <img src="https://github.com/CodingByJerez/react-native-alert-notification/blob/master/.github/images/toast-dark.gif?raw=true" height="350" alt="toasts Dark" /> |
+|                                                                          Theme Light                                                                          |                                                                         Theme Dark                                                                          |
+| :-----------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| <img src="https://github.com/manhtruongwang/react-native-toast-dialog/blob/master/.github/images/toast-light.gif?raw=true" height="350" alt="toasts light" /> | <img src="https://github.com/manhtruongwang/react-native-toast-dialog/blob/master/.github/images/toast-dark.gif?raw=true" height="350" alt="toasts Dark" /> |
 
 ## Installation
 
 ### - Installing:
 
 ```sh
-yarn add react-native-alert-notification
+yarn add react-native-alert-dialog
 ```
 
 ### - Installing dependencies:
@@ -43,7 +43,7 @@ import { ALERT_TYPE, Dialog, AlertNotificationRoot, Toast } from 'react-native-a
 
 <AlertNotificationRoot>
   <View>
-    // dialog box
+    // dialog box with single button
     <Button
       title={'dialog box'}
       onPress={() =>
@@ -55,6 +55,21 @@ import { ALERT_TYPE, Dialog, AlertNotificationRoot, Toast } from 'react-native-a
         })
       }
     />
+    // dialog box with cancel & confirm buttons
+    <Button
+      title={'confirmation dialog'}
+      onPress={() =>
+        Dialog.show({
+          type: ALERT_TYPE.WARNING,
+          title: 'Confirm Action',
+          textBody: 'Are you sure you want to proceed with this action?',
+          cancelButton: 'Cancel',
+          confirmButton: 'Proceed',
+          onPressCancel: () => console.log('Action cancelled'),
+          onPressConfirm: () => console.log('Action confirmed'),
+        })
+      }
+    />
     // toast notification
     <Button
       title={'toast notification'}
@@ -63,6 +78,7 @@ import { ALERT_TYPE, Dialog, AlertNotificationRoot, Toast } from 'react-native-a
           type: ALERT_TYPE.SUCCESS,
           title: 'Success',
           textBody: 'Congrats! this is toast notification success',
+          paddingTop: 45, // custom top padding
         })
       }
     />
@@ -108,9 +124,13 @@ type IColors = {
 | type              | Defines the type ("Success", "Warning" or "Error") | true    |         | "SUCCESS", "DANGER", "WARNING" |
 | textBody          | The text body                                      |         |         | String                         |
 | button            | name button (for hide button: undefined)           |         |         | String                         |
+| cancelButton      | Text for cancel button in dual-button layout       |         |         | String                         |
+| confirmButton     | Text for confirm button in dual-button layout      |         |         | String                         |
 | autoClose         | Defines time auto close dialog box in ms           |         | face    | bool / number                  |
 | closeOnOverlayTap | allow close if click in overlay                    |         | true    | bool                           |
 | onPressButton     | (if not declared and isset button action is close) |         | String  | () => void                     |
+| onPressCancel     | Action when cancel button is pressed               |         |         | () => void                     |
+| onPressConfirm    | Action when confirm button is pressed              |         |         | () => void                     |
 | onShow            | action after end animation open                    |         |         | () => void                     |
 | onHide            | action after end animation close                   |         |         | () => void                     |
 
@@ -120,32 +140,38 @@ type IConfig = {
   title?: string;
   textBody?: string;
   button?: string;
+  cancelButton?: string;
+  confirmButton?: string;
   autoClose?: number | boolean;
   closeOnOverlayTap?: boolean;
   onPressButton?: () => void;
+  onPressCancel?: () => void;
+  onPressConfirm?: () => void;
   onShow?: () => void;
   onHide?: () => void;
 };
 ```
 
 ### Toast Notification Component
 
-| Name      | Description                                        | Require | Default | Type                           |
-| --------- | -------------------------------------------------- | ------- | ------- | ------------------------------ |
-| title     | The title text                                     |         |         | String                         |
-| type      | Defines the type ("Success", "Warning" or "Error") |         |         | "SUCCESS", "DANGER", "WARNING" |
-| textBody  | The text body                                      |         |         | String                         |
-| autoClose | Defines time auto close dialog box in ms           |         | 5000    | bool / number                  |
-| onPress   | action click in card                               |         |         | bool                           |
-| onShow    | event after end animation open                     |         |         | () => void                     |
-| onHide    | event after end animation close                    |         |         | () => void                     |
+| Name       | Description                                        | Require | Default | Type                           |
+| ---------- | -------------------------------------------------- | ------- | ------- | ------------------------------ |
+| title      | The title text                                     |         |         | String                         |
+| type       | Defines the type ("Success", "Warning" or "Error") |         |         | "SUCCESS", "DANGER", "WARNING" |
+| textBody   | The text body                                      |         |         | String                         |
+| autoClose  | Defines time auto close dialog box in ms           |         | 5000    | bool / number                  |
+| paddingTop | Specify custom top padding                         |         | 0       | number                         |
+| onPress    | action click in card                               |         |         | bool                           |
+| onShow     | event after end animation open                     |         |         | () => void                     |
+| onHide     | event after end animation close                    |         |         | () => void                     |
 
 ```ts
 type IConfig = {
   type?: ALERT_TYPE;
   title?: string;
   textBody?: string;
   autoClose?: number | boolean;
+  paddingTop?: number;
   titleStyle?: StyleProp<TextStyle>;
   textBodyStyle?: StyleProp<TextStyle>;
   onPress?: () => void;
@@ -166,9 +192,9 @@ Toast.hide();
 
 ## Author
 
-Rodolphe Jerez | [https://codingbyjerez.com](https://codingbyjerez.com)
+Truong Quang Manh | [https://vietgigs.vn](https://vietgigs.vn)
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+See the contributing guide to learn how to contribute to the repository and the development workflow.
 
 ## License
 

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "react-native-alert-notification",
+  "name": "react-native-alert-dialog",
   "version": "0.4.2",
-  "license": "MIT",
   "description": "Toast notification and dialog box notification for react native",
+  "license": "MIT",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
@@ -45,15 +45,15 @@
     "dialog",
     "modal"
   ],
-  "author": "Rodolphe Jerez <contact@codingbyjerez.com> (github.com/codingbyjerez)",
+  "author": "Truong Quang Manh <manhowls@gmail.com> (github.com/manhtruongwang)",
   "repository": {
     "type": "git",
-    "url": "https://github.com/CodingByJerez/react-native-alert-notification"
+    "url": "https://github.com/manhtruongwang/react-native-toast-dialog"
   },
   "bugs": {
-    "url": "https://github.com/CodingByJerez/react-native-alert-notification/issues"
+    "url": "https://github.com/manhtruongwang/react-native-toast-dialog/issues"
   },
-  "homepage": "https://github.com/CodingByJerez/react-native-alert-notification#readme",
+  "homepage": "https://github.com/manhtruongwang/react-native-toast-dialog#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

src/containers/Dialog.tsx

@@ -8,9 +8,13 @@ export type IConfigDialog = {
   title?: string;
   textBody?: string;
   button?: string;
+  cancelButton?: string;
+  confirmButton?: string;
   autoClose?: number | boolean;
   closeOnOverlayTap?: boolean;
   onPressButton?: () => void;
+  onPressCancel?: () => void;
+  onPressConfirm?: () => void;
   onShow?: () => void;
   onHide?: () => void;
 };
@@ -178,14 +182,35 @@ export class Dialog extends React.Component<IProps, IState> {
    */
   private _buttonRender = (): JSX.Element => {
     const { styles } = this.state;
-    const { type, onPressButton, button } = this.state.config!;
+    const { type, onPressButton, button, cancelButton, confirmButton, onPressCancel, onPressConfirm } = this.state.config!;
+
+    // If using the legacy single button approach
     if (button) {
       return (
         <TouchableOpacity style={StyleSheet.flatten([styles.button, styles[type]])} onPress={onPressButton ?? this._close}>
           <Text style={styles.buttonLabel}>{button}</Text>
         </TouchableOpacity>
       );
     }
+
+    // If using the new cancel/confirm buttons
+    if (cancelButton || confirmButton) {
+      return (
+        <View style={styles.buttonsContainer}>
+          {cancelButton && (
+            <TouchableOpacity style={StyleSheet.flatten([styles.button, styles.cancelButton])} onPress={onPressCancel ?? this._close}>
+              <Text style={styles.cancelButtonLabel}>{cancelButton}</Text>
+            </TouchableOpacity>
+          )}
+          {confirmButton && (
+            <TouchableOpacity style={StyleSheet.flatten([styles.button, styles[type]])} onPress={onPressConfirm ?? this._close}>
+              <Text style={styles.buttonLabel}>{confirmButton}</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      );
+    }
+
     return <></>;
   };
 
@@ -242,7 +267,13 @@ export class Dialog extends React.Component<IProps, IState> {
     const { visible, styles } = this.state;
     const { _OverlayCloseRender, _CardRender } = this;
     return (
-      <Modal transparent={true} visible={visible} animated={false} onShow={this._showModalHandler}>
+      <Modal
+        transparent={true}
+        supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
+        visible={visible}
+        animated={false}
+        onShow={this._showModalHandler}
+      >
         <Animated.View style={StyleSheet.flatten([styles.backgroundContainer, { opacity: this._opacity }])} />
         <_OverlayCloseRender />
         <_CardRender />
@@ -287,6 +318,11 @@ const __styles = (isDark: boolean) =>
       textAlign: 'center',
       color: Color.get('label', isDark),
     },
+    buttonsContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      marginTop: 12,
+    },
     button: {
       borderRadius: 50,
       height: 40,
@@ -295,6 +331,17 @@ const __styles = (isDark: boolean) =>
       alignItems: 'center',
       alignSelf: 'center',
       marginTop: 12,
+      marginHorizontal: 8,
+    },
+    cancelButton: {
+      backgroundColor: '#DDDDDD',
+      borderWidth: 1,
+      borderColor: '#CCCCCC',
+    },
+    cancelButtonLabel: {
+      color: isDark ? '#FFFFFF' : '#555555',
+      fontWeight: 'bold',
+      fontSize: 16,
     },
     buttonLabel: {
       color: '#fff',

src/containers/Toast.tsx

@@ -14,6 +14,7 @@ export type IConfigToast = {
   textBody?: string;
   titleStyle?: StyleProp<TextStyle>;
   textBodyStyle?: StyleProp<TextStyle>;
+  paddingTop?: number;
   onPress?: () => void;
   onShow?: () => void;
   onHide?: () => void;
@@ -90,7 +91,7 @@ export class Toast extends React.Component<IProps, IState> {
     const { isDark, config: configGeneral } = this.props;
     return (
       <SafeAreaInsetsContext.Consumer>
-        {(insets) => <ToastRender {...data} isDark={isDark} paddingTop={insets?.top} configGeneral={configGeneral} onClose={this._closedHandler} />}
+        {(insets) => <ToastRender {...data} isDark={isDark} paddingTop={data.paddingTop ?? insets?.top} configGeneral={configGeneral} onClose={this._closedHandler} />}
       </SafeAreaInsetsContext.Consumer>
     );
   }