React-native-reanimated-toast NPM

🌟 Features

High performance with Reanimated v2
Autocompletion thanks to TypeScript
Easily customizable
Runs with Expo

Installation

⚠️ You need to install react-native-reanimated v2 & react-native-gesture-handler and follow their installation instructions.

yarn add react-native-reanimated-toast

Wrap the whole app in ToastProvider. Usually you'd do this in your entry file, such as index.js or App.js:

import * as React from 'react';
import { ToastProvider } from "react-native-reanimated-toast";

export default function App() {
  return (
    <ToastProvider>
      {/* Rest of your app code */}
    <ToastProvider>
  );

Example Usage

Use the useToast hook in any of your function components'.

const ToastExample = () => {
  const { showToast } = useToast();

  return (
    <TouchableOpacity
      onPress={() => {
        showToast({
          title: "Announcement",
          message: "👋 Hello world from toast!",
        });
      }}
    >
      Show toast
    </TouchableOpacity>
  );
};