Gathering detailed insights and metrics for sonner-native
An opinionated toast component for React Native. A port of @emilkowalski's sonner.
Installations
npm install sonner-nativeDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.11.0
NPM Version
10.2.4
Releases
47
Contributors
12
Languages
3
TypeScript
JavaScript
CSS
TypeScript (97.72%)
JavaScript (2.19%)
CSS (0.09%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
94,057
Last Day
1,037
Last Week
6,042
Last Month
26,404
Last Year
94,057
GitHub Statistics
569 Stars
286 Commits
19 Forks
2 Watching
5 Branches
12 Contributors
Bundle Size
15.63 kB
Minified
5.35 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.17.0
Package Id
sonner-native@0.17.0
Unpacked Size
279.33 kB
Size
50.48 kB
File Count
159
NPM Version
10.2.4
Node Version
20.11.0
Publised On
04 Feb 2025
Total Downloads
Cumulative downloads
Total Downloads
94,057
Last day
-18.3%
1,037
Compared to previous day
Last week
-13.6%
6,042
Compared to previous week
Last month
36.3%
26,404
Compared to previous month
Last year
0%
94,057
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
7
Dev Dependencies
23
@commitlint/config-conventional@evilmartians/lefthook@react-native/eslint-config@release-it/conventional-changelog@types/jest@types/reactcommitlintdel-clieslinteslint-config-prettiereslint-plugin-prettierjestprettierreactreact-nativereact-native-builder-bobreact-native-gesture-handlerreact-native-reanimatedreact-native-safe-area-contextreact-native-screensreact-native-svgrelease-ittypescript
Versions
Sonner React Native Toasts
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 via styles 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}
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.
1// sonner.ts 2export * from 'sonner-native';
1// sonner.web.ts 2export * 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
No vulnerabilities found.
No security vulnerabilities found.