react-native-reanimated-toast

A performant toast library 🚀

Usage no npm install needed!

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

README

Reanimated Toast

runs with expo typescript License: MIT PRs Welcome

🌟 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>
  );
};

License

Licensed under the MIT license.

👉 View Example App