React Native Super Alert - 3 alerts in just only component

Overview

Screenshot

React Native Super Alert is a component where you can use various types of alerts and notifications without having to import the library on all screens..

downloads

Installation

npm i react-native-super-alert --save
or
yarn add react-native-super-alert
Load the library in Root file of your application (e.g. app.js)
import SuperAlert from "react-native-super-alert";

export default function App() {
    return (
            <View>
                <AppContainer /> 
                <SuperAlert /> {/* <--- Load Super Alert here */}
            </View>
        );
    }
}

NOTE: This component will replace the default (alert) action from React Native

Usage

Default alert

After import Super alert in Root of application, you can call the component using the code bellow

Default

   // alert('Title of alert', 'Message of alert', { Object props })

Example for default alert without confirm

    alert(
        'Hello!!', // This is a title
        "This is a Super Alert" // This is a alert message
    )

Loading alert from the corners of screen

    alert(
        'Hello!!', // This is a title
        "This is a Super Alert", // This is a alert message
        {
            position: 'top' // top, bottom, left or right,
        }
    )
Prop Type Description Default
position (Optional) string Using alert in corners (Top, Bottom, Left, Right) ''

Using confirm and cancel action

Confirm

Example

    alert(
        'Hello!!', // This is a title
        "This is a Super Alert", // This is a alert message
        {
            textConfirm: 'Confirm', // Label of button confirm
            textCancel: 'Cancel', // Label of button cancel
            onConfirm: () => confirmClick(), // Call your confirm function 
            onCancel: () => cancelClick() // Call your cancel function 
        }
    )

Then create the functions to confirm and cancel action

  confirmClick = () => {
    console.log('Confirm Action')
  }

  cancelClick = () => {
    console.log('Cancel Action')
  }

Note: You can use the confirm params in all alert types

Other types

BottomSheet

BottomSheet

    alert(
        'Hello!!', // This is a title
        "This is a Super Alert", // This is a alert message
        {
            type: 'bottomsheet'
        }
    )

Props of BottomSheet

Prop Type Description Default
bottomSheetHeight (Optional) number Alert BottomSheet height 180

Flash Message

Alt Text

    alert(
        'Title',
        'This is model of default alert, thanks for use the component',
        {
            type: 'flashmessage',
            option: 'danger', // danger | warning | info | success
            timeout: 3
        }
    )

Props of Flash Message

Prop Type Description Default
flashMessageHeight (Optional) number Flash Message height 110
option (Optional) string Select the Color Scheme (danger,warning,info or success) ''
timeout (Optional) number Total of seconds to close the alert 5

Example with React Navigation Component

Alt Text

Global Props

Prop Type Description Default
Type (Optional) string Select the type of alert (alert,bottomsheet,flashmessage) 'alert'
useNativeDriver (Optional) boolean Use native driver false
textConfirm (Optional) string Button confirm label 'OK'
textCancel (Optional) string Button cancel label ''

Customize Alerts

You can customize the alert according to your theme

Place your style object in the customStyle props

<SuperAlert customStyle={customStyle} />

Classes of customization

Prop Description
container Customize the container style
buttonCancel Customize the button cancel style
buttonConfirm Customize the button confirm style
textButtonCancel Customize the button cancel label style
textButtonConfirm Customize the button confirm label style
title Customize the title text style
message Customize the message text style

Example of custom style object

  const customStyle = {
    container: {
      backgroundColor: '#e8e8e8',
      borderRadius: 0,
    },
    buttonCancel: {
      backgroundColor: '#b51919',
      borderRadius: 0,
    },
    buttonConfirm: {
      backgroundColor: '#4490c7',
      borderRadius: 0,
    },
    textButtonCancel: {
        color: '#fff',
        fontWeight: 'bold'
    },
    textButtonConfirm: {
        color: '#fff',
        fontWeight: 'bold'
    },
    title: {
      color: '#003d69',
      fontSize: 15
    },
    message: {
      color: '#4f4f4f',
      fontSize: 12
    }
  }

Example App

You can download example app from Example App this link

Author

By Alan Ribeiro

If you think the project is useful, please donate or give me a star!

paypal

License

MIT

You might also like...
Get thumbnail from local media. Currently, it only supports for video.

react-native-thumbnail Get thumbnail from local media. Currently, it only supports for video. Getting started $ npm install react-native-thumbnail --s

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

react-native-page-swiper ★83 - Page Swiper component for React Native.

react-native-page-swiper Page Swiper component for React Native. Getting Started Installation Basic Usage Properties Examples Development Installation

Comments
  • Call as function

    Call as function

    is it possible to call as function in a container, instead of changing all over project ?

    for example,. when i press a button, is it possible to call alert as SuperAlert.alert(......) ?

    opened by pkkasu 1
Owner
Alan Ribeiro
Alan Ribeiro
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Arafat Zahan 11 Aug 2, 2022
A simple alert to notify users about new chat messages, something went wrong or everything is ok.

react-native-dropdownalert info warn error success Table of contents Support Installation Demo Usage Props Caveats An alert to notify users about new

Brian 1.7k Sep 30, 2022
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more

react-native-hero ?? A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more. Why not

Brandon Him 249 Sep 1, 2022
A super simple react-native implementation of the UIStepper control from iOS.

react-native-simple-stepper A simple react-native implementation of the UIStepper control from iOS. To note, customization is available, see Props for

Brian 111 Jul 4, 2022
Super tiny color input ranges for React.

react-color-range · Tiny color input for React, made with native input ranges. react-color-range leverages the native input type="range" and CSS linea

Javier Bórquez 3 Jan 16, 2022
Super performant, lightweight, fully customizable emoji picker 🚀

?? rn-emoji-keyboard A lightweight, fully customizable emoji picker, written as React Native component (without native elements). Designated to be use

TWG 184 Sep 28, 2022
react-native-timeline-theme ★25 - Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList

React Native TimeLine Theme Collection of TimeLine theme. This package only use flexbox(without absolute) & FlatList Get Started Inspired by react-nat

Zaku 43 Oct 9, 2021
Compress video for react native. Only for iOS, Android will be coming.

react-native-compress Compress local video for react native. Only for iOS, Android will be coming. Getting started $ npm install react-native-compress

Hau Vo 33 Nov 4, 2021
Configurable react-native charting library– (right now just bar charts).

react-native-charts Configurable, animated react-native charting library– (right now just bar charts). Example import { BarChart } from 'react-native-

Thinkster Math 85 Aug 6, 2022
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Erick Estevão Riva Pramio 6 Oct 25, 2021