React Native Toasts & Alerts

An opinionated toast and alert component for React Native. Extended version of sonner-native with alert dialog support.

Features

Toast Features

• API fully matches Sonner's
• Multiple variants, including success, error, warning, custom, promise
• Promise variant with built-in loading state
• Custom JSX with the custom variant
• Top or bottom positions
• Title and description
• Action button with a callback
• Custom icons
• Optionally dismissable with swipe, configurable left or up
• Dismissable with toast.dismiss(), one or all toasts

Alert Dialog Features (NEW)

• Modal-style alert dialogs using the same system
• alert.success(), alert.error(), alert.warning(), alert.info()
• alert.confirm() for confirmation dialogs with callbacks
• alert.custom() for custom JSX content
• Non-dismissible by default (requires explicit action)
• Centered positioning
• Action and cancel buttons

General Features

• Highly performant using Reanimated 3, 60 FPS
• Dark mode built-in
• Works with Expo
• NativeWind supported
• Customizable via styles props
• Works outside of React components

Showcase

Expo Snack

https://snack.expo.dev/@gunnartorfis/sonner-native

Installation

npm install yooo-native
# or
yarn add yooo-native

Requirements

To use this package, you also need to install its peer dependencies. Check out their documentation for more information:

• React Native Reanimated
• React Native Gesture Handler
• React Native Safe Area Context
• React Native SVG

Usage

In your App.tsx/entry point

import { Toaster } from 'yooo-native';

function App() {
  return (
    <View>
      <NavigationContainer>...</NavigationContainer>
      <Toaster />
    </View>
  );
}

Using Toasts

import { toast } from 'yooo-native';

// Basic toast
toast('Yooo! Hello World 🎉');

// Toast variants
toast.success('Yooo! Success! ✅');
toast.error('Yooo! Error! ❌');
toast.warning('Yooo! Warning! ⚠️');
toast.info('Yooo! Info! ℹ️');

Using Alert Dialogs

import { alert } from 'yooo-native';

// Basic alerts
alert.info('Yooo! Information message');
alert.success('Yooo! Operation completed!');
alert.error('Yooo! Something went wrong');

// Simple confirmation
alert.confirm('Yooo! Are you sure?', {
  onConfirm: () => console.log('User confirmed'),
  onCancel: () => console.log('User cancelled')
});

// Advanced dialog (matches Alert.alert() API)
alert.dialog(
  'Delete Item',
  'Are you sure you want to delete this item? This action cannot be undone.',
  [
    { text: 'Cancel', style: 'cancel' },
    {
      text: 'Delete',
      style: 'destructive',
      onPress: async () => {
        // Your delete logic here
        console.log('Item deleted');
      }
    }
  ]
);

// Custom alert with JSX
alert.custom(
  <YourCustomComponent />
);

Replacing React Native's Alert.alert()

You can directly replace React Native's Alert.alert() with alert.dialog():

// Before (React Native)
import { Alert } from 'react-native';
Alert.alert('Title', 'Message', [
  { text: 'Cancel', style: 'cancel' },
  { text: 'OK', onPress: () => console.log('OK') },
]);

// After (yooo-native)
import { alert } from 'yooo-native';
alert.dialog('Title', 'Message', [
  { text: 'Cancel', style: 'cancel' },
  { text: 'OK', onPress: () => console.log('OK') },
]);

Show a toast

import { toast } from 'sonner-native';

function SomeComponent() {
  return (
    <Button
      title="Show Toast"
      onPress={() => toast('Hello, World!')}
    />
  );
}

Web support

Even though Sonner Native works on the web, it is not recommended to use it there. Instead, use the original Sonner.

The following setup is recommended. Add a sonner.ts and sonner.web.ts file to your project and import from there instead of from this library directly. That way, sonner will be used on the web and sonner-native on native.

// sonner.ts
export * from 'sonner-native';

// sonner.web.ts
export * from 'sonner';

Documentation

For more advanced usage, check out the documentation

Recording

https://github.com/user-attachments/assets/ccc428ca-37c3-4589-9e8c-f414c40d764c

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library