react-native-lottie-toast

A zero-dependency, customizable toast notification component for React Native and Expo. Built entirely using the Animated API—no external packages!

✨ Features

• ✅ Zero dependencies - No third-party libraries required!
• 🎨 Fully customizable - Custom background color, text color, and emoji icon
• ⏱ Auto-dismiss and tap-to-dismiss - Smart dismissal options
• 🚀 Smooth animations - Powered by React Native's Animated API
• 📱 Expo compatible - Works seamlessly with Expo and bare React Native
• 🪶 Lightweight - Minimal footprint on your app

📦 Installation

Using npm

npm install react-native-lottie-toast

Using yarn

yarn add react-native-lottie-toast

Compatibility

• ✅ React Native (v0.68.0+)
• ✅ Expo (SDK 45+)
• ✅ TypeScript ready
• ✅ Works with both npm and yarn

🚀 Usage

Basic Example

import React, { useState } from "react";
import { View, Button } from "react-native";
import { Toast } from "react-native-lottie-toast";

export default function App() {
  const [showToast, setShowToast] = useState(false);

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

      <Toast
        visible={showToast}
        message="Hello! This is a toast message"
        icon="✅"
        backgroundColor="#4CAF50"
        textColor="#fff"
        duration={3000}
        onClose={() => setShowToast(false)}
      />
    </View>
  );
}

Multiple Toast Types

import React, { useState } from "react";
import { View, Button } from "react-native";
import { Toast } from "react-native-lottie-toast";

export default function App() {
  const [successToast, setSuccessToast] = useState(false);
  const [errorToast, setErrorToast] = useState(false);

  return (
    <View>
      <Button title="Success" onPress={() => setSuccessToast(true)} />
      <Button title="Error" onPress={() => setErrorToast(true)} />

      {/* Success Toast */}
      <Toast
        visible={successToast}
        message="Operation completed successfully!"
        icon="✅"
        backgroundColor="#4CAF50"
        textColor="#fff"
        duration={3000}
        onClose={() => setSuccessToast(false)}
      />

      {/* Error Toast */}
      <Toast
        visible={errorToast}
        message="Something went wrong!"
        icon="❌"
        backgroundColor="#F44336"
        textColor="#fff"
        duration={3000}
        onClose={() => setErrorToast(false)}
      />
    </View>
  );
}

Full Example

Check out the complete working example with multiple toast types in the example/App.js file.

📖 API Reference

Props

| Prop | Type | Default | Description | | ----------------- | ---------- | -------------------- | -------------------------------------------- | | visible | boolean | false | Controls the visibility of the toast | | message | string | 'This is a toast!' | The message to display in the toast | | icon | string | '✅' | Emoji or text icon to display | | backgroundColor | string | '#333' | Background color of the toast | | textColor | string | '#fff' | Color of the message text | | duration | number | 3000 | Duration in milliseconds before auto-dismiss | | onClose | function | () => {} | Callback function when toast closes |

💡 Examples

Success Toast

<Toast
  visible={showToast}
  message="Saved successfully!"
  icon="✅"
  backgroundColor="#4CAF50"
  textColor="#fff"
  duration={3000}
  onClose={() => setShowToast(false)}
/>

Error Toast

<Toast
  visible={showToast}
  message="Failed to save changes"
  icon="❌"
  backgroundColor="#F44336"
  textColor="#fff"
  duration={3000}
  onClose={() => setShowToast(false)}
/>

Warning Toast

<Toast
  visible={showToast}
  message="This action cannot be undone"
  icon="⚠️"
  backgroundColor="#FF9800"
  textColor="#fff"
  duration={3000}
  onClose={() => setShowToast(false)}
/>

Info Toast

<Toast
  visible={showToast}
  message="New updates available"
  icon="ℹ️"
  backgroundColor="#2196F3"
  textColor="#fff"
  duration={3000}
  onClose={() => setShowToast(false)}
/>

Custom Toast

<Toast
  visible={showToast}
  message="🎉 Welcome to the app!"
  icon="🚀"
  backgroundColor="#9C27B0"
  textColor="#FFD700"
  duration={4000}
  onClose={() => setShowToast(false)}
/>

🎯 Features in Detail

• Auto-dismiss: Toast automatically dismisses after the specified duration
• Tap-to-dismiss: Users can tap the toast to dismiss it immediately
• Smooth animations: Uses React Native's Animated API for smooth slide-in/out animations
• Customizable: Fully customizable colors, icons, messages, and duration
• Zero dependencies: No external libraries required
• Lightweight: Minimal footprint on your app

📝 License

MIT

🤝 Contributing

Contributions, issues, and feature requests are welcome!

👨‍💻 Author

Vijay Kishan

• GitHub: @vijaykishan312