Skip to content

hknakn/sonner-native

 
 

Repository files navigation

Sonner Native

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, styles & className props
  • Works outside of React components

Showcase

Screenshot 2024-09-06 at 16 33 10 Screenshot 2024-09-06 at 16 32 27 Screenshot 2024-09-06 at 16 32 33 Screenshot 2024-09-06 at 16 32 39 Screenshot 2024-09-06 at 16 33 04

Expo Snack

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

Installation

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:

Usage

In your App.tsx/entry point

import { Toaster } from 'sonner-native';

function App() {
  return (
    <View>
      <NavigationContainer>...</NavigationContainer>
      <Toaster />
    </View>
  );
}

Show a toast

import { toast } from 'sonner-native';

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

Documentation

For more advanced usage, check out the documentation

Recording

demo.mov

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 97.5%
  • JavaScript 2.4%
  • CSS 0.1%