react-native-toastbox
v0.0.5
Published
A toast notification system for React Native applications. This system supports different types of toasts (`info`, `error`, and `success`) and has built-in animations to enhance user experience.
Downloads
3
Readme
React-Native-Toastbox
A toast notification system for React Native applications. This system supports different types of toasts (info
, error
, and success
) and has built-in animations to enhance user experience.
Table of Contents
Installation
//To do
Usage
Wrap your App with ToastProvider
To get started, you must wrap the part of your application where you want to display toasts with the ToastProvider
.
import { ToastProvider } from 'react-native-toastbox';
function Section() {
return (
<ToastProvider>
{/* children */}
</ToastProvider>
);
}
Use the useToast hook
Wherever you want to display a toast, use the useToast
hook.
import { useToast } from './path-to-your-toast-files';
function MyComponent() {
const { showToast, hideToast } = useToast();
const handleClick = () => {
showToast({
id: 'unique-id',
text1: 'This is a toast!',
});
};
return <Button onClick={handleClick}>Show Toast</Button>;
}
API
Toast Customization
Modifiable attributes of a toast.
type Toast = {
id: string;
type?: 'info' | 'error' | 'success';
text1: string;
text2?: string;
autoHide?: boolean;
visibilityTime?: number;
animationConfig?: {
duration?: number;
tension?: number;
friction?: number;
};
};
Contributing
We welcome contributions! If you find a bug or want to add a feature, please open an issue or submit a pull request.
License
MIT