NOTICE
This package was created just when I started react-native. And I thought I had to fix a lot of this package, and I decided to put a new named module in npm and create a new repository.
Please check the repo below
Thank you 🤟
react-native-awesome-alert
This package offers customizable modal components with
INSTALLATION
npm
Run npm install react-native-awesome-alert --save
yarn
Run yarn add react-native-awesome-alert
DEMO
- Works well on both iOS and Android
- Fully customizable style (example below)
API
Props
The props for react-native-awesome-alert share similarities with react-native-check-box (author : crazycodeboy)
| Prop | Type | Default | Description |
|---|---|---|---|
styles | object | AwesomeAlert.style.js | please refer to STYLING section |
modalProps | object | original react-native Modal Props. please refer to offcial Document | |
leftCheck | bool | true | set where the checkbox will be located. default is left |
checkedImage | element | Default image | Custom checked Image |
unCheckedImage | element | Default image | Custom unchecked Image |
checkBoxColor | string | black | Tint color of the checkbox image |
Methods
alert(title, messageView, buttons)
| Arguments | type | default | optional |
|---|---|---|---|
title | string | none | false |
messageView | element | none | false |
buttons | array | none | false |
neverAskAlert(title, messagesView, buttons, checkText = " ")
| Arguments | type | default | optional |
|---|---|---|---|
title | string | none | false |
messageView | element | none | false |
buttons | array | none | false |
checkText | string | " " | true |
randomAskAlert(title, messagesView, buttons, checkText = " ", invisibleTime)
| Arguments | type | default | optional |
|---|---|---|---|
title | string | none | false |
messageView | element | none | false |
buttons | array | none | false |
checkText | string | " " | true |
invisibleTime | number(minute) | none | false |
HOW TO USE
import CheckAlert from "react-native-awesome-alert" const NeverAskView = ( <View style={styles.sampleView}> <Text style={styles.sampleViewText}>This is "Do not ask again" checkable alert</Text> </View> ) ... export default class App extends Component { onPressSimpleAlert = () => { this.checkAlert.alert("Hello!!", SimpleView, [ { text: "OK", onPress: () => console.log("OK touch") }, { text: "Cancel", onPress: () => console.log("Cancel touch") } ]) } onPresshNeverAskAlert = () => { this.checkAlert.neverAskAlert( "Hello CheckAlert", NeverAskView, [ { text: "OK", onPress: () => console.log("OK touch"), id: "helloAlert" }, { text: "Cancel", onPress: () => console.log("Cancel touch") } ], "Do not ask again" ) } onPresshNot24HAlert = () => { this.checkAlert.randomAskAlert( "Hello CheckAlert", RandomAskView, [ { text: "OK", onPress: () => console.log("OK touch"), id: "helloAlert2" }, { text: "Cancel", onPress: () => console.log("Cancel touch") } ], "Do not ask for 3 minutes", 3 ) } render() { return ( <View style={styles.container}> <CheckAlert styles={{ modalContainer: { backgroundColor: "rgba(49,49,49,0.8)" }, checkBox: { padding: 10 }, modalView: { marginBottom: 10, borderRadius: 0 } }} ref={ref => (this.checkAlert = ref)} // available Modal's props options: https://facebook.github.io/react-native/docs/modal.html modalProps={{ transparent: true, animationType: "slide", onShow: () => alert("onShow!") }} checkBoxColor="red" /> <TouchableOpacity style={styles.touchButton} onPress={this.onPressSimpleAlert}> <Text style={styles.toucaButtonTxt}>simple Alert</Text> </TouchableOpacity> <TouchableOpacity style={styles.touchButton} onPress={this.onPresshNeverAskAlert} > <Text style={styles.toucaButtonTxt}>neverAsk Alert</Text> </TouchableOpacity> <TouchableOpacity style={styles.touchButton} onPress={this.onPresshNot24HAlert}> <Text style={styles.toucaButtonTxt}>randomAsk Alert</Text> </TouchableOpacity> </View> ) } } The method is similar to React Native's Alert, however be careful when passing the button's id. The id is used like a primary Key in a local DB, and will cause a warning if the id is not passed properly.
STYLING
export default { modalContainer: { flex: 1, backgroundColor: 'rgba(49,49,49, 0.7)', justifyContent: 'center', alignItems: 'center', }, modalView: { backgroundColor: '#rgb(235,233,227)', borderRadius: 15, width: 275, borderColor: 'black', borderWidth: StyleSheet.hairlineWidth, }, checkBox: { marginBottom: 10, }, checkBoxText: { marginLeft: 4, alignSelf: 'center', fontSize: 15, justifyContent: 'center', }, titleText: { fontSize: 17, fontWeight: '600', padding: 15, alignSelf: 'center', }, buttonContainer: { flexDirection: 'row', justifyContent: 'flex-end', borderColor: 'gray', borderTopWidth: StyleSheet.hairlineWidth, }, buttonText: { fontSize: 17, }, button: { justifyContent: 'center', alignItems: 'center', padding: 15, borderColor: 'gray', }, }The above keys are used for styling the entire view. You just pass the object value like this
<AwesomeAlert styles={{ modalContainer: { backgroundColor: 'rgba(49,49,49,0.8)' }, checkBox: { padding: 10 }, modalView: { marginBottom: 10, borderRadius: 0 }, }} />WHAT YOU NEED TO KNOW
- If the alert is set to not be visible again, the action of the
button with the IDis executed. - The checkbox is activated only when the
button with the IDis pressed.
CONTRIBUTING
The PR of talented developers is always welcome and appreciated
including .md file
AUTHOR
- heyman333, Mobile developer, Seoul, South Korea
- [email protected]
ROADMAP
- define index.d.ts file for typescript
- optimize logic
