rna

react-native-alert-pro

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

Showing:

Popularity

Downloads/wk

238

GitHub Stars

72

Maintenance

Last Commit

2yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

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
iOSAndroid

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

PropTypeDescriptionDefault
titlestringAlertPro's title"Do you want to continue?"
messagestringAlertPro's message""
showCancelbooleanShow a Cancel buttontrue
showConfirmbooleanShow a Confirm buttontrue
textCancelstringText display on Cancel button"No"
textConfirmstringText display on Confirm button"Yes"
closeOnPressMaskbooleanClose AlertPro when press on mask (The empty space area)true
closeOnPressBackbooleanPress back android to close Bottom Sheet (Android only)true
useNativeDriverbooleanAllowing native code to perform the animationfalse
customStylesobjectCustom style to AlertPro{}
onCancelfunctionEvent on Cancel buttonnull
onConfirmfunctionEvent on Confirm buttonnull
onClosefunctionCallback function when AlertPro has closednull

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 NameDescription
openOpen AlertPro
closeClose 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial