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]

License

MIT