✦ YOTOST-NATIVE — AI-Themed Toast Notifications for React Native

React Native port of yotost.
27 toast types · 10 themes · light/dark mode · animated · fully customizable

Installation

npm install yotost-native

Quick Start

Wrap your app root with <ToastProvider>, then use useToast() anywhere.

import { ToastProvider, useToast } from 'yotost-native';

// App.tsx
function App() {
  return (
    <ToastProvider>
      <MainScreen />
    </ToastProvider>
  );
}

// Any component
function MainScreen() {
  const toast = useToast();

  return (
    <View>
      <Button title="Success" onPress={() =>
        toast.show('success', 'Done', 'Model converged')
      } />
      <Button title="Neural" onPress={() =>
        toast.show('neural', 'Processing', 'Through 12 hidden layers…')
      } />
    </View>
  );
}

Configuration

// Pass to provider or call toast.config()
<ToastProvider
  config={{
    position: 'top',
    duration: 4000,
    animation: 'slide',
    theme: 'neural',
    mode: 'dark',
    maxVisible: 5,
    showProgress: true,
    closeable: true,
    glow: false,
    sticky: false,
  }}
>
  ...
</ToastProvider>

Or at runtime:

const toast = useToast();
toast.config({ theme: 'cyberpunk', mode: 'light' });

27 Toast Types

All yotost web types supported:

| Group | Types | |-------|-------| | Core | success, error, warning, info | | AI | neural, thinking, training, token, inception, singularity | | Extended | loading, countdown, multi-step, with-action, gradient-sweep, safety-scan, streaming | | More AI | prompt, inference, deploy, experiment, metric, alert, memory, feedback, dataset |

Each maps to the same Lucide emoji icon as the web version.

10 Themes

neural · cyberpunk · matrix · quantum · aurora · hologram · deep-mind · digital · void · synthetic

Each theme has built-in light & dark color palettes.

Light / Dark Mode

toast.config({ mode: 'auto' });   // follows default (dark)
toast.config({ mode: 'light' });  // force light
toast.config({ mode: 'dark' });   // force dark

Extended Type Methods

Loading with progress

const t = toast.show('loading', 'Training', 'Epoch 42…');
// Later:
toast.updateLoading(t.id, { progress: 0.65, title: '65%', message: 'Almost done' });

Countdown

toast.show('countdown', 'Auto-save', '', {
  duration: 10000,
  onComplete: (id) => console.log('done'),
});

Multi-step

const t = toast.show('multi-step', 'Deploy', 'Build', {
  steps: ['Build', 'Test', 'Deploy', 'Verify'],
});
toast.advanceStep(t.id);  // advances one step
toast.completeSteps(t.id); // marks all done

With Action

toast.show('with-action', 'Update', 'Restart now?', {
  actions: [
    { label: 'Cancel', onPress: (id) => toast.dismiss(id) },
    { label: 'Restart', primary: true, onPress: (id) => { /* do it */ } },
  ],
});

Safety Scan

const t = toast.show('safety-scan', 'Scanning', 'Checking files…', {
  findings: ['Checking source code…'],
});
toast.addFinding(t.id, 'No hardcoded secrets');
toast.setScanResult(t.id, 'Scan complete. 3 issues found.');

Streaming

toast.show('streaming', 'Generating', 'Long text…', {
  speed: 25,
  variableSpeed: true,
  startDelay: 300,
  duration: 3000,
});

API Reference

useToast() returns:

| Method | Description | |--------|-------------| | show(type, title?, message?, opts?) | Show any toast type | | dismiss(id) | Dismiss specific toast | | dismissAll() | Dismiss all toasts | | dismissType(type) | Dismiss by type | | getActive() | Get active toasts info | | config(opts) | Update global config | | updateLoading(id, opts) | Update loading toast progress | | advanceStep(id) | Advance multi-step | | completeSteps(id, opts?) | Complete multi-step | | addFinding(id, finding) | Add safety scan finding | | setScanResult(id, result) | Complete safety scan |

TypeScript

import { ToastProvider, useToast } from 'yotost-native';
import type { ToastType, ThemeName, ToastOptions } from 'yotost-native';

Full type definitions included.

License

ISC