React-native-reanimated-toasts NPM

react-native-reanimated-toasts

Animated, customizable Toasts for React Native

preview

Features

API fully matches Sonner's
Multiple variants, including success, error, warning, custom, promise
Promise variant with built-in loading state
Custom JSX with the custom variant
Top or bottom positions
Title and description
Action button with a callback
Custom icons
Optionally dismissable with swipe, configurable left or up
Dismissable with toast.dismiss(), one or all toasts
Highly performant using Reanimated 3, 60 FPS
Dark mode built-in
Works with Expo
NativeWind supported
Customizable, styles & className props
Works outside of React components

Showcase

Expo Snack

https://snack.expo.dev/@gunnartorfis/react-native-reanimated-toasts

Installation

npm install react-native-reanimated-toasts

Requirements

To use this package, you also need to install its peer dependencies. Check out their documentation for more information:

Usage

In your App.tsx/entry point

import { Toaster } from 'react-native-reanimated-toasts';

function App() {
  return (
    <View>
      <NavigationContainer>...</NavigationContainer>
      <Toaster />
    </View>
  );
}

Show a toast

import { toast } from 'react-native-reanimated-toasts';

function SomeComponent() {
  return (
    <Button
      title="Show Toast"
      onPress={() => toast('Hello, World!')}
    />
  );
}