Installation

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

or

yarn add react-native-alert-pro

Example

importReact,{Component}from"react";import{StyleSheet,View,TouchableOpacity,Text}from"react-native";importAlertProfrom"react-native-alert-pro";classExampleextendsComponent{render(){return(<Viewstyle={styles.container}><Textstyle={styles.title}>REACT NATIVE ALERT PRO</Text><Viewstyle={styles.buttonContainer}><TouchableOpacityonPress={()=>this.AlertPro.open()}style={styles.button}><Textstyle={styles.text}>CUSTOM</Text></TouchableOpacity></View><AlertProref={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>);}}conststyles=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"}});exportdefaultExample;

Dynamic AlertPro

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

Props

Available Custom Style

customStyles:{title:{...},// AlertPro's titlemessage:{...},// AlertPro's messagemask:{...},// The empty space areacontainer:{...},// AlertPro containerbuttonCancel:{...},// Cancel buttonbuttonConfirm:{...},// Confirm buttontextCancel:{...},// Cancel button's TexttextConfirm:{...}// Confirm button's Text}

Methods

Note

Give me a Star

License

Author