Component

Toast

Inline toast visual for success, error, and info messages.

←→

React Native

Toast variants

Transient feedback messages.

Transfer complete

New version available

Payment failed

import { useState } from 'react';
import { Toast, Button } from '@sohantalukder/rn-kit';

export function InlineToastExample() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button text="Show toast" onPress={() => setVisible(true)} />
      {visible ? (
        <Toast
          type="success"
          title="Saved"
          onDismiss={() => setVisible(false)}
        />
      ) : null}
    </>
  );
}

Live component

successerrorinfo

Keep messages brief.
Do not use toasts for required decisions.

Usage

import { Toast } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { Toast, Button } from '@sohantalukder/rn-kit';

export function InlineToastExample() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button text="Show toast" onPress={() => setVisible(true)} />
      {visible ? (
        <Toast
          type="success"
          title="Saved"
          onDismiss={() => setVisible(false)}
        />
      ) : null}
    </>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

typeToastTypeinfoVisual tone used for the feedback message.

titlestring-Short heading rendered at the top of the component.

onDismiss() => void-Called after a transient message is dismissed.

Theme

Toast reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

success
error
info

Best Practices

Keep messages brief.
Do not use toasts for required decisions.