Sonner Native

An opinionated toast component for React Native. A port of @emilkowalski's sonner.

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
• Highly performant using Reanimated 3, 60 FPS
• Dark mode built-in
• Works with Expo
• NativeWind supported
• Customizable, styles & className props
• Works outside of React components

Showcase

Expo Snack

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

Installation

1npx expo install sonner-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

1import { Toaster } from 'sonner-native';
2
3function App() {
4  return (
5    <View>
6      <NavigationContainer>...</NavigationContainer>
7      <Toaster />
8    </View>
9  );
10}

Show a toast

1import { toast } from 'sonner-native';
2
3function SomeComponent() {
4  return (
5    <Button
6      title="Show Toast"
7      onPress={() => toast('Hello, World!')}
8    />
9  );
10}

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