usage.md

Usage

_{← Docs}

---

Provider

Wrap your app root with GestureHandlerRootView, then render ToastivaProvider inside your safe area provider. Toastiva does not add the gesture root for you.

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

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

Triggering toasts

import { toastiva } from "toastiva";

toastiva.success("Saved", { description: "Your changes are ready." });
toastiva.error("Couldn't save", { description: "Try again in a moment." });
toastiva.info("New version available");
toastiva.warning("Battery low");

Custom content

toastiva.custom(({ id }) => (
  <MyCustomToast onClose={() => toastiva.dismiss(id)} />
));

Promises

toastiva.promise(uploadFile(file), {
  loading: "Uploading…",
  success: (res) => `Uploaded ${res.name}`,
  error: (err) => `Failed: ${err.message}`,
});

Updating & dismissing

const id = toastiva.info("Working…");

toastiva.update(id, { title: "Almost there" });
toastiva.dismiss(id);
toastiva.dismissAll();

Note

All methods return a stable id you can pass to update or dismiss.

---

_{Next: Styling →}