react-native-alert-dialogues

A simple and fully customisable React Native component that shows success,error,warning and confirmation alerts.

Features

• Easy to use
• Consistent look and feel on iOS and Android
• Can show success alert dialogues
• Can show error alert dialogues
• Can show warning alert dialogues
• Can show confirmation alert dialogues
• Customisable UI

Installation

npm install --save react-native-alert-dialogues
OR
yarn add npm i react-native-alert-dialogues

Usage

Just put the Alert tag before the last closing tag of the component

import React, { Component } from 'react';
import {View} from 'react-native';
import {Alert} from 'react-native-alert-dialogues';

class Example extends Component {
  render() {
    return (
      <View>
      <Alert
          visible={this.state.showAlert}
          type= "success"
          okPressed={() =>
            this.setState({
              showAlert: false,
            })
          }
          message= "Message to show."
        />
        </View>
    );
  }
}

Common properties

name	description	type	Values
type	Type of alert to show	String	'error','success','confirm,'warning'
visible	Visible state of the alert	Boolean	true or false
title	Title of alert	String	Any String Value
message	Message of alert	String	Any String Value
opacity	Background opacity of dialogue	Number	between 0.0 - 1.0
buttonTitle	Title of button in alert	String	Any String Value
okTitle	Title of +ve button	String	Any String Value
cancelTitle	Title of cancel button	String	Any String Value
iconImage	Custome image source for icon	Image Soucrce	Any String Value
hideIcon	Hide the icon in alert	Boolean	true or false
buttonColor	Button Color of the dialogue	String	Any Color Value

Callbacks

name	description	type	Values
okPressed	Callback function on ok press	function	function
confirmed	Callback function on confirm press (confirmation alert)	function	function
cancelled	Callback function on cancel press (confirmation alert)	function	function

Example

git clone https://github.com/Ali-Haider-Ch/react-native-alert-dialogues
cd react-native-alert-dialogues/examples
npm install
npm run ios # or npm run android

Copyright and License

MIT License

Copyright 2020-2022 Ali Hayder. All rights reserved.