2.0.0 • Published 2 years ago

react-native-awesome-alerts v2.0.0

Weekly downloads
2,931
License
ISC
Repository
github
Last release
2 years ago

React Native Awesome Alerts

Demo (Watch it on YouTube)

alt text

Getting Started

Installation

$ npm i react-native-awesome-alerts --save

Basic Usage

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

import AwesomeAlert from 'react-native-awesome-alerts';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { showAlert: false };
  };

  showAlert = () => {
    this.setState({
      showAlert: true
    });
  };

  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

  render() {
    const {showAlert} = this.state;

    return (
      <View style={styles.container}>

        <Text>I'm AwesomeAlert</Text>
        <TouchableOpacity onPress={() => {
          this.showAlert();
        }}>
          <View style={styles.button}>
            <Text style={styles.text}>Try me!</Text>
          </View>
        </TouchableOpacity>

        <AwesomeAlert
          show={showAlert}
          showProgress={false}
          title="AwesomeAlert"
          message="I have a message for you!"
          closeOnTouchOutside={true}
          closeOnHardwareBackPress={false}
          showCancelButton={true}
          showConfirmButton={true}
          cancelText="No, cancel"
          confirmText="Yes, delete it"
          confirmButtonColor="#DD6B55"
          onCancelPressed={() => {
            this.hideAlert();
          }}
          onConfirmPressed={() => {
            this.hideAlert();
          }}
        />
      </View>
    );
  };
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  button: {
    margin: 10,
    paddingHorizontal: 10,
    paddingVertical: 7,
    borderRadius: 5,
    backgroundColor: "#AEDEF4",
  },
  text: {
    color: '#fff',
    fontSize: 15
  }
});

alt text

Props

Basic

PropTypeDescriptionDefault
showbooleanShow / Hide awesome alertfalse
animatedValuenumberAnimated value0.3
useNativeDriverbooleanUse native driver for animationsfalse
showProgressbooleanShow / Hide progress barfalse
titlestringTitle text to displayhidden
messagestringMessage text to displayhidden
closeOnTouchOutsideboolDismiss alert on clicking outsidetrue
closeOnHardwareBackPressboolDismiss alert on hardware back press (android)true
showCancelButtonboolShow a cancel buttonfalse
showConfirmButtonboolShow a confirmation buttonfalse
cancelTextstringCancel button textCancel
confirmTextstringConfirm button textConfirm
onCancelPressedfuncAction to perform when Cancel is pressed-
onConfirmPressedfuncAction to perform when Confirm is pressed-
onDismissfuncCallback for when alert is dismissed-
customViewobjectCustom view to render inside alertnull
modalPropsobjectAdditional props to pass for Modal-
confirmButtonTestIDstringConfirm button testIDawesome-alert-confirm-btn
cancelButtonTestIDstringCancel button testIDawesome-alert-cancel-btn

Styling

PropTypeDescriptionDefault
alertContainerStyleobjectAlert parent container style-
overlayStyleobjectOverlay style-
progressSizestringSize of activity indicator-
progressColorstringColor of activity indicator-
contentContainerStyleobjectAlert popup style-
contentStyleobjectAlert popup content style-
titleStyleobjectTitle style-
messageStyleobjectMessage style-
actionContainerStyleobjectAction container style-
cancelButtonColorstringBackground color#D0D0D0
confirmButtonColorstringBackground color#AEDEF4
cancelButtonStyleobjectCancel button style-
cancelButtonTextStyleobjectCancel button text style-
confirmButtonStyleobjectConfirm button style-
confirmButtonTextStyleobjectConfirm button text style-

Tests

For automated tests, buttons default to data-testid='awesome-alert-cancel-btn' and data-testID='awesome-alert-confirm-btn' properties for the cancel and confirm buttons, respectively. However, feel free to pass in your own via the props.

Inspiration

Pedant: sweet-alert-dialog (Github)

Questions

Feel free to Contact me or Create an issue

License

Released under the Mit License