### Install and Run Toastiva Example

Source: https://github.com/rit3zh/toastiva/blob/main/example/README.md

Commands to install dependencies and run the Toastiva example app on iOS or Android.

```bash
pnpm install
pnpm --filter toastiva-example ios      # or: android
```

--------------------------------

### Run Development Server

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/README.md

Starts the Next.js development server for local development. Use this to see changes as you edit files.

```bash
npm run dev
# or similar package manager command
```

--------------------------------

### Install Toastiva with Bare React Native

Source: https://github.com/rit3zh/toastiva/blob/main/docs/installation.md

Install Toastiva and its native peer dependencies for Bare React Native projects. Remember to follow each library's specific native installation steps.

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

--------------------------------

### Install Toastiva with Expo

Source: https://github.com/rit3zh/toastiva/blob/main/docs/installation.md

Use this command to install Toastiva and its native peer dependencies when using Expo. This ensures compatibility with your Expo SDK version.

```bash
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
```

--------------------------------

### Initialize ToastivaProvider and Show Toast

Source: https://github.com/rit3zh/toastiva/blob/main/packages/toastiva/README.md

Set up the ToastivaProvider at the root of your application to manage toast notifications. This example demonstrates wrapping your app with necessary gesture handler and safe area providers, and then showing a success toast with a description.

```tsx
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." });
```

--------------------------------

### Install Toastiva and Dependencies

Source: https://github.com/rit3zh/toastiva/blob/main/packages/toastiva/README.md

Install Toastiva along with its required peer dependencies using npm or yarn. Ensure you have react-native-gesture-handler, react-native-reanimated, react-native-worklets, react-native-safe-area-context, and expo-blur installed.

```bash
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
```

--------------------------------

### Conventional Commit Examples

Source: https://github.com/rit3zh/toastiva/blob/main/docs/contributing.md

Examples of Conventional Commit prefixes and their impact on versioning and changelog generation. Breaking changes are indicated with '!' or a 'BREAKING CHANGE:' footer.

```text
feat: add stack mode
```

```text
fix: correct iOS blur tint
```

```text
perf: avoid extra layout pass
```

```text
revert: revert "feat: stack mode"
```

```text
refactor: split morph hook
```

```text
docs: clarify provider setup
```

```text
chore: bump deps
```

```text
feat!: drop RN < 0.72
```

--------------------------------

### Basic Toastiva Usage with Provider

Source: https://github.com/rit3zh/toastiva/blob/main/README.md

Set up the ToastivaProvider in your application's root component to enable toast notifications. This example demonstrates wrapping the app with necessary providers and displaying a success toast with a description.

```tsx
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." });
```

--------------------------------

### Customizing Body Content with `toastiva.custom`

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/src/app/docs/styling/page.mdx

For fully custom toast UIs, use `toastiva.custom` with a React node. This example shows a custom `FlightStatusCard` and disables the default icon.

```tsx
toastiva.custom(<FlightStatusCard />, {
  title: "Flight status",
  fill: "#1f1f22",
  bodyLayout: "center",
  bodyRadius: 28,
  showIcon: false,
  expandedWidth: 459,
});
```

--------------------------------

### Overriding Animations Per-Toast

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/src/app/docs/styling/page.mdx

Individual toasts can override specific animation properties defined globally. This example adjusts the `mount` animation and `morph` collapse duration for an error toast.

```tsx
toastiva.error("Could not sync", {
  animation: {
    mount: { axis: "y", offset: 12, duration: 180 },
    morph: { collapseDuration: 160 },
    springs: {
      morph: { damping: 26, stiffness: 420 },
    },
  },
});
```

--------------------------------

### Customizing Fill and Stroke Colors

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/src/app/docs/styling/page.mdx

Use `fill` to change the SVG body color and `stroke` to modify the outline color of a toast. This example also shows overriding text styles for title and description.

```tsx
toastiva.success("Saved", {
  description: "Your changes are ready.",
  fill: "#171717",
  stroke: "rgba(255,255,255,0.12)",
  styles: {
    title: { color: "#fff" },
    description: { color: "rgba(255,255,255,0.72)" },
  },
});
```

--------------------------------

### Preview Application Locally

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/README.md

Previews the application locally using the Cloudflare runtime. This command is useful for testing the deployment environment before actual deployment.

```bash
npm run preview
# or similar package manager command
```

--------------------------------

### Setting up ToastivaProvider

Source: https://github.com/rit3zh/toastiva/blob/main/docs/usage.md

Wrap your app's root with GestureHandlerRootView and SafeAreaProvider, then render ToastivaProvider inside. This ensures proper gesture handling and safe area awareness for toasts.

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

--------------------------------

### Publish to npm

Source: https://github.com/rit3zh/toastiva/blob/main/docs/contributing.md

Manual step to publish the package to npm after merging the release PR. This command pulls the latest changes and then publishes the 'toastiva' package.

```bash
git pull
pnpm --filter toastiva publish --access public
```

--------------------------------

### Basic Text Component

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/content/docs/index.mdx

Demonstrates a basic Text component with custom styling for font size and color.

```javascript
import { Text } from "@/components/ui/text";

<Text
  style={{
    fontSize: 50,
    color: "red",
  }}
>
  Hey
</Text>
```

--------------------------------

### Deploy Application to Cloudflare

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/README.md

Deploys the Next.js application to Cloudflare. This command automates the deployment process.

```bash
npm run deploy
# or similar package manager command
```

--------------------------------

### Applying Animation Presets Globally and Per-Toast

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/src/app/docs/styling/page.mdx

Use `animationPreset` to quickly apply predefined animation styles. It can be set globally on `ToastivaProvider` or overridden for individual toasts.

```tsx
<ToastivaProvider animationPreset="snappy">
  {children}
</ToastivaProvider>

tostiva.success("Fast save", {
  animationPreset: "minimal",
});
```

--------------------------------

### Configure Global Toast Animations

Source: https://github.com/rit3zh/toastiva/blob/main/docs/animations.md

Configure animation globally for all toasts using the `animation` prop on `ToastivaProvider`. This allows detailed tuning of mount, morph, and spring behaviors.

```tsx
<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>
```

--------------------------------

### Importing Toastiva Enums

Source: https://github.com/rit3zh/toastiva/blob/main/docs/api.md

Import enums for predefined configurations like animation presets, positions, and types.

```typescript
import {
  ToastivaAnimationPreset,
  ToastivaBodyLayout,
  ToastivaMode,
  ToastivaPosition,
  ToastivaType,
  ToastivaVerticalPosition,
} from "toastiva";
```

--------------------------------

### Global Toast Theme Configuration

Source: https://github.com/rit3zh/toastiva/blob/main/docs/styling.md

Configure global styles for all toasts by passing props to the ToastivaProvider. This is useful for setting a consistent brand appearance across your application.

```tsx
<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>
```

--------------------------------

### Importing Toastiva Types

Source: https://github.com/rit3zh/toastiva/blob/main/docs/api.md

Import various types for configuring Toastiva components and options.

```typescript
import type {
  IToastivaAction,
  IToastivaAnimationConfig,
  IToastivaConfig,
  IToastivaOptions,
  IToastivaPromiseData,
  IToastivaProviderProps,
  IToastivaStyleOverrides,
  IToastivaTheme,
  TToastivaAnimationPreset,
  TToastivaPosition,
  TToastivaType,
} from "toastiva";
```

--------------------------------

### Handling promise-based toasts

Source: https://github.com/rit3zh/toastiva/blob/main/docs/usage.md

Display toasts that automatically update based on the status of a promise. Use the `promise` method with states for loading, success, and error.

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

--------------------------------

### Apply Animation Preset to Toast

Source: https://github.com/rit3zh/toastiva/blob/main/docs/animations.md

Use the `animationPreset` option to apply a predefined animation style to a specific toast. Available presets are 'default', 'snappy', and 'gentle'.

```tsx
toastiva.success("Saved", { animationPreset: "snappy" });
```

--------------------------------

### toastiva methods

Source: https://github.com/rit3zh/toastiva/blob/main/docs/api.md

These are the primary methods exposed by the toastiva object to manage toast notifications.

```APIDOC
## `toastiva` API

### Description
Provides methods to create, update, and dismiss toast notifications.

### Methods

- **`success(title, options?)`**: Displays a success toast.
- **`error(title, options?)`**: Displays an error toast.
- **`info(title, options?)`**: Displays an informational toast.
- **`warning(title, options?)`**: Displays a warning toast.
- **`custom(render, options?)`**: Displays a custom toast rendered by a provided function.
- **`promise(promise, data)`**: Displays a toast that tracks the progress of a promise.
- **`update(id, options)`**: Updates an existing toast.
- **`dismiss(id)`**: Dismisses a specific toast by its ID.
- **`dismissAll()`**: Dismisses all active toasts.

### Parameters

- **`title`** (string) - Required - The main text content of the toast.
- **`options`** (object) - Optional - Configuration options for the toast (e.g., duration, actions).
- **`render`** (function) - Required for `custom` - A function that returns the content to render for the custom toast.
- **`promise`** (Promise) - Required for `promise` - The promise to track.
- **`data`** (object) - Required for `promise` - Data associated with the promise for display.
- **`id`** (string | number) - Required for `update` and `dismiss` - The unique identifier of the toast to update or dismiss.

### Returns

- **`id`** (string | number) - The unique identifier of the created toast (for `success`, `error`, `info`, `warning`, `custom`, `promise`).
- **`void`** - For `update` and `dismiss` methods.
```

--------------------------------

### Triggering different toast types

Source: https://github.com/rit3zh/toastiva/blob/main/docs/usage.md

Use the toastiva object to trigger success, error, info, and warning toasts. Provide a title and an optional description for more context.

```tsx
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");
```

--------------------------------

### Local CI Checks

Source: https://github.com/rit3zh/toastiva/blob/main/docs/contributing.md

Commands to run local checks that mirror the CI pipeline, ensuring code quality, type correctness, and build integrity before pushing.

```bash
pnpm --filter toastiva lint
```

```bash
pnpm --filter toastiva typecheck
```

```bash
pnpm --filter toastiva build
```

```bash
pnpm --filter toastiva pack:dry-run
```

--------------------------------

### Displaying custom toast content

Source: https://github.com/rit3zh/toastiva/blob/main/docs/usage.md

Render custom React components as toasts using the `custom` method. You can pass a function that receives the toast's `id` and can use `toastiva.dismiss(id)` to close it.

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

--------------------------------

### Setting Global State Colors for ToastivaProvider

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/src/app/docs/styling/page.mdx

Customize the default colors for different toast states (success, error, warning, info) and their corresponding surface colors globally using the theme prop on ToastivaProvider.

```tsx
<ToastivaProvider
  theme={{
    colors: {
      success: "#34d399",
      error: "#fb7185",
      warning: "#fbbf24",
      info: "#60a5fa",
    },
    surfaceColors: {
      success: "#101f18",
    },
  }}
>
  {children}
</ToastivaProvider>
```

--------------------------------

### ToastivaProvider props

Source: https://github.com/rit3zh/toastiva/blob/main/docs/api.md

Props that can be passed to the `<ToastivaProvider />` component to configure its behavior and appearance.

```APIDOC
## `<ToastivaProvider />` Props

### Description
Props to configure the global behavior and appearance of the Toastiva notification system.

### Props

- **`position`** (string) - Optional - Specifies the position of the toasts on the screen (e.g., `"top-center"`, `"bottom-right"`).
- **`fill`** (string) - Optional - Sets the surface fill color for the toasts.
- **`stroke`** (string) - Optional - Sets the surface stroke color for the toasts.
- **`iosBlurTint`** (string) - Optional - Configures the iOS blur tint effect (e.g., `"light"`, `"dark"`).
- **`disableIOSBlur`** (boolean) - Optional - Disables the iOS blur layer.
- **`styles`** (object) - Optional - Allows for style overrides. Refer to the [Styling documentation](./styling.md) for details.
- **`animation`** (object) - Optional - Configures toast animations. Refer to the [Animations documentation](./animations.md) for details.
```

--------------------------------

### Updating and dismissing toasts

Source: https://github.com/rit3zh/toastiva/blob/main/docs/usage.md

Manage individual toasts using their returned ID. You can update their content or dismiss them individually or all at once.

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

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

--------------------------------

### Using Custom Icons

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/src/app/docs/styling/page.mdx

Replace the default status icon with any React node by passing it to the `icon` prop. Use `showIconBadge={false}` to display the icon without its circular background.

```tsx
toastiva.warning("Heads up", {
  icon: <WarningTriangle />,
  showIconBadge: false,
});
```

--------------------------------

### Per-Toast Styling

Source: https://github.com/rit3zh/toastiva/blob/main/docs/styling.md

Apply specific styles to individual toasts by passing style props directly to toastiva calls. This allows for unique styling of particular notifications.

```tsx
toastiva.success("Saved", {
  fill: "#0f172a",
  bodyRadius: 24,
  expandedHeight: 128,
  disableIOSBlur: true,
  styles: {
    title: { color: "#f8fafc", fontWeight: "800" },
    description: { color: "rgba(248,250,252,0.72)" },
  },
});
```

--------------------------------

### Adjusting Body Roundness

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/src/app/docs/styling/page.mdx

Control the toast's body shape using the `bodyRadius` prop. Higher values create softer, more rounded corners, while lower values result in sharper edges.

```tsx
toastiva.success("Rounded", {
  description: "This toast has a larger body radius.",
  bodyRadius: 28,
});
```

--------------------------------

### Overriding Individual Style Slots

Source: https://github.com/rit3zh/toastiva/blob/main/apps/docs/src/app/docs/styling/page.mdx

The `styles` prop allows granular control over specific elements within a toast, such as title color, badge background, or body padding. This is useful for per-toast visual adjustments.

```tsx
toastiva.info("Dark mode enabled", {
  description: "Toastiva can be styled per toast.",
  fill: "#171717",
  styles: {
    title: { color: "#ffffff", fontWeight: "800" },
    description: { color: "rgba(255,255,255,0.72)" },
    badge: { backgroundColor: "rgba(255,255,255,0.10)" },
    body: { paddingHorizontal: 18 },
    progressTrack: { backgroundColor: "rgba(255,255,255,0.10)" },
    progressFill: { backgroundColor: "#ffffff" },
  },
});
```

--------------------------------

### Conventional Commit Scopes

Source: https://github.com/rit3zh/toastiva/blob/main/docs/contributing.md

Optional scopes can be added to Conventional Commits for increased clarity, specifying the affected part of the codebase.

```text
feat(provider): expose ref to toaster
```

```text
fix(android): handle filter blur on Paper
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.