Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/muku534/react-native-toast
A lightweight and customizable toast notification library for React Native. This library provides pre-defined toasts, such as success, error, and loading, along with custom and emoji options. Users can display toast messages anywhere in their app without wrapping the entire app in a provider.
https://github.com/muku534/react-native-toast
custom-toasts lightweight-toast react-native react-native-toast-android react-native-toast-notificaiton toast-notifications
Last synced: 24 days ago
JSON representation
A lightweight and customizable toast notification library for React Native. This library provides pre-defined toasts, such as success, error, and loading, along with custom and emoji options. Users can display toast messages anywhere in their app without wrapping the entire app in a provider.
- Host: GitHub
- URL: https://github.com/muku534/react-native-toast
- Owner: muku534
- License: mit
- Created: 2024-07-24T08:32:33.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-11-26T10:05:06.000Z (29 days ago)
- Last Synced: 2024-11-26T11:23:17.691Z (29 days ago)
- Topics: custom-toasts, lightweight-toast, react-native, react-native-toast-android, react-native-toast-notificaiton, toast-notifications
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/rn-toastify
- Size: 2.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# react-native-toast
## Demo
Animated toast message component for React Native.
## Features
- 🚀 Imperative API
- 🎨 Customizable layouts
- 🔧 Flexible config
- 📅 Promise Handling
- 📍 Position Control
## Installation
```bash
npm install rn-toastify
```
## Usage
To integrate the toast notifications into your application, follow these steps:
- Import and Setup
Start by importing the necessary components and hooks from the library:
```javascript
import useToast from 'rn-toastify';
import ToastContainer from 'rn-toastify';
const AppContent = () => {
// Toast functions here
return (
{/* Buttons to trigger toasts */}
);
};
export default AppContent;
```
- Implementing Toasts
The useToast hook provides access to different types of toasts. Below are examples of how to implement each toast type:
- Success Toast
```javascript
import useToast from 'rn-toastify';
const { success } = useToast();
const handleSuccessToast = () => {
success('Operation was successful!', { duration: 1500, position: 'top' });
};
```
- Error Toast
```javascript
import useToast from 'rn-toastify';
const { error } = useToast();
const handleErrorToast = () => {
error('Something went wrong!', { duration: 1500, position: 'top' });
};
```
- Promise Toast
```javascript
import useToast from 'rn-toastify';
const { promise } = useToast();
const handlePromiseToast = () => {
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
// reject();
}, 1500);
});
promise(myPromise, {
loading: 'Loading...',
success: 'Promise resolved!',
error: 'Promise rejected!',
});
};
```
- Custom Toast
```javascript
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import useToast from 'rn-toastify';
const { custom } = useToast();
const handleCustomToast = () => {
custom(
Emilia Gates
Sure! 8:30pm works great!
,
{ duration: 1500, position: 'top' }
);
};
const styles = StyleSheet.create({
customContent: {
flexDirection: 'row',
alignItems: 'center',
},
image: {
width: 50,
height: 50,
borderRadius: 25,
},
textContainer: {
marginLeft: 10,
},
customText: {
fontWeight: 'bold',
},
customSubText: {
color: 'gray',
},
});
```
- Emoji Toast
```javascript
import useToast from 'rn-toastify';
const { emoji } = useToast();
const handleEmojiToast = () => {
emoji('Great job!', '👍', { duration: 1500, position: 'top' });
};
```
- Full Example
Here's a complete example to demonstrate how all the toast types can be implemented within a single component:
```javascript
import React from 'react';
import { StyleSheet, View, Button } from 'react-native';
import useToast from 'rn-toastify';
import ToastContainer from 'rn-toastify';
const AppContent = () => {
const { success, error, promise, custom, emoji } = useToast();
return (
success('Operation was successful!', { duration: 1500, position: 'top' })} />
error('Something went wrong!', { duration: 1500, position: 'top' })} />
{
const myPromise = new Promise((resolve) => setTimeout(resolve, 1500));
promise(myPromise, { loading: 'Loading...', success: 'Promise resolved!', error: 'Promise rejected!' });
}} />
custom(
Custom Toast Content
,
{ duration: 1500, position: 'top' }
)} />
emoji('Great job!', '👍', { duration: 1500, position: 'top' })} />
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
customContent: {
padding: 10,
backgroundColor: '#fff',
borderRadius: 5,
},
});
export default AppContent;
```
This example integrates multiple toast types and demonstrates how to trigger each one. It also includes the necessary ToastContainer to display the toasts.
## API Reference
#### useToast Hook Methods
All toast methods accept the following parameters:
| Parameter | Type | Description |
| :-------- | :------- | :------------------------- |
| `message` | `string` | **Required**. The message to display in the toast. |
| `options` | `object` | **Optional**. Configuration options for the toast (e.g., duration, position). |
- Methods
- success : Displays a success toast.
- error : Displays an error toast.
- promise : Handles a promise and displays loading, success, and error toasts based on the promise's state.
Additional options for promise method:
| Option | Type | Description |
| :-------- | :------- | :------------------------- |
| `loading` | `string` | The message to display in the toast. |
| `success` | `string` | Message to display if the promise resolves. |
| `error` | `string` | Message to display if the promise is rejected. |
- custom
Displays a custom toast with your own content.
| Parameter | Type | Description |
| :-------- | :------- | :------------------------- |
| `content` | `element` | **Required**. React element to render in the toast. |
- emoji
Displays a custom toast with your own content.
| Parameter | Type | Description |
| :-------- | :------- | :------------------------- |
| `emoji` | `string` | **Required**. The emoji to display alongside the message. |
- options
All toast methods accept an options object for configuration:
| Option | Type | Description |
| :-------- | :------- | :------------------------- |
| `duration` | `number` |**Optional**. Duration in milliseconds for which the toast is visible. |
| `position` | `string` | **Optional**. Position of the toast on the screen (top, bottom, center). |
## License
[MIT](https://choosealicense.com/licenses/mit/)