burnt
Advanced tools
Readme
Cross-platform toasts for React Native, powered by native elements.
Now with Android, iOS & Web Support.
See this Twitter thread.
This is a library with a toast and alert method for showing ephemeral UI.
On iOS, it wraps SPIndicator and
AlertKit.
On Android, it wraps ToastAndroid from react-native. Burnt.alert() falls
back to Burnt.toast() on Android. This may change in a future version.
On Web, it wraps sonner by Emil
Kowalski.
Burnt works with both the old & new architectures. It's built on top of JSI, thanks to Expo's new module system.
toast that uses native components under the hood,
rather than using React state with JS-based UI.alert popupsDisplaying toasts on top of modals has always been an issue in React Native. With Burnt, this works out of the box.
import * as Burnt from "burnt";
Burnt.toast({
title: "Burnt installed.",
preset: "done",
message: "See your downloads.",
});
You can also Burnt.alert() and Burnt.dismissAllAlerts().
yarn add burnt
Burnt likely requires Expo SDK 46+.
npx expo install burnt expo-build-properties
Add the expo-build-properties plugin to your app.json/app.config.js,
setting the deployment target to 13.0 (or higher):
export default {
plugins: [
[
"expo-build-properties",
{
ios: {
deploymentTarget: "13.0",
},
},
],
],
};
Then, you'll need to rebuild your dev client. Burnt will not work in Expo Go.
npx expo prebuild --clean
npx expo run:ios
The config plugin ensures that your iOS app has at least iOS 13 as a deployment target, which is required for Burnt (as well as Expo SDK 47+).
To enable Web support, you need to add the <Toaster /> to the root of your
app. If you're using Next.js, add this into your _app.tsx component.
// _app.tsx
import { Toaster } from "burnt/web";
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Toaster position='bottom-right' />
</>
);
}
If you're using Next.js, add burnt to your transpilePackages in next.config.js.
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: [
// Your other packages here
"burnt"
]
}
To configure your Toaster, please reference the sonner
docs.
If you're using Expo Web, you'll need to add the following to your
metro.config.js file:
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname);
// --- burnt ---
config.resolver.sourceExts.push("mjs");
config.resolver.sourceExts.push("cjs");
// --- end burnt ---
module.exports = config;
pod install
cd applications/app
expo install burnt expo-build-properties
npx expo prebuild --clean
npx expo run:ios
cd ../..
yarn
Be sure to also follow the expo instructions and web instructions.
toasttoast(options): Promise<void>
Burnt.toast({
title: "Congrats!", // required
preset: "done", // or "error", "none", "custom"
message: "", // optional
haptic: "none", // or "success", "warning", "error"
duration: 2, // duration in seconds
shouldDismissByDrag: true,
from: "bottom", // "top" or "bottom"
// optionally customize layout
layout: {
iconSize: {
height: 24,
width: 24,
},
},
icon: {
ios: {
// SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
name: "checkmark.seal",
color: "#1D9BF0",
},
web: <Icon />,
},
});
alertThe API changed since recording this video. It now uses object syntax.
alert(options): Promise<void>
import * as Burnt from "burnt";
export const alert = () => {
Burnt.alert({
title: "Congrats!", // required
preset: "done", // or "error", "heart", "custom"
message: "", // optional
duration: 2, // duration in seconds
// optionally customize layout
layout: {
iconSize: {
height: 24,
width: 24,
},
},
icon: {
ios: {
// SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
name: "checkmark.seal",
color: "#1D9BF0",
},
web: <Icon />,
},
});
};
On Web, this will display a regular toast. This may change in the future.
dismissAllAlerts()Does what you think it does! In the future, I'll allow async spinners for promises, and it'll be useful then.
yarn build
cd example
npx expo run:ios # do this again whenever you change native code
You can edit the iOS files in ios/, and then update the JS accordingly in
src.
Special thanks to Tomasz Sapeta for offering help along the way.
Expo Modules made this so easy to build, and all with Swift – no Objective C. It's my first time writing Swift, and it was truly a breeze.
FAQs
Cross-platform toasts, powered by native elements.
The npm package burnt receives a total of 17,721 weekly downloads. As such, burnt popularity was classified as popular.
We found that burnt demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.