Tutorial

🚀 Step-by-Step Guide to implement Toast notifications in React Native with smooth animations and anti-spam protection.

Video Tutorial

Watch our detailed video guide for a hands-on implementation walkthrough:

Features

• 🚀 Lightweight and performant
• 🎨 Customizable styling
• 🔄 Animation using React Native Reanimated
• 📱 Works on iOS and Android
• 📚 TypeScript support
• 🧠 Smart queueing system for multiple toasts

Prerequisites

Before you begin, make sure you have:

• React Native project set up
• Basic understanding of React Native and TypeScript

Installation

Peer Dependencies

Make sure you have these peer dependencies installed in your React Native project. Using incompatible versions may cause unexpected behavior or crashes:

{
  "react": "^18.3.1",
  "react-native": "^0.76.7",
  "react-native-reanimated": "^2.0.0"
}

1. Install the package using your preferred package manager:

npm install @masumdev/rn-toast
# or
yarn add @masumdev/rn-toast
# or
bun add @masumdev/rn-toast
# or
pnpm add @masumdev/rn-toast

2. Follow the react-native-reanimated installation instructions.

Basic Implementation

Provider Placement

Always place the Toaster component at the root level of your app. Incorrect provider placement can cause the toast notifications to malfunction.

1. First, add the Toaster component to your app:

import React from 'react';
import { View } from 'react-native';
import { Toaster } from '@masumdev/rn-toast';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Toaster />
      {/* Your app content */}
    </View>
  );
}

2. Use the useToast hook in your components:

import React from 'react';
import { Button, View } from 'react-native';
import { useToast } from '@masumdev/rn-toast';

export default function MyComponent() {
  const { showToast } = useToast();

  const handlePress = () => {
    showToast('Operation successful!', 'success');
  };

  return (
    <View>
      <Button title="Show Toast" onPress={handlePress} />
    </View>
  );
}

Advanced Usage

Toast Types

Toast Types

The library supports three types of toasts:

• info (default)
• success
• error

// Show an info toast
showToast('This is an info message');

// Show a success toast
showToast('Operation successful!', 'success');

// Show an error toast
showToast('Something went wrong', 'error');

Custom Configuration

Customization

You can customize the duration and animation speed of toasts to match your app's needs.

// Custom duration (8 seconds)
showToast('This will stay longer', 'info', { duration: 8000 });

// Custom animation speed (200ms)
showToast('Quick animation', 'success', { animationDuration: 200 });

Customizing the Toaster Component

import React from 'react';
import { View } from 'react-native';
import { Toaster } from '@masumdev/rn-toast';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Toaster
        defaultDuration={3000} // 3 seconds default duration
        defaultAnimationDuration={300} // 300ms animation
        customIcons={{
          success: require('./assets/my-success-icon.png'),
          error: require('./assets/my-error-icon.png'),
          info: require('./assets/my-info-icon.png')
        }}
        customColors={{
          success: { background: '#e6ffe6', text: '#006600' },
          error: { background: '#ffe6e6', text: '#cc0000' },
          info: { background: '#e6f2ff', text: '#0066cc' }
        }}
      />
      {/* Your app content */}
    </View>
  );
}

Manual Toast Control

Manual Control

You can manually hide toasts using the hideToast function when needed.

import React from 'react';
import { Button, View } from 'react-native';
import { useToast } from '@masumdev/rn-toast';

export default function MyComponent() {
  const { showToast, hideToast } = useToast();

  const showMessage = () => {
    showToast('This is a long toast message...', 'info', { duration: 10000 });
  };

  const hideMessage = () => {
    hideToast(() => {
      console.log('Toast was dismissed');
    });
  };

  return (
    <View>
      <Button title="Show Toast" onPress={showMessage} />
      <Button title="Hide Toast" onPress={hideMessage} />
    </View>
  );
}