# 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. Latest version **0.1.0-alpha.15** (published 2017-04-13) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-alert-view pnpm add react-native-alert-view yarn add react-native-alert-view bun add react-native-alert-view ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0-alpha.15 | | Published | 2017-04-13 | | First published | 2017-04-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 9 | | Author | Karan Thakkar | | Maintainers | geekykaran | | Keywords | react, react-native, react-component, alert, ios, android, action, sheet, ActionSheet | ## Links - npm: https://www.npmjs.com/package/react-native-alert-view - Repository: https://github.com/Codigami/react-native-alert-view - Homepage: https://github.com/Codigami/react-native-alert-view#readme - Issues: https://github.com/Codigami/react-native-alert-view/issues - npm.io page: https://npm.io/package/react-native-alert-view ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.0-alpha.15 (latest) — 2017-04-13 - 0.1.0-alpha.14 — 2017-04-12 - 0.1.0-alpha.13 — 2017-04-12 - 0.1.0-alpha.12 — 2017-04-12 - 0.1.0-alpha.11 — 2017-04-12 - 0.1.0-alpha.10 — 2017-04-12 - 0.1.0-alpha.9 — 2017-04-12 - 0.1.0-alpha.8 — 2017-04-12 - 0.1.0-alpha.7 — 2017-04-12 - 0.1.0-alpha.6 — 2017-04-12 - 0.1.0-alpha.5 — 2017-04-12 - 0.1.0-alpha.4 — 2017-04-12 - 0.1.0-alpha.3 — 2017-04-12 - 0.1.0-alpha.2 — 2017-04-12 - 0.1.0-alpha.1 — 2017-04-12 ## 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. --- _Source: https://npm.io/package/react-native-alert-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._