react-native-dropdownalert

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

Usage no npm install needed!

<script type="module">
  import reactNativeDropdownalert from 'https://cdn.skypack.dev/react-native-dropdownalert';
</script>

README

react-native-dropdownalert

Platform npm version npm version License CI

info warn error success
screenshot screenshot screenshot screenshot

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

screenshot

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

Inspired by: RKDropdownAlert