Skip to content

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.

License

Notifications You must be signed in to change notification settings

Codigami/react-native-alert-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published