Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heyman333/react-native-awesome-alert
🔔 Customizable modal components with ✔️check options in React Native
https://github.com/heyman333/react-native-awesome-alert
List: react-native-awesome-alert
alert android awesome-list ios modal opensource react react-native
Last synced: about 1 month ago
JSON representation
🔔 Customizable modal components with ✔️check options in React Native
- Host: GitHub
- URL: https://github.com/heyman333/react-native-awesome-alert
- Owner: heyman333
- License: mit
- Created: 2017-10-27T18:25:08.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-19T17:42:07.000Z (over 5 years ago)
- Last Synced: 2024-05-23T07:15:02.312Z (7 months ago)
- Topics: alert, android, awesome-list, ios, modal, opensource, react, react-native
- Language: JavaScript
- Homepage:
- Size: 575 KB
- Stars: 51
- Watchers: 2
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-awesome-alert ★35 - Customizable modal components with ✔️check options in React Native (Components / UI)
- awesome-reactnative-ui - react-native-awesome-alert - size_restricted.gif)| (Others)
- awesome-react-native - react-native-awesome-alert ★35 - Customizable modal components with ✔️check options in React Native (Components / UI)
- awesome-reactnative-ui - react-native-awesome-alert - size_restricted.gif)| (Others)
- awesome-react-native - react-native-awesome-alert ★35 - Customizable modal components with ✔️check options in React Native (Components / UI)
- awesome-react-native - react-native-awesome-alert ★35 - Customizable modal components with ✔️check options in React Native (Components / UI)
README
## 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-hide-modal](https://github.com/heyman333/react-native-hide-modal)
## react-native-awesome-alert
[ ](https://github.com/heyman333/react-native-awesome-alert/pulls)
[](https://raw.githubusercontent.com/heyman333/react-native-awesome-alert/master/LICENSE)
[](https://www.npmjs.com/package/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](https://github.com/crazycodeboy/react-native-check-box) (author : [crazycodeboy](https://github.com/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](https://facebook.github.io/react-native/docs/modal.html) |
| `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
```js
import CheckAlert from "react-native-awesome-alert"
const NeverAskView = (
This is "Do not ask again" checkable alert
)
...
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 (
(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"
/>
simple Alert
neverAsk Alert
randomAsk Alert
)
}
}
```
#### 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
```js
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
```js
```
### 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](https://github.com/heyman333), Mobile developer, Seoul, South Korea
- [[email protected]](mailto:[email protected])
### ROADMAP
- [ ] define index.d.ts file for typescript
- [ ] optimize logic