react-native-alert-view

0.1.0-alpha.15 • Public • Published

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

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.

Package Sidebar

Install

npm i react-native-alert-view

Weekly Downloads

4

Version

0.1.0-alpha.15

License

MIT

Last publish

Collaborators

  • geekykaran