react-native-alert-view
Version:
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.
108 lines (77 loc) • 5.52 kB
Markdown
# 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 (
<TouchableOpacity onPress={this.show} style={{marginTop: 20}}>
<Text>Click to show alert view</Text>
</TouchableOpacity>
);
}
});
export default TestComponent;
```
# License
MIT © 2017 Crowdfire Inc.