rbravo/react-native-dropdownalert

A simple alert to notify users about new chat messages, something went wrong or everything is ok.

react-native-dropdownalert

info	warn	error	success

Table of contents

1. Support
2. Installation
3. Demo
4. Usage
5. Props
6. Caveats

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()).

Support

react-native version	package version	reason
0.50.0	>=3.2.0	Included SafeAreaView (iPhone X)
0.44.0	>=2.12.0	Adopted ViewPropTypes

Installation

• npm i react-native-dropdownalert --save
• yarn add react-native-dropdownalert

Demo

Usage

import React, {useRef, useEffect} from 'react';
import {View} from 'react-native';
import DropdownAlert from 'react-native-dropdownalert';

const App = () => {
  let dropDownAlertRef = useRef();

  useEffect(() => {
    _fetchData();
  }, []);

  const _fetchData = async () => {
    try {
      // alertWithType parameters: type, title, message, payload, interval.
      // payload object that includes a source property overrides the image source prop. (optional: object)
      // interval takes precedence over the closeInterval prop. (optional: number)
      dropDownAlertRef.alertWithType('info', 'Info', 'Start fetch data');
      const response = await fetch('https://httpbin.org/uuid');
      const {uuid} = await response.json();
      dropDownAlertRef.alertWithType('success', 'Success', uuid);
      throw 'Error fetch data'; // example error
    } catch (error) {
      dropDownAlertRef.alertWithType('error', 'Error', error);
    }
  };

  // To ensures that it overlaps other UI components
  // place it as the last component in the document tree.
  return (
    <View>
      <DropdownAlert
        ref={(ref) => {
          if (ref) {
            dropDownAlertRef = ref;
          }
        }}
      />
    </View>
  );
};

export default App;

Caveats

• Modals can overlap DropdownAlert if it is not inside the modal's document tree.
• It is important you place the DropdownAlert ABOVE the StackNavigator.
• DropdownHolder example #1
• DropdownHolder example #2
• Redux + router flux example
• Wix Navigation example
• Repo: react-native-dropdownalert-router-sample Thanks @mitsuruog and @articolo

Inspired by: RKDropdownAlert