Getting Started

Preqrequisites

React Native or Expo project.

This library is compatible with most versions of react-native and react-native-paper.

Install the package

npm install react-native-paper-fastalerts

Setup the container

You should include the AlertContainer component somewhere in the main entry point of your app.

App.tsx

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

Ready ✅

You are all set to use the library. Check out the usage section to learn more.

Just import the useAlerts hook and start using it.

import { useAlerts } from "react-native-paper-fastalerts";
 
export default function HelloWorld() {
  const { alert /*, confirm, warning, error, info */ } = useAlerts();
  // or use:  const alerts = useAlerts();
  return (
    <Button
      onPress={() =>
        alert({
          // all options are optional and have sensible defaults
          message: "What is the capital of Germany?",
          okText: "Submit 🔥",
          okAction(values) {
            if (values[0] === "b") {
              alert({ message: "Correct 🤗" });
            } else {
              return "Wrong 😅 Try again.";
            }
          },
          fields: [
            {
              type: "radio",
              data: [
                { key: "Berlin", value: "b" },
                { key: "Paris", value: "p" },
                { key: "London", value: "l" },
                { key: "Madrid", value: "m" },
              ],
            },
          ],
        })
      }
    >
      Ask me a question!
    </Button>
  );
}

Introduction Usage