React-native-toastier NPM

react-native-toastier

A Fully Customizable Toast Component for React Native.

NPM Version NPM Downloads

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 hardikviradiya27@gmail.com