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.
MIT License
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.
Install react-native-alert-view
from npm
yarn add react-native-alert-view
OR npm install --save react-native-alert-view
Setup your project to use the installed library
We assume that your Cocoapods is already configured. If you are new to Cocoapods, have a look at the documentation
pod 'react-native-alert-view', :path => '../node_modules/react-native-alert-view'
to your Podfile.pod install
in terminal (in folder where Podfile file is located).CFAlertViewController
in your project using the instructions here: https://github.com/Codigami/CFAlertViewController#install-using-source-file
RNAlertView
in your project using the same instructionsReact 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)
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. |
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 |
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;
MIT © 2017 Crowdfire Inc.