An opinionated toast component for React Native. A port of @emilkowalski's sonner.
- 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
https://snack.expo.dev/@gunnartorfis/sonner-native
npx expo install sonner-native
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
import { Toaster } from 'sonner-native';
function App() {
return (
<View>
<NavigationContainer>...</NavigationContainer>
<Toaster />
</View>
);
}
import { toast } from 'sonner-native';
function SomeComponent() {
return (
<Button
title="Show Toast"
onPress={() => toast('Hello, World!')}
/>
);
}
For more advanced usage, check out the documentation
demo.mov
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library