Toast Primitive

Slot Primitives Types Primitives

A concise message that appears briefly.

Installation

Uses shared primitives

If you do not already have these primitives in your project, you will need to add them.

• Slot Primitive
• Types Primitive

Copy/paste the following code to ~/components/primitives/toast/index.tsx

Copy/paste the following code to ~/components/primitives/toast/types.ts

Usage

Caution

Requires a <PortalHost /> as the last child of your <Root/> (app/_layout.tsx) component

import { PortalHost } from '~/components/primitives/portal';

function Root() {
  return (
    <>
      <Stack />
      {/* Default Portal Host (one per app) */}
      <PortalHost />
    </>
  );
}

import * React from 'react';
import { Pressable, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Portal } from '~/components/primitives/portal';
import * as ToastPrimitive from '~/components/primitives/toast';

function Example() {
  const [open, setOpen] = React.useState(false);
  const [seconds, setSeconds] = React.useState(3);
  const insets = useSafeAreaInsets();

  React.useEffect(() => {
    let interval: ReturnType<typeof setInterval> | null = null;

    if (open) {
      interval = setInterval(() => {
        setSeconds((prevSeconds) => {
          if (prevSeconds <= 1) {
            setOpen(false);
            if (interval) {
              clearInterval(interval);
            }
            return 3;
          }
          return prevSeconds - 1;
        });
      }, 1000);
    } else {
      if (interval) {
        clearInterval(interval);
      }
      setSeconds(3);
    }

    if (interval && !open) {
      clearInterval(interval);
    }

    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  }, [open, seconds]);

  return (
    <>
      {open && (
        <Portal name='toast-example'>
          <View style={{ top: insets.top + 4 }} className='px-4 absolute w-full'>
            <ToastPrimitive.Root
              type='foreground'
              open={open}
              onOpenChange={setOpen}
              className='opacity-95 bg-secondary border-border flex-row justify-between items-center p-4 rounded-xl'
            >
              <View className='gap-1.5'>
                <ToastPrimitive.Title className='text-foreground text-3xl'>Here is a toast</ToastPrimitive.Title>
                <ToastPrimitive.Description className='text-foreground text-lg'>
                  It will disappear in {seconds} seconds
                </ToastPrimitive.Description>
              </View>
              <View className='gap-2'>
                <ToastPrimitive.Action className='border border-primary px-4 py-2'>
                  <Text className='text-foreground'>Action</Text>
                </ToastPrimitive.Action>
                <ToastPrimitive.Close className='border border-primary px-4 py-2'>
                  <Text className='text-foreground'>Close</Text>
                </ToastPrimitive.Close>
              </View>
            </ToastPrimitive.Root>
          </View>
        </Portal>
      )}
      <View className='flex-1 justify-center items-center p-6 gap-12'>
        <Pressable onPress={() => setOpen((prev) => !prev)}>
          <Text className='text-foreground text-xl'>Show Toast</Text>
        </Pressable>
      </View>
    </>
  );
}

Props

Root

Extends View props

Prop	Type	Note
open	boolean
onOpenChange	(open: boolean) => void
type	’foreground’ | ‘background’	defaults to foreground (optional)
asChild	boolean	(optional)

Action

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

Close

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

Title

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

Description

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)