Introduction

An alert to notify users about new chat messages, something went wrong or everything is okay. It can be closed by tap, cancel button, automatically with closeInterval, pan responder up gesture or programmatically (this.dropDownAlertRef.closeAction()).

Installing

npm i react-native-dropdownalert --save

Or

yarn add react-native-dropdownalert

Example

import React, { Component } from 'react';
import { View, Button,StyleSheet } from 'react-native';
import DropdownAlert from 'react-native-dropdownalert';

class DropDownAlertExample extends Component {
  constructor(props) {
    super(props);
    this.dropdown = React.createRef();
  }

  showAlert = (type, title, message) => {
    this.dropdown.current.alertWithType(type, title, message);
  };

  render() {
    return (
      <View style={styles.container}>
        <DropdownAlert ref={this.dropdown} />
        <View style={styles.button}>
        <Button
          title="Info Alert"
          onPress={() => {
            this.showAlert('info', 'Info Alert', 'This is an information message.');
          }}
        />
        </View>
        <View style={styles.button}>
        <Button
          title="Warn Alert"
          onPress={() => {
            this.showAlert('warn', 'Warning Alert', 'This is a warning message.');
          }}
        />
          </View>
        <View style={styles.button}>
        <Button
          title="Error Alert"
          onPress={() => {
            this.showAlert('error', 'Error Alert', 'This is an error message.');
          }}
        />
        </View>
        <View style={styles.button}>
        <Button
          title="Custom Alert"
          onPress={() => {
            this.dropdown.current.alertWithType('custom', 'Custom Alert', 'This is a custom message.', {
              backgroundColor: '#006600',
              color: '#FFFFFF',
            });
          }}
        />
        </View>
      </View>
    );
  }
}

export default DropDownAlertExample;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    marginBottom: 20,
},
});

Tutorial

Coming Soon…