Sonner
An opinionated toast component for React Native.
The shadcn native Sonner component is a wrapper around the Sonner library for web and Sonner Native for React Native. It also provides themes for the toast component with a shadcn/ui style. Below is the complete guide to implementing the sonner.
Installation
pnpm add sonner sonner-native react-native-reanimated@3.18.0 react-safe-area-context react-native-svgUsage
Add the Toaster component to the root of your application.
import {Theme} from "@/components/theme";
import {NavigationContainer} from "@react-navigation/native";
import {Toaster} from "@/components/ui/sonner";
<Theme>
<NavigationContainer>{/* Your app */}</NavigationContainer>
<Toaster />
</Theme>;Call the toast function to show a toast.
import {toast} from "@/components/ui/sonner";
toast("Hello, world!");For more usage examples, see the sonner-native docs .
Expo Router
With Expo Router, you can omit the NavigationContainer and just use the Toaster component.
import {Theme} from "@/components/theme";
import {Toaster} from "@/components/ui/sonner";
<Theme>
{/* Your app */}
<Toaster />
</Theme>;