react-native-toasty-toast

A customizable toast component for React Native, allowing you to display informational messages like success, error, warning, and info. The toast can appear at the top or bottom of the screen, with configurable styles and duration.

Demo

The demo above shows:

Multiple toast types in action
Smooth animations and transitions
Different positioning options
Auto-dismiss behavior

Features

Multiple toast types (success, error, warning)
Flexible positioning (top or bottom)
Smooth animations
Customizable duration
Lightweight
Written in TypeScript
Easy to integrate
Fully customizable styles

Installation

# Using npm
npm install react-native-toasty-toast

# Using yarn
yarn add react-native-toasty-toast

Usage

Step 1: Wrap Your App with ToastProvider

First, wrap your root component with the ToastProvider:

import React from 'react';
import { ToastProvider } from 'react-native-toasty-toast';
import Home from './Home';

const App = () => {
  return (
    <ToastProvider>
      <Home />
    </ToastProvider>
  );
};

export default App;

Step 2: Use the Toast Hook

Use the useToast hook in any component to show toast notifications:

import React from 'react';
import { Button } from 'react-native';
import { useToast } from 'react-native-toasty-toast';

const Home = () => {
  const { showToast } = useToast();

  const showSuccessToast = () => {
    showToast('Operation successful!', 'success', 'top', 3000);
  };

  const showErrorToast = () => {
    showToast('Something went wrong!', 'error', 'bottom', 3000);
  };

  const showWarningToast = () => {
    showToast('Please check your input!', 'warning', 'top', 3000);
  };

  return (
    <>
      <Button title="Show Success" onPress={showSuccessToast} />
      <Button title="Show Error" onPress={showErrorToast} />
      <Button title="Show Warning" onPress={showWarningToast} />
    </>
  );
};

export default Home;

API Reference

ToastProvider

The provider component that enables toast functionality throughout your app.

Props: None required

useToast

A hook that returns an object with the showToast function.

showToast Parameters

Parameter	Type	Description	Required
message	string	The text to display in the toast	Yes
type	'success' \| 'error' \| 'warning'	The type of toast to display	Yes
position	'top' \| 'bottom'	Where to display the toast	Yes
duration	number	How long to show the toast (in milliseconds)	Yes

Examples

Success Toast

showToast('Profile updated successfully!', 'success', 'top', 3000);

Error Toast

showToast('Failed to save changes', 'error', 'bottom', 3000);

Warning Toast

showToast('Low storage space remaining', 'warning', 'top', 3000);