React Native Alert View

React Native Alert View is a react native wrapper for CFAlertViewController iOS component that we use at Crowdfire

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

   • 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	white	Supported on iOS/Android
textColor	string	Any color supported here	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.