react-native-toastier
v1.4.0
Published
A Fully Customizable Toast Component for React Native.
Downloads
171
Maintainers
Keywords
Readme
react-native-toastier
A Fully Customizable Toast Component for React Native.
Demo
Installation
Install the package via npm or yarn
npm install react-native-toastier
or
yarn add react-native-toastier
Usage/Examples
Wrap your app in ToastProvider to provide context for the toast service.
import { ToastProvider } from 'react-native-toastier'
export default function App() {
return (
<ToastProvider>
<YourApp />
<ToastProvider/>
);
}
Use the ToastService to display a toast message anywhere in the app.
import { ToastService } from 'react-native-toastier';
export default function Component() {
useEffect(() => {
ToastService.show({
message: "Hello Toast"
})
}, []);
// Rest of the code....
}
Toast Service
To show success message
ToastService.show({
message: "Hello Toast"
})
To show error message
ToastService.showError({
message: "Hello Toast"
})
To show info message
ToastService.showInfo({
message: "Hello Toast"
})
To show warning message
ToastService.showWarning({
message: "Hello Toast"
})
Custome Toast
ToastService.show({
message: 'Hello',
children: <Custom/>,
textStyle: { color: '#000' },
contentContainerStyle: { borderStartWidth: 5, backgroundColor: '#fff', paddingLeft: 12, flex: 1, borderStartColor: theme.colors.green[300]}
})
Props
Props can be passed from the provider (will apply to all toast) as well as from the toast service (will apply to a particular toast).
ToastProvider Props
| Prop | Data type | Default | Description | | ------------- |:-------------:| :---------:| :-----| | children | ReactNode | Required. | The children for context provider. | | theme | Theme | - | Update defualt toast theme. | | animation | string | zoomIn | The animation type to taost message. | | position | string | top | Toast meesage position top, bottom. | | duration | number | 15000 | How long to display the Toast message. | | contentContainerStyle | ViewStyle | - | To update toast message outter container style. | | textContainerStyle | ViewStyle | - | To update toast message container style. | | textStyle | TextStyle | - | To update toast message test style. |
Toast Service Options
| Prop | Data type | Default | Description | | ------------- |:-------------:| :---------:| :-----| | message | string | - | The message to show. | | children | ReactNode | - | The children for custom toast. | | left | ReactNode | - | The left component for a toast. | | right | ReactNode | - | The right component for a toast. | | theme | Theme | - | Update default toast theme for particular toast. | | animation | string | zoomIn | Update animation for particular toast. | | position | string | top | Update position for particular toast. | | duration | number | 15000 | Update duration for particular toast. | | contentContainerStyle | ViewStyle | - | Update outter container style for particulat toast. | | textContainerStyle | ViewStyle | - | Update message container style for particulat toast. | | textStyle | TextStyle | - | Update toast message test style for particulat toast. |
Donation
If you find my projects and contributions helpful, consider supporting me. Your support means a lot and helps me continue creating and sharing more cool stuff.
Hire
I'm a skilled React and React Native developer ready to help with your project. Let's create something great together! Contact me [email protected]