React Native Toast Notification

A simple and customizable toast notification system for React Native applications.

Installation

1npm i @phonehtut/react-native-sonner
2# or
3yarn add @phonehtut/react-native-sonner

Dependencies

This package requires the following peer dependencies:

• react
• react-native
• moti
• @expo/vector-icons
• tailwind-merge

Usage

1. Wrap your app with the ToastProvider:

1import { ToastProvider } from '@phonehtut/react-native-sonner';
2
3export default function App() {
4  return (
5    <ToastProvider>
6      {/* Your app components */}
7    </ToastProvider>
8  );
9}

2. Use the useToastContext hook to show toasts:

1import { useToastContext } from '@phonehtut/react-native-sonner';
2
3function MyComponent() {
4  const { showToast } = useToastContext();
5
6  const handleSuccess = () => {
7    showToast('Operation successful!', 'success');
8  };
9
10  const handleError = () => {
11    showToast('Something went wrong!', 'error');
12  };
13
14  const handleInfo = () => {
15    showToast('Here is some information', 'info');
16  };
17
18  return (
19    // Your component JSX
20  );
21}

API

ToastProvider

The provider component that enables toast functionality throughout your app.

useToastContext

A hook that provides access to the toast functionality:

1const { showToast, toasts, removeToast } = useToastContext();

Add tailwind config

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [
4    "./app/**/*.{js,jsx,ts,tsx}",
5    "./components/**/*.{js,jsx,ts,tsx}",
6    "./node_modules/@phonehtut/react-native-sonner/**/*.{js,jsx,ts,tsx}" /*Add this*/
7  ],
8  presets: [require("nativewind/preset")],
9  theme: {
10    extend: {},
11  },
12  plugins: [],
13}

showToast(message: string, type?: 'success' | 'error' | 'info', duration?: number)

Shows a toast notification:

• message: The message to display
• type: The type of toast ('success', 'error', or 'info')
• duration: How long the toast should be visible (in milliseconds, default: 3000)

License

MIT