https://github.com/codigami/react-native-alert-view
An alert view wrapper built on top of native components for iOS and Android with customizable controls for making extremely unique alerts and action sheets.
https://github.com/codigami/react-native-alert-view
actionsheet actionsheet-component alert alertview alertviewcontroller android ios react react-component react-components react-native react-native-component
Last synced: 10 months ago
JSON representation
An alert view wrapper built on top of native components for iOS and Android with customizable controls for making extremely unique alerts and action sheets.
- Host: GitHub
- URL: https://github.com/codigami/react-native-alert-view
- Owner: Codigami
- License: mit
- Created: 2017-04-12T11:09:49.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-01T19:30:30.000Z (almost 9 years ago)
- Last Synced: 2025-04-08T05:56:24.306Z (10 months ago)
- Topics: actionsheet, actionsheet-component, alert, alertview, alertviewcontroller, android, ios, react, react-component, react-components, react-native, react-native-component
- Language: Objective-C
- Homepage:
- Size: 86.9 KB
- Stars: 9
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Alert View
React Native Alert View is a react native wrapper for [CFAlertViewController](https://github.com/Codigami/CFAlertViewController) iOS component that we use at [Crowdfire](https://crowdfireapp.com)
This library currently supports only iOS but android support is coming very soon.
# Installation
1. Install `react-native-alert-view` from npm
`yarn add react-native-alert-view` OR `npm install --save react-native-alert-view`
2. Setup your project to use the installed library
## Install using Cocoapods (recommended)
We assume that your Cocoapods is already configured. If you are new to Cocoapods, have a look at the [documentation](https://guides.cocoapods.org/)
- Add `pod 'react-native-alert-view', :path => '../node_modules/react-native-alert-view'` to your Podfile.
This will
- Install the pod(s) by running `pod install` in terminal (in folder where Podfile file is located).
## Install using source
- Install `CFAlertViewController` in your project using the instructions here: https://github.com/Codigami/CFAlertViewController#install-using-source-file
- Install `RNAlertView` in your project using the same instructions
# Options
React Native Alert View only supports a subset of functionalities provided by CFAlertViewController. It exposes a method `show` which can be used as:
```
ReactNativeAlertView.show(options, callback)
```
## Suported options
#### Alert options
| Option | Type | Allowed values | Default | Platform support |
|----------------|--------|--------------------------------------------|---------|-------------------------------------------------------------------------------------------------------------------------------------------|
| title | string | Any string | `''` | Supported on iOS/Android |
| message | string | Any string | `''` | Supported on iOS/Android |
| preferredStyle | string | One of `actionSheet`/`alert` | `alert` | iOS: Supports both Android: Defaults to `alert`. Option is ignored |
| textAlignment | string | One of `left`/`right`/`center` | `left` | iOS: Supports all values Android: Defaults to `left`. Option is ignored |
| buttons | Array | List of `button`'s | `[]` | iOS: Supports multiple buttons Android: Requires 2 buttons. First button is used for a positive action. Second one for a positive action. |
#### Button options
| Option | Type | Allowed values | Default | Platform support |
|-----------------|--------|--------------------------------------------------------------------------------------|-------------|------------------------------------------------------------------------------|
| title | string | Any string | `''` | Supported on iOS/Android |
| style | string | One of `default`/`cancel`/`destructive` | `default` | iOS: Supports all values Android: Defaults to `default`. Option is ignored |
| alignment | string | One of `left`/`right`/`center`/`justified` | `justified` | iOS: Supports all values Android: Defaults to `justified`. Option is ignored |
| backgroundColor | string | Any color supported [here](https://facebook.github.io/react-native/docs/colors.html) | `white` | Supported on iOS/Android |
| textColor | string | Any color supported [here](https://facebook.github.io/react-native/docs/colors.html) | `white` | Supported on iOS/Android |
# Usage
```
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import ReactNativeAlertView from 'react-native-alert-view'
const TestComponent = React.createClass({
show() {
ReactNativeAlertView.show({
title: 'title',
message: 'message',
preferredStyle: 'actionSheet',
textAlignment: 'center',
buttons: [{
title: 'string 1',
style: 'destructive',
alignment: 'center',
backgroundColor: '#123456',
}, {
title: 'string 2',
style: 'default',
alignment: 'justified',
backgroundColor: '#234989',
textColor: 'yellow'
}]
}, (index) => {
alert(`Button with index ${index} tapped`);
});
},
render() {
return (
Click to show alert view
);
}
});
export default TestComponent;
```
# License
MIT © 2017 Crowdfire Inc.