Component

Toast

Stacking, auto-dismissing toast notifications.

Preview

How to use AI prompt

How to use

Wrap once with the provider, then call useToast anywhere below.

App.tsx

import { ToastProvider, useToast } from "react-native-foonto";
import { Button } from "react-native";

// 1. Wrap your app (or a screen) once.
export default function App() {
  return (
    <ToastProvider position="top">
      <Screen />
    </ToastProvider>
  );
}

// 2. Fire toasts from anywhere below the provider.
function Screen() {
  const toast = useToast();
  return (
    <Button
      title="Save"
      onPress={() =>
        toast.show({ variant: "success", title: "Saved", message: "All changes stored." })
      }
    />
  );
}

Props

`ToastProvider`

Prop	Type	Default	Description
`children`req	`ReactNode`	—	Your app/screen tree.
`position`	`'top' \| 'bottom'`	'top'	Where toasts appear.
`topOffset`	`number`	60	Inset from the top edge (position 'top').
`bottomOffset`	`number`	40	Inset from the bottom edge (position 'bottom').

`toast.show(options)`

Prop	Type	Default	Description
`message`req	`string`	—	Main line of text.
`title`	`string`	—	Optional bold title above the message.
`variant`	`'default' \| 'success' \| 'error' \| 'info'`	'default'	Visual style.
`duration`	`number`	2500	Auto-dismiss delay in ms.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add toast notifications using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` are installed.
2. Wrap the app root once in `<ToastProvider position="top">`.
3. In any component below it, call `const toast = useToast()`.
4. Trigger toasts with `toast.show({ variant, title, message })` from success/error handlers.
5. Use the `success` / `error` / `info` variants for status feedback; they auto-dismiss.