{"_id":"@azzamydev/react-native-toast","name":"@azzamydev/react-native-toast","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@azzamydev/react-native-toast","version":"0.1.1","description":"Toast React Native","main":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","exports":{".":{"source":"./src/index.tsx","types":"./lib/typescript/src/index.d.ts","default":"./lib/module/index.js"},"./package.json":"./package.json"},"scripts":{"example":"yarn workspace react-native-toast-example start","test":"jest","typecheck":"tsc","lint":"eslint \"**/*.{js,ts,tsx}\"","clean":"del-cli lib","prepare":"bob build","release":"release-it --only-version"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/AzzamyDev/react-native-toast.git"},"author":{"name":"azzamydev","email":"anggabaskara60@gmail.com","url":"https://github.com/AzzamyDev"},"license":"MIT","bugs":{"url":"https://github.com/AzzamyDev/react-native-toast/issues"},"homepage":"https://github.com/AzzamyDev/react-native-toast#readme","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"devDependencies":{"@commitlint/config-conventional":"^19.8.1","@eslint/compat":"^1.3.2","@eslint/eslintrc":"^3.3.1","@eslint/js":"^9.35.0","@evilmartians/lefthook":"^1.12.3","@react-native/babel-preset":"0.81.1","@react-native/eslint-config":"^0.81.1","@release-it/conventional-changelog":"^10.0.1","@types/jest":"^29.5.14","@types/react":"^19.1.12","@typescript-eslint/eslint-plugin":"^7.18.0","@typescript-eslint/parser":"^7.18.0","@typescript-eslint/typescript-estree":"^8.43.0","commitlint":"^19.8.1","del-cli":"^6.0.0","eslint":"^8.57.0","eslint-config-prettier":"^10.1.8","eslint-plugin-jest":"latest","eslint-plugin-prettier":"^5.5.4","jest":"^29.7.0","prettier":"^3.6.2","react":"19.1.0","react-native":"0.81.4","react-native-builder-bob":"^0.40.13","release-it":"^19.0.4","typescript":"^5.6.0"},"peerDependencies":{"react":"*","react-native":"*","react-native-svg":"*"},"workspaces":["example"],"packageManager":"yarn@3.6.1","jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":{"name":"angular"}}}},"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":[["module",{"esm":true}],["typescript",{"project":"tsconfig.build.json"}]]},"create-react-native-library":{"languages":"js","type":"library","version":"0.54.3"},"dependencies":{"react-native-gesture-handler":"^2.20.2","react-native-reanimated":"^4.1.0","react-native-safe-area-context":"^5.6.1","react-native-svg":"^15.2.0","react-native-worklets":"^0.5.1"},"private":false,"_id":"@azzamydev/react-native-toast@0.1.1","gitHead":"44f0be98f7a2f4bd618e0cab9d7021c65a7e5ba0","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-/pEWgt3r2c8c1sCz+9L1z4nP47UtfrDhs8Ut5uGFObdS6ExmGoNsje/v181CuARylVBzki8WcEJxm6Q97Nv7dg==","shasum":"9a3f258419a72da93135e211cfd4d4353d67b343","tarball":"https://registry.npmjs.org/@azzamydev/react-native-toast/-/react-native-toast-0.1.1.tgz","fileCount":30,"unpackedSize":47156,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF4ahewuigKArrg61iPagd2E124CHEPBuuWBhiOoYXm9AiANNYNaY3eYZumeeyOXv/Cz8C8f47NUC67TkvZJE0EpCQ=="}]},"_npmUser":{"name":"azzamydev","email":"anggabaskara60@gmail.com"},"directories":{},"maintainers":[{"name":"azzamydev","email":"anggabaskara60@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-toast_0.1.1_1757878714144_0.14740756668059096"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-14T19:38:34.040Z","0.1.1":"2025-09-14T19:38:34.405Z","modified":"2025-09-14T19:38:34.692Z"},"maintainers":[{"name":"azzamydev","email":"anggabaskara60@gmail.com"}],"description":"Toast React Native","homepage":"https://github.com/AzzamyDev/react-native-toast#readme","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/AzzamyDev/react-native-toast.git"},"author":{"name":"azzamydev","email":"anggabaskara60@gmail.com","url":"https://github.com/AzzamyDev"},"bugs":{"url":"https://github.com/AzzamyDev/react-native-toast/issues"},"license":"MIT","readme":"# React Native Toast 🍞\n\nA beautiful, customizable, and animated toast notification library for React Native with TypeScript support.\n\n## Features ✨\n\n- 🎨 **Beautiful UI** - Modern design with smooth animations\n- 🎯 **TypeScript Support** - Fully typed for better development experience\n- 🎭 **4 Toast Types** - Success, Error, Warning, and Info variants\n- 📍 **Flexible Positioning** - Top, center, or bottom positioning\n- ⏱️ **Auto-dismiss** - Configurable duration with progress bar\n- 🎪 **Smooth Animations** - Spring animations powered by Reanimated\n- 🎮 **Interactive** - Tap to dismiss or trigger custom actions\n- 🎨 **Custom Icons** - SVG icons for each toast type\n- 📱 **Safe Area** - Respects device safe areas\n- 🔧 **Highly Configurable** - Extensive customization options\n\n## Installation\n\n```sh\nnpm install @azzamydev/react-native-toast\n```\n\n### Dependencies\n\nThis library requires the following peer dependencies:\n\n```sh\nnpm install react-native-reanimated react-native-svg react-native-safe-area-context react-native-gesture-handler\n```\n\nFor iOS, run:\n```sh\ncd ios && pod install\n```\n\n## Quick Start\n\n### 1. Setup Provider\n\nWrap your app with `ToastProvider` and add `ToastContainer`:\n\n```tsx\nimport React from 'react';\nimport { ToastProvider, ToastContainer } from '@azzamydev/react-native-toast';\nimport { SafeAreaView } from 'react-native-safe-area-context';\n\nexport default function App() {\n  return (\n    <ToastProvider>\n      <SafeAreaView style={{ flex: 1 }}>\n        {/* Your app content */}\n      </SafeAreaView>\n      <ToastContainer />\n    </ToastProvider>\n  );\n}\n```\n\n### 2. Use Toast Hook\n\n```tsx\nimport React from 'react';\nimport { View, TouchableOpacity, Text } from 'react-native';\nimport { useToast } from '@azzamydev/react-native-toast';\n\nconst MyComponent = () => {\n  const { show } = useToast();\n\n  const showSuccess = () => {\n    show({\n      type: 'success',\n      title: 'Success!',\n      message: 'Operation completed successfully',\n      duration: 3000,\n    });\n  };\n\n  return (\n    <View>\n      <TouchableOpacity onPress={showSuccess}>\n        <Text>Show Toast</Text>\n      </TouchableOpacity>\n    </View>\n  );\n};\n```\n\n## API Reference\n\n### ToastOptions\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `type` | `'success' \\| 'error' \\| 'warning' \\| 'info'` | `'info'` | Toast type with different colors and icons |\n| `title` | `string` | `undefined` | Toast title text |\n| `message` | `string` | `undefined` | Toast message text |\n| `duration` | `number` | `3000` | Auto-dismiss duration in milliseconds |\n| `position` | `'top' \\| 'center' \\| 'bottom'` | `'top'` | Toast position on screen |\n| `autoClose` | `boolean` | `true` | Whether to auto-dismiss the toast |\n| `closeOnPress` | `boolean` | `true` | Whether to dismiss on tap |\n| `showProgress` | `boolean` | `true` | Whether to show progress bar |\n| `onPress` | `() => void` | `undefined` | Callback when toast is pressed |\n| `onClose` | `() => void` | `undefined` | Callback when toast is dismissed |\n\n### useToast Hook\n\n```tsx\nconst { show, hide, hideAll, toasts } = useToast();\n```\n\n#### Methods\n\n- `show(options: ToastOptions): string` - Show a toast and return its ID\n- `hide(id: string): void` - Hide a specific toast by ID\n- `hideAll(): void` - Hide all visible toasts\n- `toasts: ToastData[]` - Array of currently visible toasts\n\n## Usage Examples\n\n### Basic Toast Types\n\n```tsx\nconst { show } = useToast();\n\n// Success toast\nshow({\n  type: 'success',\n  title: 'Success!',\n  message: 'Data saved successfully',\n});\n\n// Error toast\nshow({\n  type: 'error',\n  title: 'Error!',\n  message: 'Failed to save data',\n});\n\n// Warning toast\nshow({\n  type: 'warning',\n  title: 'Warning!',\n  message: 'Please check your input',\n});\n\n// Info toast\nshow({\n  type: 'info',\n  title: 'Info',\n  message: 'New update available',\n});\n```\n\n### Custom Configuration\n\n```tsx\n// Custom duration and position\nshow({\n  type: 'success',\n  title: 'Custom Toast',\n  message: 'This appears at bottom for 5 seconds',\n  duration: 5000,\n  position: 'bottom',\n  showProgress: true,\n});\n\n// Interactive toast\nshow({\n  type: 'info',\n  title: 'Interactive Toast',\n  message: 'Tap me for action!',\n  closeOnPress: false,\n  onPress: () => {\n    console.log('Toast pressed!');\n    // Handle custom action\n  },\n});\n\n// Persistent toast (manual dismiss)\nshow({\n  type: 'warning',\n  title: 'Important Notice',\n  message: 'This stays until manually dismissed',\n  autoClose: false,\n  closeOnPress: true,\n});\n```\n\n### Managing Toasts\n\n```tsx\nconst { show, hide, hideAll } = useToast();\n\n// Show and get ID for later control\nconst toastId = show({\n  type: 'info',\n  title: 'Loading...',\n  message: 'Please wait',\n  autoClose: false,\n});\n\n// Hide specific toast\nsetTimeout(() => {\n  hide(toastId);\n}, 5000);\n\n// Hide all toasts\nconst clearAll = () => {\n  hideAll();\n};\n```\n\n### Advanced Example\n\n```tsx\nconst showAdvancedToast = () => {\n  show({\n    type: 'success',\n    title: 'Upload Complete',\n    message: 'Your file has been uploaded successfully',\n    duration: 4000,\n    position: 'top',\n    showProgress: true,\n    closeOnPress: true,\n    onPress: () => {\n      // Navigate to uploaded file\n      navigation.navigate('Files');\n    },\n    onClose: () => {\n      // Analytics or cleanup\n      console.log('Toast dismissed');\n    },\n  });\n};\n```\n\n## Animations\n\nThe library uses `react-native-reanimated` for smooth animations:\n\n- **Entry Animation**: Spring animation with scale and translate effects\n- **Exit Animation**: Fade out with scale down\n- **Progress Bar**: Smooth width animation matching toast duration\n- **Gesture Support**: Swipe to dismiss (planned feature)\n\n## Customization\n\n### Colors\n\nEach toast type has predefined colors:\n\n- **Success**: `#4CAF50` (Green)\n- **Error**: `#F44336` (Red)\n- **Warning**: `#FF9800` (Orange)\n- **Info**: `#2196F3` (Blue)\n\n### Icons\n\nCustom SVG icons are included for each type:\n- Success: Checkmark in circle\n- Error: X in circle\n- Warning: Exclamation triangle\n- Info: Info circle\n\n## TypeScript Support\n\nFull TypeScript support with exported types:\n\n```tsx\nimport type {\n  ToastType,\n  ToastPosition,\n  ToastOptions,\n  ToastData,\n  ToastContextType,\n} from '@azzamydev/react-native-toast';\n```\n\n## Requirements\n\n- React Native >= 0.60\n- iOS 11+ / Android API 21+\n- react-native-reanimated >= 3.0\n- react-native-svg >= 13.0\n- react-native-safe-area-context >= 4.0\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT © [AzzamyDev](https://github.com/AzzamyDev)\n\n---\n\nMade with ❤️ and [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","readmeFilename":"README.md","_rev":"1-e79420da88d4fa29b83355b896aac12c"}