react-native-alert-pro
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    react-native-alert-pro

    npm version npm downloads Build Status

    • Super lightweight component
    • Smooth animation
    • Beautiful
    • Use method instead of state
    • Work like a Pro
    • Customize whatever you like
    • Support all orientations
    • Support both Android and iOS
    iOS Android

    Installation

    npm i react-native-alert-pro --save
    

    or

    yarn add react-native-alert-pro
    

    Example

    import React, { Component } from "react";
    import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
    import AlertPro from "react-native-alert-pro";
     
    class Example extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.title}>REACT NATIVE ALERT PRO</Text>
            <View style={styles.buttonContainer}>
              <TouchableOpacity
                onPress={() => this.AlertPro.open()}
                style={styles.button}
              >
                <Text style={styles.text}>CUSTOM</Text>
              </TouchableOpacity>
            </View>
     
            <AlertPro
              ref={ref => {
                this.AlertPro = ref;
              }}
              onConfirm={() => this.AlertPro.close()}
              title="Delete confirmation"
              message="Are you sure to delete the entry?"
              textCancel="Cancel"
              textConfirm="Delete"
              customStyles={{
                mask: {
                  backgroundColor: "transparent"
                },
                container: {
                  borderWidth: 1,
                  borderColor: "#9900cc",
                  shadowColor: "#000000",
                  shadowOpacity: 0.1,
                  shadowRadius: 10
                },
                buttonCancel: {
                  backgroundColor: "#4da6ff"
                },
                buttonConfirm: {
                  backgroundColor: "#ffa31a"
                }
              }}
            />
          </View>
        );
      }
    }
     
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: "center",
        backgroundColor: "#fff"
      },
      title: {
        fontSize: 20,
        marginTop: 120
      },
      buttonContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#FFFFFF"
      },
      button: {
        backgroundColor: "#4EB151",
        paddingVertical: 11,
        paddingHorizontal: 17,
        borderRadius: 3,
        marginBottom: 15
      },
      text: {
        color: "#FFFFFF",
        fontSize: 16,
        fontWeight: "600"
      }
    });
     
    export default Example;

    Dynamic AlertPro

    renderItem = (item, index) => (
        <View>
          <Button title=`OPEN AlertPro-${index}onPress={() => this[AlertPro + index].open()} />
          <AlertPro
            ref={ref => {
              this[AlertPro + index] = ref;
            }}
            title=`AlertPro-${index}`
            onConfirm={() => () => this[AlertPro + index].close()}
          />
        </View>
      );

    Props

    Prop Type Description Default
    title string AlertPro's title "Do you want to continue?"
    message string AlertPro's message ""
    showCancel boolean Show a Cancel button true
    showConfirm boolean Show a Confirm button true
    textCancel string Text display on Cancel button "No"
    textConfirm string Text display on Confirm button "Yes"
    closeOnPressMask boolean Close AlertPro when press on mask (The empty space area) true
    closeOnPressBack boolean Press back android to close Bottom Sheet (Android only) true
    useNativeDriver boolean Allowing native code to perform the animation false
    customStyles object Custom style to AlertPro {}
    onCancel function Event on Cancel button null
    onConfirm function Event on Confirm button null
    onClose function Callback function when AlertPro has closed null

    Available Custom Style

    customStyles: {
      title: {...}, // AlertPro's title
      message: {...}, // AlertPro's message
      mask: {...}, // The empty space area
      container: {...}, // AlertPro container
      buttonCancel: {...}, // Cancel button
      buttonConfirm: {...}, // Confirm button
      textCancel: {...}, // Cancel button's Text
      textConfirm: {...} // Confirm button's Text
     
    }

    Methods

    Method Name Description
    open Open AlertPro
    close Close AlertPro

    Note

    Always set ref to AlertPro and call each method by using this.AlertPro.methodName() like example above.

    Give me a Star

    If you think this project is helpful just give me a ⭐️ Star is enough because i don't drink coffee :D

    License

    This project is licensed under the MIT License - see the LICENSE.md file for details

    Author

    Made with ❤️ by NY Samnang.

    Install

    npm i react-native-alert-pro

    DownloadsWeekly Downloads

    236

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    18.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • nysamnang