Toastiva

Morphing toast notifications for React Native — iOS & Android.

---

Preview

iOS	Android
toastiva-apple.mp4	toastiva-android.mp4

Important

Toastiva targets iOS and Android only — it is not built for React Native Web.

Warning

The morphing blur header relies on the RN filter: [{ blur }] style. On Android, this requires React Native 0.76+ with the New Architecture (Fabric) enabled. On lower versions, filter is a no-op on Android — toasts still render, but without the blur layer. iOS uses expo-blur and is unaffected.

Install

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

Quick start

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

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

Documentation

Installation	Peer dependencies and setup for Expo / bare RN.
Usage	Trigger toasts, update them, handle promises.
Styling	Fills, strokes, blur, and per-toast overrides.
Animations	Presets, springs, morph and mount tuning.
API reference	Props, options, and exported types.

Important

The layout is inspired from sileo.aaryan.design

License

MIT © Ritesh

---