Toast

Toast displays brief, non-intrusive messages that automatically disappear. Use for confirmations, status updates, and non-critical notifications.

Preview

Reading saved successfully

Hexagram added to favorites

Connection unstable

Failed to save reading

Variants

Default

Neutral toast for general messages.

Your changes have been saved

showToast({ message: 'Your changes have been saved' });

Success

Confirms successful actions.

Reading saved successfully

showToast({
  message: 'Reading saved successfully',
  variant: 'success'
});

Warning

Alerts to potential issues.

Offline mode - changes will sync later

showToast({
  message: 'Offline mode - changes will sync later',
  variant: 'warning'
});

Error

Indicates failures or errors.

Failed to load hexagram data

showToast({
  message: 'Failed to load hexagram data',
  variant: 'error'
});

Info

Provides informational updates.

New features available

showToast({
  message: 'New features available',
  variant: 'info'
});

Position

top

Message

bottom

Message

// Top position
showToast({
  message: 'New notification',
  position: 'top'
});

// Bottom position (default)
showToast({
  message: 'Action completed',
  position: 'bottom'
});

Duration

Control how long the toast is visible.

// Short (2 seconds)
showToast({
  message: 'Quick update',
  duration: 2000
});

// Default (3 seconds)
showToast({
  message: 'Standard message',
  duration: 3000
});

// Long (5 seconds)
showToast({
  message: 'Important information',
  duration: 5000
});

// Persistent (until dismissed)
showToast({
  message: 'Action required',
  duration: 0
});

Setup

Wrap your app with ToastProvider to enable toasts.

import { ToastProvider } from '@synchronicity/react-native';

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

API Reference

ToastProvider Props

Prop	Type	Description
`children`	`ReactNode`	App content

useToast Hook

Method	Type	Description
`showToast`	`(config: ToastConfig) => void`	Show a toast
`hideToast`	`() => void`	Hide current toast

ToastConfig

Prop	Type	Default	Description
`message`	`string`	Required	Toast message
`variant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Visual variant
`duration`	`number`	`3000`	Display time in ms (0 for persistent)
`position`	`'top' \| 'bottom'`	`'bottom'`	Screen position

Complete Example

import { ToastProvider, useToast, Button, Card } from '@synchronicity/react-native';
import { View } from 'react-native';

function SaveReadingButton({ reading }) {
  const { showToast } = useToast();

  const handleSave = async () => {
    try {
      await saveReading(reading);
      showToast({
        message: 'Reading saved to your journal',
        variant: 'success',
        duration: 3000
      });
    } catch (error) {
      showToast({
        message: 'Failed to save reading. Please try again.',
        variant: 'error',
        duration: 5000
      });
    }
  };

  return (
    <Button onPress={handleSave}>
      Save Reading
    </Button>
  );
}

// App setup
function App() {
  return (
    <ToastProvider>
      <SaveReadingButton reading={currentReading} />
    </ToastProvider>
  );
}