Toast

Toast notification component for displaying brief messages.

Toast

Toast is an overlay component for displaying brief, non-critical notifications that appear temporarily. Toast uses a hook-based pattern combined with ThemeProvider.

Import

import { Toast, useToast } from 'radix-native-ui';

Setup

Wrap your app with ThemeProvider and configure the toast settings:

import { ThemeProvider } from 'radix-native-ui';

<ThemeProvider
  toastConfig={{
    position: 'bottom',
    maxVisible: 3,
    duration: 5000,
    swipeToDismiss: true,
  }}
>
  <App />
</ThemeProvider>

Usage

import { Toast, Button, useToast } from 'radix-native-ui';

function App() {
  const toast = useToast();

  return (
    <Button onPress={() => toast.show({ title: 'Notification', description: 'Your changes have been saved.' })}>
      Show Toast
    </Button>
  );
}

Components

Toast.Viewport

Container where toasts are rendered. Must be placed in your app layout.

Toast.Title

Title text for custom toast content.

Toast.Description

Description text for custom toast content.

Toast.Close

Close button for custom toast content.

Toast.Action

Action button for custom toast content.

Hook: useToast

The useToast hook returns a toast controller with methods to show and manage toasts:

const toast = useToast();

// Show a toast with options
toast.show({ title: 'Message' });

// Shorthand methods
toast.success({ title: 'Success!' });
toast.error({ title: 'Error!' });
toast.warning({ title: 'Warning!' });
toast.info({ title: 'Info' });
toast.accent({ title: 'Accent' });

// Programmatic control
toast.hide(id);
toast.hideAll();
toast.update(id, { title: 'Updated' });

ToastController Methods

ToastOptions

ThemeProvider: toastConfig

Configure toast behavior via ThemeProvider:

Examples

Basic Toast

function ToastDemo() {
  const toast = useToast();

  return (
    <Button onPress={() => toast.show({ title: 'Default toast message' })}>
      Show Default Toast
    </Button>
  );
}

Success Toast

<Button color="green" onPress={() => toast.success({ title: 'Operation successful!' })}>
  Show Success Toast
</Button>

Error Toast

<Button color="red" onPress={() => toast.error({ title: 'Something went wrong' })}>
  Show Error Toast
</Button>

Toast with Description

toast.success({
  title: 'File uploaded',
  description: 'Your document has been successfully uploaded to the server.',
});

Toast with Action

toast.error({
  title: 'File deleted',
  description: 'Your file has been moved to trash.',
  action: {
    label: 'Undo',
    onPress: () => toast.success({ title: 'File restored!' }),
  },
  showClose: false,
});

Toast with Custom Icon

toast.show({
  title: 'Upload complete',
  icon: <Ionicons name="checkmark-circle" size={24} color="green" />,
});

Custom Duration

// 2 second toast
toast.show({
  title: 'Quick message',
  duration: 2000,
});

// Persistent toast (no auto-dismiss)
toast.show({
  title: 'Update available',
  duration: Infinity,
});

Position Override

// Show at top
toast.show({
  title: 'Top toast',
  position: 'top',
});

// Show at bottom (default)
toast.show({
  title: 'Bottom toast',
  position: 'bottom',
});

Programmatic Control

const toast = useToast();

// Get toast ID for later control
const toastId = toast.show({ title: 'Message' });

// Hide specific toast
toast.hide(toastId);

// Hide all toasts
toast.hideAll();

// Update existing toast
toast.update(toastId, { title: 'Updated message' });

Complete Example

import { ThemeProvider, Button, Flex, Heading, Text, Box, Card, useToast } from 'radix-native-ui';
import { ScrollView, View } from 'react-native';

function ToastDemo() {
  const toast = useToast();

  return (
    <Flex direction="column" gap={32} padding={12}>
      <Box>
        <Heading size={6}>Toast</Heading>
        <Text color="gray" size={4}>
          Brief notifications that appear temporarily.
        </Text>
      </Box>

      {/* Basic Toasts */}
      <Card>
        <Flex direction="column" gap={12} paddingHorizontal={4}>
          <Heading size={4}>Basic Toasts</Heading>

          <Button onPress={() => toast.show({ title: 'Default toast message' })}>
            Show Default Toast
          </Button>

          <Button color="green" onPress={() => toast.success({ title: 'Operation successful!' })}>
            Show Success Toast
          </Button>

          <Button color="red" onPress={() => toast.error({ title: 'Something went wrong' })}>
            Show Error Toast
          </Button>

          <Button color="yellow" onPress={() => toast.warning({ title: 'Warning: Please review' })}>
            Show Warning Toast
          </Button>

          <Button color="blue" onPress={() => toast.info({ title: 'Here is some information' })}>
            Show Info Toast
          </Button>
        </Flex>
      </Card>

      {/* Toast with Action */}
      <Card>
        <Flex direction="column" gap={12} paddingHorizontal={4}>
          <Heading size={4}>With Action</Heading>

          <Button
            color="red"
            onPress={() =>
              toast.error({
                title: 'File deleted',
                description: 'Your file has been moved to trash.',
                action: {
                  label: 'Undo',
                  onPress: () => toast.success({ title: 'File restored!' }),
                },
                showClose: false,
              })
            }
          >
            Delete File (with Undo)
          </Button>
        </Flex>
      </Card>

      {/* Custom Duration */}
      <Card>
        <Flex direction="column" gap={12} paddingHorizontal={4}>
          <Heading size={4}>Custom Duration</Heading>

          <Button
            onPress={() =>
              toast.show({
                title: 'Quick toast (2s)',
                duration: 2000,
              })
            }
          >
            2 Second Toast
          </Button>

          <Button
            onPress={() =>
              toast.show({
                title: 'Long toast (10s)',
                description: 'This toast will stay for 10 seconds',
                duration: 10000,
              })
            }
          >
            10 Second Toast
          </Button>
        </Flex>
      </Card>

      {/* Position Override */}
      <Card>
        <Flex direction="column" gap={12} paddingHorizontal={4}>
          <Heading size={4}>Position Override</Heading>

          <Button
            onPress={() =>
              toast.show({
                title: 'Top positioned toast',
                position: 'top',
              })
            }
          >
            Show at Top
          </Button>

          <Button
            onPress={() =>
              toast.show({
                title: 'Bottom positioned toast',
                position: 'bottom',
              })
            }
          >
            Show at Bottom
          </Button>
        </Flex>
      </Card>

      {/* Stacking Demo */}
      <Card>
        <Flex direction="column" gap={12} paddingHorizontal={4}>
          <Heading size={4}>Stacking</Heading>
          <Text color="gray" size={2}>
            Multiple toasts stack. Max 3 visible by default.
          </Text>

          <Button
            onPress={() => {
              toast.show({ title: 'First toast' });
              setTimeout(() => toast.show({ title: 'Second toast' }), 300);
              setTimeout(() => toast.show({ title: 'Third toast' }), 600);
              setTimeout(() => toast.success({ title: 'All done!' }), 900);
            }}
          >
            Show Multiple Toasts
          </Button>
        </Flex>
      </Card>

      {/* Programmatic Control */}
      <Card>
        <Flex direction="column" gap={12} paddingHorizontal={4}>
          <Heading size={4}>Programmatic Control</Heading>

          <Flex direction="row" gap={8}>
            <Button color="red" variant="soft" onPress={() => toast.hideAll()}>
              Hide All
            </Button>
          </Flex>
        </Flex>
      </Card>

      {/* Without Close Button */}
      <Card>
        <Flex direction="column" gap={12} paddingHorizontal={4}>
          <Heading size={4}>Without Close Button</Heading>

          <Button
            onPress={() =>
              toast.show({
                title: 'No close button',
                description: 'Swipe to dismiss',
                showClose: false,
              })
            }
          >
            Show Toast (no X)
          </Button>
        </Flex>
      </Card>
    </Flex>
  );
}

export default function ToastDemoScreen() {
  return (
    <ThemeProvider
      mode="light"
      themeOptions={{ accentColor: 'blue', radius: 'large', scaling: 1 }}
      toastConfig={{
        position: 'bottom',
        maxVisible: 3,
        duration: 5000,
        swipeToDismiss: true,
      }}
    >
      <ScrollView>
        <View style={{ flex: 1 }}>
          <ToastDemo />
        </View>
      </ScrollView>
    </ThemeProvider>
  );
}

Related

• Callout - Callout component
• Dialog - Dialog component