Usage Guide

Basics

When you call an alert function, the alert is added to a queue. The queue is processed in order, so you can call multiple alerts in a row and they will be shown one after another. Only one alert can be active (= shown) at a time though.

Alerts can be called from anywhere in your app, even from within other alerts and share values between them which makes chaining alerts/dialogs super easy.

Container

We do not need to wrap React in a provider but we still need some way to display the alerts. For this we use the AlertContainer component. It should be placed at the root of your app, so alerts can be displayed anywhere in the app. Its responsibility is to display the active alert.

import { AlertContainer } from "react-native-paper-fastalerts";
 
export default function App() {
  return (
    <>
      <AlertContainer />
    </>
  );
}

Hook

Use the useAlerts hook to trigger alerts and dialogs in your app.

import { useAlerts } from "react-native-paper-fastalerts";
 
export default function Foo() {
  const alerts = useAlerts();
  return (
    <View>
      <Button onPress={() => alerts.info({title: "It works"})}>Alert</Button>
    </View>
  );
}

You may also use object destructuring (opens in a new tab) instead to get the individual alert functions.

import { useAlerts } from "react-native-paper-fastalerts";
 
export default function Foo() {
  const { info } = useAlerts();
  return (
    <View>
      <Button onPress={() => info({title: "It works"})}>Alert</Button>
    </View>
  );
}

useAlerts returns an object with alert functions with some default values. An alert function accepts a single parameter options which contains every option that can be passed to an alert.

Currently these functions are available:

• alert(options)
• success(options)
• info(options)
• error(options)
• warning(options)
• confirm(options)

In the following chapters you will learn more about the options and how to use them.