A lightweight and customizable toast notification component for React Native, using react-native-animatable for smooth animations.
npm install react-native-custom-toastmessageA lightweight and customizable toast notification component for React Native, using react-native-animatable for smooth animations.
success, error, warning, and info.
react-native-custom-toastmessage in your project:sh
npm install react-native-custom-toastmessage
`$3
Since this is a custom component, you need to copy the provided code into your project.Usage
$3
`tsx
import React from 'react';
import { ToastProvider } from 'react-native-custom-toastmessage';const App = () => {
return (
);
};
export default App;
`$3
`tsx
import React from 'react';
import { View, Button } from 'react-native';
import { useToast } from 'react-native-custom-toastmessage'; const ExampleScreen = () => {
const { ToastShow } = useToast();
return (
title="Show Success Toast"
onPress={() => ToastShow({ text: 'Operation successful!', type: 'success' })}
/>
title="Show Error Toast"
onPress={() => ToastShow({ text: 'Something went wrong!', type: 'error' })}
/>
);
};
export default ExampleScreen;
`Props
The ToastShow function accepts the following props:| Prop | Type | Description |
|-----------|---------|-------------|
|
text | string | The message to display. (Required) |
| type | 'success' \| 'error' \| 'warning' \| 'info' | The type of notification (default: 'info'). |
| duration | number | Duration in milliseconds before the toast disappears (default: 3000). |Customization
You can customize the toast styles by modifying the styles object in ToastProvider. For example, changing the background colors:
`tsx
const getColor = (type?: string) => {
switch (type) {
case 'success': return '#28a745';
case 'error': return '#dc3545';
case 'warning': return '#ffc107';
default: return '#007bff';
}
};
``If you find my work helpful, consider supporting me by buying me a coffee! Your support helps me keep working on open-source projects and creating more content.