React Native Toasts

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

!sonner-native

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 via styles props
- Works outside of React components

Showcase

Expo Snack

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

Installation

``sh
npx 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

$3

`typescript
import { Toaster } from 'sonner-native';

function App() {
return (

...


);
}
`

$3

When using Expo Router, place the Toaster component in your root layout file (app/_layout.tsx):

`typescript
import { Toaster } from 'sonner-native';
import { Stack } from 'expo-router';

export default function RootLayout() {
return (
<>






);
}
`

This ensures the toasts will be displayed across all screens in your app.

$3

`typescript
import { toast } from 'sonner-native';

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

$3

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.

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

`ts
// 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