Toastiva

Toastiva is a library for building morphing toasts in React Native for iOS and Android. It provides a high-quality UI experience with support for theming, blur effects, and advanced animations.

Platform Support:

• ✅ iOS
• ✅ Android
• ❌ React Native Web (Web is currently out of scope)

Scopes are optional but recommended for providing clarity on which part of the codebase is being modified. They are added in parentheses immediately after the commit type.

Examples:

• feat(provider): expose ref to toaster
• fix(android): handle filter blur on Paper

If you are using Reanimated 4, you must install the specific version of react-native-worklets that is compatible with your Reanimated version:

Use the ToastivaProvider to define consistent app-wide styles. Properties like position, fill, stroke, bodyRadius, styles, and theme can be set here. Per-toast options always take precedence over these provider defaults.

<ToastivaProvider
  position="top-right"
  fill="#171717"
  stroke="rgba(255,255,255,0.10)"
  bodyRadius={16}
  styles={{
    title: { color: "#ffffff" },
    description: { color: "rgba(255,255,255,0.72)" },
    meta: { color: "rgba(255,255,255,0.45)" },
    badge: { backgroundColor: "rgba(255,255,255,0.10)" },
    action: { backgroundColor: "rgba(255,255,255,0.10)" },
    actionText: { color: "#ffffff" },
  }}
>
  {children}
</ToastivaProvider>

To set a consistent animation behavior across your entire application, pass an animation object to the ToastivaProvider. You can define a base preset and then provide granular overrides for mounting, morphing, and spring physics.

Use the following configuration structure:

• preset: The base animation style.
• mount: Controls how the toast enters the screen.
• morph: Controls the transition between different toast layouts.
• springs: Configures the Reanimated spring physics used during morphing.

<ToastivaProvider
  animation={{
    preset: "snappy",
    mount: { axis: "x", offset: 24, duration: 260 },
    morph: { collapseDuration: 190, squishDuration: 44 },
    springs: {
      morph: { damping: 20, stiffness: 360, mass: 0.8 },
    },
  }}
>
  <RootNavigator />
</ToastivaProvider>

To use Toastiva in your React Native project, you must install the core package along with its required peer dependencies.

Note on Android Blur Support: The morphing blur header uses the React Native filter: [{ blur }] style. On Android, this requires React Native 0.76+ with the New Architecture (Fabric) enabled. If you are on an older version, toasts will still render, but the blur layer will not appear. iOS is unaffected as it uses expo-blur.

Platform Support: Toastiva targets iOS and Android only. It is not compatible with React Native Web.

npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets react-native-safe-area-context react-native-svg expo-blur
npm install toastiva

For bare React Native projects, install toastiva and its peer dependencies using npm. You must also manually follow the native installation steps for each library (e.g., running pod install on iOS and configuring the Reanimated Babel plugin).

Required dependencies:

• toastiva
• react-native-gesture-handler
• react-native-reanimated
• react-native-safe-area-context
• react-native-svg
• expo-blur

npm install toastiva \
  react-native-gesture-handler \
  react-native-reanimated \
  react-native-safe-area-context \
  react-native-svg \
  expo-blur

To install Toastiva in an Expo project, use npx expo install for the native peer dependencies to ensure compatibility with your current Expo SDK, then install the toastiva package via npm.

Required native dependencies include react-native-gesture-handler, react-native-reanimated, react-native-worklets, react-native-safe-area-context, react-native-svg, and expo-blur.

npx expo install \
  react-native-gesture-handler \
  react-native-reanimated \
  react-native-worklets \
  react-native-safe-area-context \
  react-native-svg \
  expo-blur

npm install toastiva

You can define a global theme for all toasts by passing styling props to the ToastivaProvider. This allows you to set default colors, strokes, and specific styles for different UI elements across your entire application.

Supported global props include:

• fill: The background color of the toast.
• stroke: The border/stroke color.
• iosBlurTint: Controls the tint of the header morph blur on iOS.
• styles: An object containing style definitions for specific UI slots.

<ToastivaProvider
  fill="#171717"
  stroke="rgba(255,255,255,0.12)"
  iosBlurTint="dark"
  styles={{
    title: { color: "#fff" },
    description: { color: "rgba(255,255,255,0.72)" },
    badge: { backgroundColor: "rgba(255,255,255,0.10)" },
    action: { backgroundColor: "rgba(255,255,255,0.10)" },
    actionText: { color: "#fff" },
  }}
>
  <RootNavigator />
</ToastivaProvider>

To integrate Toastiva, wrap your application in GestureHandlerRootView and SafeAreaProvider, then use ToastivaProvider to define the toast position. You can then trigger toasts from anywhere in your app using the toastiva singleton.

Commonly used position: top-center.

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { ToastivaProvider, toastiva } from "toastiva";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <ToastivaProvider position="top-center">
          <RootNavigator />
        </ToastivaProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

// Triggering a toast
toastiva.success("Saved", { description: "Your changes are ready." });