{"id":13522890,"url":"https://github.com/nandorojo/burnt","last_synced_at":"2025-05-13T21:08:23.087Z","repository":{"id":63317125,"uuid":"566952596","full_name":"nandorojo/burnt","owner":"nandorojo","description":"Crunchy toasts for React Native. 🍞","archived":false,"fork":false,"pushed_at":"2025-03-10T16:10:53.000Z","size":1465,"stargazers_count":1340,"open_issues_count":18,"forks_count":42,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T04:53:07.846Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nandorojo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"nandorojo"}},"created_at":"2022-11-16T19:03:13.000Z","updated_at":"2025-04-09T17:15:29.000Z","dependencies_parsed_at":"2023-02-10T10:15:55.006Z","dependency_job_id":"874c1308-aa14-44c4-b605-8c37c7284c6d","html_url":"https://github.com/nandorojo/burnt","commit_stats":{"total_commits":59,"total_committers":4,"mean_commits":14.75,"dds":"0.27118644067796616","last_synced_commit":"182c41a02db679a865ae4ac7d8cccd839525d6b4"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nandorojo%2Fburnt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nandorojo%2Fburnt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nandorojo%2Fburnt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nandorojo%2Fburnt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nandorojo","download_url":"https://codeload.github.com/nandorojo/burnt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251326148,"owners_count":21571624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:00:53.332Z","updated_at":"2025-04-28T13:59:18.963Z","avatar_url":"https://github.com/nandorojo.png","language":"Java","funding_links":["https://github.com/sponsors/nandorojo"],"categories":["Java","Libraries","UI Components"],"sub_categories":["UI Components","Toasts \u0026 Notifications"],"readme":"# 🍞 burnt\n\nCross-platform toasts for React Native, powered by native elements.\n\n- [Install](#installation)\n- [Usage](#api)\n\nNow with Android, iOS \u0026 Web Support.\n\n## Alerts\n\nhttps://user-images.githubusercontent.com/13172299/202289223-8a333223-3afa-49c4-a001-a70c76150ef0.mp4\n\n## ...and Toasts\n\nhttps://user-images.githubusercontent.com/13172299/231801324-3f0858a6-bd61-4d74-920f-4e77b80d26c1.mp4\n\n## ...and Web Support\n\nhttps://user-images.githubusercontent.com/13172299/236826405-b5f423bb-dafd-4013-a941-7accbea43c14.mp4\n\n## Context\n\nSee this\n[Twitter thread](https://twitter.com/FernandoTheRojo/status/1592923529644625920).\n\n## What\n\nThis is a library with a `toast` and `alert` method for showing ephemeral UI.\n\nOn iOS, it wraps [`SPIndicator`](https://github.com/ivanvorobei/SPIndicator) and\n[`AlertKit`](https://github.com/sparrowcode/AlertKit).\n\nOn Android, it wraps `ToastAndroid` from `react-native`. `Burnt.alert()` falls\nback to `Burnt.toast()` on Android. This may change in a future version.\n\nOn Web, it wraps [`sonner`](https://github.com/emilkowalski/sonner) by Emil\nKowalski.\n\nBurnt works with both the old \u0026 new architectures. It's built on top of JSI,\nthanks to Expo's new module system.\n\n## Features\n\n- Simple, imperative `toast` that uses **native** components under the hood,\n  rather than using React state with JS-based UI.\n- Animated icons\n- iOS App Store-like `alert` popups\n- Overlays on top of native iOS modals\n- Loading alerts\n\n## Modals\n\nDisplaying toasts on top of modals has always been an issue in React Native.\nWith Burnt, this works out of the box.\n\nhttps://user-images.githubusercontent.com/13172299/231801096-2894fbf3-4df7-45d7-9c72-f80d36fd45ef.mp4\n\n## Usage\n\n```tsx\nimport * as Burnt from \"burnt\";\n\nBurnt.toast({\n  title: \"Burnt installed.\",\n  preset: \"done\",\n  message: \"See your downloads.\",\n});\n```\n\nYou can also `Burnt.alert()` and `Burnt.dismissAllAlerts()`.\n\n## TODO\n\n- [x] iOS support\n- [x] Android support\n- [x] Custom iOS icons\n- [x] Web support\n\n## Installation\n\n```sh\nyarn add burnt\n```\n\n### Expo\n\nBurnt likely requires Expo SDK 46+.\n\n```sh\nnpx expo install burnt expo-build-properties\n```\n\nAdd the `expo-build-properties` plugin to your `app.json`/`app.config.js`,\nsetting the deployment target to `13.0` (or higher):\n\n```js\nexport default {\n  plugins: [\n    [\n      \"expo-build-properties\",\n      {\n        ios: {\n          deploymentTarget: \"13.0\",\n        },\n      },\n    ],\n  ],\n};\n```\n\nThen, you'll need to rebuild your dev client. Burnt will not work in Expo Go.\n\n```sh\nnpx expo prebuild --clean\nnpx expo run:ios\n```\n\nThe config plugin ensures that your iOS app has at least iOS 13 as a deployment\ntarget, which is required for Burnt (as well as Expo SDK 47+).\n\n### Web Support\n\nTo enable Web support, you need to add the `\u003cToaster /\u003e` to the root of your\napp. If you're using Next.js, add this into your `_app.tsx` component.\n\n```tsx\n// _app.tsx\nimport { Toaster } from \"burnt/web\";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003c\u003e\n      \u003cComponent {...pageProps} /\u003e\n      \u003cToaster position='bottom-right' /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nIf you're using Next.js, add `burnt` to your `transpilePackages` in `next.config.js`.\n\n```tsx\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  transpilePackages: [\n    // Your other packages here\n    \"burnt\"\n  ]\n}\n```\n\nTo configure your `Toaster`, please reference the `sonner`\n[docs](https://github.com/emilkowalski/sonner/tree/main#theme).\n\n### Expo Web\n\nIf you're using Expo Web, you'll need to add the following to your\n`metro.config.js` file:\n\n```js\n// Learn more https://docs.expo.io/guides/customizing-metro\nconst { getDefaultConfig } = require(\"expo/metro-config\");\n\nconst config = getDefaultConfig(__dirname);\n\n// --- burnt ---\nconfig.resolver.sourceExts.push(\"mjs\");\nconfig.resolver.sourceExts.push(\"cjs\");\n// --- end burnt ---\n\nmodule.exports = config;\n```\n\n### Plain React Native\n\n```sh\npod install\n```\n\n### Solito\n\n```sh\ncd applications/app\nexpo install burnt expo-build-properties\nnpx expo prebuild --clean\nnpx expo run:ios\ncd ../..\nyarn\n```\n\nBe sure to also follow the [expo](#expo) instructions and [web](#web-support)\ninstructions.\n\n## API\n\n### `toast`\n\nhttps://user-images.githubusercontent.com/13172299/202275423-300671e5-3918-4d5d-acae-0602160de252.mp4\n\n`toast(options): Promise\u003cvoid\u003e`\n\n```tsx\nBurnt.toast({\n  title: \"Congrats!\", // required\n\n  preset: \"done\", // or \"error\", \"none\", \"custom\"\n\n  message: \"\", // optional\n\n  haptic: \"none\", // or \"success\", \"warning\", \"error\"\n\n  duration: 2, // duration in seconds\n\n  shouldDismissByDrag: true,\n\n  from: \"bottom\", // \"top\" or \"bottom\"\n\n  // optionally customize layout\n  layout: {\n    iconSize: {\n      height: 24,\n      width: 24,\n    },\n  },\n  icon: {\n    ios: {\n      // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.\n      name: \"checkmark.seal\",\n      color: \"#1D9BF0\",\n    },\n    web: \u003cIcon /\u003e,\n  },\n});\n```\n\n### `alert`\n\nhttps://user-images.githubusercontent.com/13172299/202275324-4f6cb5f5-a103-49b5-993f-2030fc836edb.mp4\n\n_The API changed since recording this video. It now uses object syntax._\n\n`alert(options): Promise\u003cvoid\u003e`\n\n```tsx\nimport * as Burnt from \"burnt\";\n\nexport const alert = () =\u003e {\n  Burnt.alert({\n    title: \"Congrats!\", // required\n\n    preset: \"done\", // or \"error\", \"heart\", \"custom\"\n\n    message: \"\", // optional\n\n    duration: 2, // duration in seconds\n\n    // optionally customize layout\n    layout: {\n      iconSize: {\n        height: 24,\n        width: 24,\n      },\n    },\n    icon: {\n      ios: {\n        // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.\n        name: \"checkmark.seal\",\n        color: \"#1D9BF0\",\n      },\n      web: \u003cIcon /\u003e,\n    },\n  });\n};\n```\n\nOn Web, this will display a regular toast. This may change in the future.\n\n### `dismissAllAlerts()`\n\nDoes what you think it does! In the future, I'll allow async spinners for\npromises, and it'll be useful then.\n\n## Contribute\n\n```sh\nyarn build\ncd example\nyarn\nnpx expo run:ios # do this again whenever you change native code\n```\n\nYou can edit the iOS files in `ios/`, and then update the JS accordingly in\n`src`.\n\n## Thanks\n\nSpecial thanks to [Tomasz Sapeta](https://twitter.com/tsapeta) for offering help\nalong the way.\n\nExpo Modules made this so easy to build, and all with Swift – no Objective C.\nIt's my first time writing Swift, and it was truly a breeze.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnandorojo%2Fburnt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnandorojo%2Fburnt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnandorojo%2Fburnt/lists"}