Socket
Socket
Sign inDemoInstall

react-native-alert-notification

Package Overview
Dependencies
606
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-alert-notification

Toast notification and dialog box notification for react native


Version published
Maintainers
1
Weekly downloads
1,414
increased by13.03%

Weekly downloads

Readme

Source

react-native-alert-notification

Example Dialog Box

Theme LightTheme Dark
Dialogs lightDialogs Dark

Example Toast Notification

Theme LightTheme Dark
toasts lighttoasts Dark

Installation

- Installing:

yarn add react-native-alert-notification

- Installing dependencies:

  • For Native project:
yarn add react-native-safe-area-context

pod install
  • For Expo project:
expo install react-native-safe-area-context

Usage

import { ALERT_TYPE, Dialog, AlertNotificationRoot, Toast } from 'react-native-alert-notification';

<AlertNotificationRoot>
  <View>
    // dialog box
    <Button
      title={'dialog box'}
      onPress={() =>
        Dialog.show({
          type: ALERT_TYPE.SUCCESS,
          title: 'Success',
          textBody: 'Congrats! this is dialog box success',
          button: 'close',
        })
      }
    />
    // toast notification
    <Button
      title={'toast notification'}
      onPress={() =>
        Toast.show({
          type: ALERT_TYPE.SUCCESS,
          title: 'Success',
          textBody: 'Congrats! this is toast notification success',
        })
      }
    />
  </View>
</AlertNotificationRoot>;

Documentation:

Root Component

A React node that will be most likely wrapping your whole app.

NameDescriptionRequireDefaultType
themeselect theme light dark (by default is auto)auto'light','dark'
colorscustom colors[IColors, IColors]
dialogConfigconfig dialog box global{closeOnOverlayTap:bool, autoClose:bool / number}
toastConfigconfig toast global{autoClose:bool / number, titleStyle?: StyleProp , textBodyStyle?: StyleProp}
type IProps = {
  dialogConfig?: Pick<IConfigDialog, 'closeOnOverlayTap' | 'autoClose'>;
  toastConfig?: Pick<IConfigToast, 'autoClose' | 'titleStyle' | 'textBodyStyle'>;
  theme?: 'light' | 'dark';
  colors?: [IColors, IColors] /** ['light_colors' , 'dark_colors'] */;
};
type IColors = {
  label: string;
  card: string;
  overlay: string;
  success: string;
  danger: string;
  warning: string;
};

Dialog Box Component

NameDescriptionRequireDefaultType
titleThe title textString
typeDefines the type ("Success", "Warning" or "Error")true"SUCCESS", "DANGER", "WARNING"
textBodyThe text bodyString
buttonname button (for hide button: undefined)String
autoCloseDefines time auto close dialog box in msfacebool / number
closeOnOverlayTapallow close if click in overlaytruebool
onPressButton(if not declared and isset button action is close)String() => void
onShowaction after end animation open() => void
onHideaction after end animation close() => void
type IConfig = {
  type: ALERT_TYPE;
  title?: string;
  textBody?: string;
  button?: string;
  autoClose?: number | boolean;
  closeOnOverlayTap?: boolean;
  onPressButton?: () => void;
  onShow?: () => void;
  onHide?: () => void;
};

Toast Notification Component

NameDescriptionRequireDefaultType
titleThe title textString
typeDefines the type ("Success", "Warning" or "Error")"SUCCESS", "DANGER", "WARNING"
textBodyThe text bodyString
autoCloseDefines time auto close dialog box in ms5000bool / number
onPressaction click in cardbool
onShowevent after end animation open() => void
onHideevent after end animation close() => void
type IConfig = {
  type?: ALERT_TYPE;
  title?: string;
  textBody?: string;
  autoClose?: number | boolean;
  titleStyle?: StyleProp<TextStyle>;
  textBodyStyle?: StyleProp<TextStyle>;
  onPress?: () => void;
  onShow?: () => void;
  onHide?: () => void;
};

For Close popup

// For Dialog Box
Dialog.hide();

// For Toast Notification
Toast.hide();

Author

Rodolphe Jerez | https://codingbyjerez.com

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Keywords

FAQs

Last updated on 29 Dec 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc