{"_id":"@amitsolanki1409/react-native-toast-message","_rev":"2-fa1bd3e7382eab34cf5d8808aa944d0a","name":"@amitsolanki1409/react-native-toast-message","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@amitsolanki1409/react-native-toast-message","version":"1.0.0","keywords":["react-native","toast","react-native-toast","toast-message","custom-toast","react-native-component"],"author":{"name":"Amitkumar Solanki"},"license":"MIT","_id":"@amitsolanki1409/react-native-toast-message@1.0.0","maintainers":[{"name":"amitsolanki1409","email":"amitsolanki1409@gmail.com"}],"homepage":"https://github.com/amitsolanki1409/react-native-toast-message#readme","bugs":{"url":"https://github.com/amitsolanki1409/react-native-toast-message/issues"},"dist":{"shasum":"f512ec2a58c995398de118146d14a87469ab3abc","tarball":"https://registry.npmjs.org/@amitsolanki1409/react-native-toast-message/-/react-native-toast-message-1.0.0.tgz","fileCount":9,"integrity":"sha512-o3FW2jFh+5bPvzRpKKXq5dLllSY1FOxWH45o7FHybu24bXs7v4tIf82DWdwUSY0Pu3zlr5LJn0jfWkx49cptdg==","signatures":[{"sig":"MEYCIQDTw/tEJuWhhZrXlUbVhf+76agDx0o9W93ePVgu+f8QXAIhAPYp1fjBfGpRSFFckpAZpA/Ztw3pztipVBRVhKzG2sZX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12371},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"129d403de359e626a137f8a459a5ec4300f72ee0","scripts":{"build":"tsc","prepare":"npm run build"},"_npmUser":{"name":"amitsolanki1409","actor":{"name":"amitsolanki1409","type":"user","email":"amitsolanki1409@gmail.com"},"email":"amitsolanki1409@gmail.com"},"repository":{"url":"git+https://github.com/amitsolanki1409/react-native-toast-message.git","type":"git"},"_npmVersion":"10.7.0","description":"A customizable and lightweight toast component for React Native.","directories":{},"_nodeVersion":"18.20.4","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-native":"^0.72.0"},"peerDependencies":{"react":">=17.0.0","react-native":">=0.65.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-toast-message_1.0.0_1750425442231_0.7244540508569561","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@amitsolanki1409/react-native-toast-message","version":"1.0.1","description":"A customizable and lightweight toast component for React Native.","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/amitsolanki1409/react-native-toast-message.git"},"publishConfig":{"access":"public"},"keywords":["react-native","toast","react-native-toast","toast-message","custom-toast","react-native-component"],"author":{"name":"Amitkumar Solanki"},"license":"MIT","peerDependencies":{"react":">=17.0.0","react-native":">=0.65.0"},"devDependencies":{"typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-native":"^0.72.0"},"_id":"@amitsolanki1409/react-native-toast-message@1.0.1","gitHead":"68506739d629b6dae01d18b67b87cb4db30daa9c","bugs":{"url":"https://github.com/amitsolanki1409/react-native-toast-message/issues"},"homepage":"https://github.com/amitsolanki1409/react-native-toast-message#readme","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"integrity":"sha512-r2JyC3qrlkPx3isFooLsm14Ec5RW0jL2+S652F+q5657Cs2V/McMhHbyPtqlIPcWUxPFNqhOON4Hok4iyqjQ2A==","shasum":"6111ce3b7697dbf178c40cc5edf13a6f3e0cb39e","tarball":"https://registry.npmjs.org/@amitsolanki1409/react-native-toast-message/-/react-native-toast-message-1.0.1.tgz","fileCount":9,"unpackedSize":12618,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC6iYNKYgr4BHERt3bgD84xX143Ze/duRAsunPPJKvKAgIhAKC6qYrx/MHBurhErZ7W4SJwPp2y6lZVXFsEtaYBJGqh"}]},"_npmUser":{"name":"amitsolanki1409","email":"amitsolanki1409@gmail.com","actor":{"name":"amitsolanki1409","email":"amitsolanki1409@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"amitsolanki1409","email":"amitsolanki1409@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-toast-message_1.0.1_1750425933702_0.12197335880492122"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-20T13:17:22.158Z","modified":"2025-06-20T13:25:34.378Z","1.0.0":"2025-06-20T13:17:22.427Z","1.0.1":"2025-06-20T13:25:33.862Z"},"bugs":{"url":"https://github.com/amitsolanki1409/react-native-toast-message/issues"},"author":{"name":"Amitkumar Solanki"},"license":"MIT","homepage":"https://github.com/amitsolanki1409/react-native-toast-message#readme","keywords":["react-native","toast","react-native-toast","toast-message","custom-toast","react-native-component"],"repository":{"type":"git","url":"git+https://github.com/amitsolanki1409/react-native-toast-message.git"},"description":"A customizable and lightweight toast component for React Native.","maintainers":[{"name":"amitsolanki1409","email":"amitsolanki1409@gmail.com"}],"readme":"# @amitsolanki1409/react-native-toast-message\r\n\r\n> A customizable and lightweight Toast notification component for React Native.\r\n\r\n`@amitsolanki1409/react-native-toast-message` provides a fully configurable toast message system for your React Native app. You can show success, error, info, or warning toasts with optional icons, custom durations, and custom styling.\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n- 🧩 Fully customizable styles\r\n- ⏱ Configurable duration\r\n- 🔁 Optional icons\r\n- 📦 Lightweight and framework-agnostic\r\n- 🧠 Written in TypeScript\r\n- 📐 Supports top, center, and bottom positions\r\n- 🎯 Easy to integrate with a single line\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @amitsolanki1409/react-native-toast-message\r\n# or\r\nyarn add @amitsolanki1409/react-native-toast-message\r\n```\r\n\r\n---\r\n\r\n## ⚙️ Usage\r\n\r\n### 1. **Wrap your app with `Toast.ToastContainer()`**\r\n\r\nIn your root component (usually `App.tsx` or `MainLayout.tsx`):\r\n\r\n```tsx\r\nimport React from \"react\";\r\nimport { View } from \"react-native\";\r\nimport Toast from \"@amitsolanki1409/react-native-toast-message\";\r\n\r\nexport default function App() {\r\n  return (\r\n    <View style={{ flex: 1 }}>\r\n      {/* Your app's UI */}\r\n      <Toast.ToastContainer />\r\n    </View>\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n### 2. **Show a toast**\r\n\r\nAnywhere in your app:\r\n\r\n```tsx\r\nimport Toast from \"@amitsolanki1409/react-native-toast-message\";\r\n\r\nToast.show({\r\n  message: \"Profile updated successfully!\",\r\n  type: \"success\", // success | error | info | warning\r\n});\r\n```\r\n\r\n---\r\n\r\n### 3. **With optional title and position**\r\n\r\n```tsx\r\nToast.show({\r\n  title: \"Success\",\r\n  message: \"Data saved!\",\r\n  type: \"success\",\r\n  position: \"bottom\", // top | center | bottom\r\n});\r\n```\r\n\r\n---\r\n\r\n### 4. **Custom Icon**\r\n\r\nPass in any valid React element as the `Icon`:\r\n\r\n```tsx\r\nimport Icon from \"react-native-vector-icons/MaterialCommunityIcons\";\r\n\r\nToast.show({\r\n  message: \"No internet connection\",\r\n  type: \"error\",\r\n  Icon: <Icon name=\"wifi-off\" size={24} color=\"#fff\" />,\r\n});\r\n```\r\n\r\n---\r\n\r\n### 5. **Custom Styles**\r\n\r\n```tsx\r\nToast.show({\r\n  message: \"Custom styled toast\",\r\n  title: \"Notice\",\r\n  type: \"info\",\r\n  titleStyle: { fontSize: 20, fontWeight: \"bold\" },\r\n  messageStyle: { color: \"#333\" },\r\n  containerStyle: { borderWidth: 2, borderColor: \"#000\" },\r\n  alertColor: \"#0af\", // overrides icon background color\r\n});\r\n```\r\n\r\n---\r\n\r\n## 🧩 Props Reference\r\n\r\n| Prop             | Type                                          | Default      | Description                                |\r\n| ---------------- | --------------------------------------------- | ------------ | ------------------------------------------ |\r\n| `title`          | `string`                                      | `type` value | Title of the toast                         |\r\n| `message`        | `string`                                      | **Required** | Message text                               |\r\n| `type`           | `\"success\" \\| \"error\" \\| \"info\" \\| \"warning\"` | `\"success\"`  | Type of toast, determines background color |\r\n| `position`       | `\"top\" \\| \"center\" \\| \"bottom\"`               | `\"top\"`      | Position of toast on screen                |\r\n| `duration`       | `number`                                      | `3000`       | Duration in milliseconds                   |\r\n| `onClose`        | `() => void`                                  | No           | Callback when toast is dismissed           |\r\n| `Icon`           | `ReactNode`                                   | No           | Custom React icon component                |\r\n| `titleStyle`     | `TextStyle`                                   | No           | Custom style for title                     |\r\n| `messageStyle`   | `TextStyle`                                   | No           | Custom style for message                   |\r\n| `containerStyle` | `ViewStyle`                                   | No           | Custom style for the toast container       |\r\n| `alertColor`     | `ColorValue`                                  | No           | Background color of the icon container     |\r\n\r\n---\r\n\r\n## 🧪 Example\r\n\r\n```tsx\r\nimport React from \"react\";\r\nimport { Button, View } from \"react-native\";\r\nimport Toast from \"@amitsolanki1409/react-native-toast-message\";\r\nimport Icon from \"react-native-vector-icons/MaterialCommunityIcons\";\r\n\r\nexport default function DemoScreen() {\r\n  return (\r\n    <View style={{ flex: 1, justifyContent: \"center\", alignItems: \"center\" }}>\r\n      <Button\r\n        title=\"Show Toast\"\r\n        onPress={() =>\r\n          Toast.show({\r\n            title: \"Error\",\r\n            message: \"Something went wrong!\",\r\n            type: \"error\",\r\n            position: \"bottom\",\r\n            Icon: <Icon name=\"alert-circle\" size={24} color=\"#fff\" />,\r\n          })\r\n        }\r\n      />\r\n    </View>\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🧼 Manual Hide\r\n\r\nYou can manually hide the toast by calling:\r\n\r\n```ts\r\nToast.hide();\r\n```\r\n\r\n---\r\n\r\n## 🧠 Best Practices\r\n\r\n- Make sure to include `Toast.ToastContainer` at the root level of your app. like:\r\n  <ToastManager.ToastContainer />\r\n- Customize the `Icon` and styles per your app’s theme.\r\n- Avoid showing multiple toasts rapidly—this library is intended to display one toast at a time.\r\n\r\n---\r\n\r\n## 📁 Folder Structure Suggestion\r\n\r\nYou can keep the components like this if you're building your own:\r\n\r\n```\r\ncomponents/\r\n  └── Toast/\r\n      ├── Toast.tsx          # Singleton logic\r\n      ├── ToastService.tsx   # UI renderer\r\n```\r\n\r\n---\r\n\r\n## 📜 License\r\n\r\nMIT © 2025 \\[Amitkumar Solanki]\r\n","readmeFilename":"README.md"}