react-native-lottie-toast/README.md

A zero-dependency, customizable toast component for React Native and Expo.

# 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

```bash
npm install react-native-lottie-toast
```

### Using yarn

```bash
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

```javascript
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

```javascript
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`](./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

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

### Error Toast

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

### Warning Toast

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

### Info Toast

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

### Custom Toast

```javascript
<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](https://github.com/vijaykishan312)