React Native Toastify

A highly customizable and performant toast notification library for React Native. Featuring smooth animations, swipe gestures, and flexible styling options.

---

🚀 Features

• Single-root container: Mount once at the app root.
• Imperative API: Use useToast hook anywhere in your app.
• Light/Dark Theme: System-aware with optional forced theme.
• Promise Helper: Show loading, success, and error states.
• Customizable: Add custom content, styles, and emojis.

---

📦 Installation

Install the package using npm or yarn:

npm install rn-toastify

Or:

yarn add rn-toastify

Peer Dependencies

Ensure the following peer dependencies are installed:

• react
• react-native
• react-native-reanimated (v2+)
• lottie-react-native

For iOS, run:

cd ios && pod install

---

🛠️ Quick Start

Step 1: Mount the Toast Container

Add the ToastContainer to your app's root component (e.g., App.js):

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MainNavigator from './src/navigation';
import { ToastContainer } from 'rn-toastify';

export default function App() {
  return (
    <>
      <NavigationContainer>
        <MainNavigator />
      </NavigationContainer>
      <ToastContainer theme="dark" /> {/* Optional: Force theme */}
    </>
  );
}

Step 2: Use the useToast Hook

Call toast methods anywhere in your app:

import React from 'react';
import { View, Button } from 'react-native';
import useToast from 'rn-toastify';

export default function HomeScreen() {
  const { success, error } = useToast();

  return (
    <View>
      <Button title="Show Success" onPress={() => success('Operation successful!')} />
      <Button title="Show Error" onPress={() => error('Something went wrong.', { position: 'top' })} />
    </View>
  );
}

---

📖 API Reference

useToast Hook

The useToast hook provides the following methods:

Method	Description
show	Display a custom toast.
success	Show a success toast.
error	Show an error toast.
custom	Render a custom React element.
emoji	Display a toast with an emoji.
promise	Handle promise states with toasts.

Common Options

Option	Type	Description
duration	number	Duration in milliseconds.
position	string	`'top'
style	object	Custom styles for the toast wrapper.

promise Method Options

Option	Type	Description
loading	string	Message during loading.
success	string	Message on success.
error	string	Message on error.

---

🌈 Examples

Success Toast

const { success } = useToast();
success('Operation successful!', { duration: 1500, position: 'top' });

Promise Helper

const { promise } = useToast();

const myPromise = fetch('/api/save');

promise(myPromise, {
  loading: 'Saving…',
  success: 'Saved successfully!',
  error: 'Save failed.',
});

Custom Content

const { custom } = useToast();
custom(<MyCustomComponent />, { duration: 2000 });

Emoji Toast

const { emoji } = useToast();
emoji('Great job!', '🎉', { duration: 1300 });

---

🎨 Theme Support

• Automatic: Detects system theme (light/dark).
• Forced: Pass theme="light" or theme="dark" to ToastContainer.

If the system theme is unavailable, the default is light.

---

🐛 Troubleshooting

Common Issues

• Toasts not showing: Ensure ToastContainer is mounted at the app root.
• Reanimated errors: Add the Reanimated Babel plugin and rebuild.
• Lottie issues on iOS: Run cd ios && pod install.

---

📜 License

MIT License. See LICENSE for details.