Basic Usage

tip

Place the Toaster at the root of your app to ensure all components have access to the toast functionality. This is crucial for proper state management and performance optimization.

Basic Setup

Add Toaster 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>
  );
}

Usage

Use the useToast hook in your components:

danger

Never call useToast outside of a React component or in a conditional statement. This will lead to unexpected behavior and potential memory leaks.

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>
  );
}

tip

The useToast hook provides methods to show different types of toasts (success, error, info, warning). Choose the appropriate type based on your notification needs.

Video Tutorial

Watch Implementation Guide

Follow our step-by-step guide to integrate and customize the toast component in your React Native application