0.4.5 • Published 6 years ago
react-native-awesome-alert v0.4.5
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 ✔️check options in React Native
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 ID
is executed. - The checkbox is activated only when the
button with the ID
is pressed.
CONTRIBUTING
The PR of talented developers is always welcome and appreciated
including .md file😁
AUTHOR
- heyman333, Mobile developer, Seoul, South Korea
- amazingmobdev@gmail.com
ROADMAP
- define index.d.ts file for typescript
- optimize logic