nysamnang / react-native-alert-pro

The Pro Version of React Native Alert (Android & iOS)

react-native-alert-pro

• 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.