🍞 burnt

Cross-platform toasts for React Native, powered by native elements.

• Install
• Usage

Now with Android, iOS & Web Support.

Alerts

https://user-images.githubusercontent.com/13172299/202289223-8a333223-3afa-49c4-a001-a70c76150ef0.mp4

...and Toasts

https://user-images.githubusercontent.com/13172299/231801324-3f0858a6-bd61-4d74-920f-4e77b80d26c1.mp4

...and Web Support

https://user-images.githubusercontent.com/13172299/236826405-b5f423bb-dafd-4013-a941-7accbea43c14.mp4

Context

See this Twitter thread.

What

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.

Features

• Simple, imperative toast that uses native components under the hood, rather than using React state with JS-based UI.
• Animated icons
• iOS App Store-like alert popups
• Overlays on top of native iOS modals
• Loading alerts

Modals

Displaying toasts on top of modals has always been an issue in React Native. With Burnt, this works out of the box.

https://user-images.githubusercontent.com/13172299/231801096-2894fbf3-4df7-45d7-9c72-f80d36fd45ef.mp4

Usage

1import * as Burnt from "burnt";
2
3Burnt.toast({
4  title: "Burnt installed.",
5  preset: "done",
6  message: "See your downloads.",
7});

You can also Burnt.alert() and Burnt.dismissAllAlerts().

TODO

• iOS support
• Android support
• Custom iOS icons
• Web support

Installation

1yarn add burnt

Expo

Burnt likely requires Expo SDK 46+.

1npx 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):

1export default {
2  plugins: [
3    [
4      "expo-build-properties",
5      {
6        ios: {
7          deploymentTarget: "13.0",
8        },
9      },
10    ],
11  ],
12};

Then, you'll need to rebuild your dev client. Burnt will not work in Expo Go.

1npx expo prebuild --clean
2npx 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+).

Web Support

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.

1// _app.tsx
2import { Toaster } from "burnt/web";
3
4function MyApp({ Component, pageProps }) {
5  return (
6    <>
7      <Component {...pageProps} />
8      <Toaster position='bottom-right' />
9    </>
10  );
11}

If you're using Next.js, add burnt to your transpilePackages in next.config.js.

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  transpilePackages: [
4    // Your other packages here
5    "burnt"
6  ]
7}

To configure your Toaster, please reference the sonner docs.

Expo Web

If you're using Expo Web, you'll need to add the following to your metro.config.js file:

1// Learn more https://docs.expo.io/guides/customizing-metro
2const { getDefaultConfig } = require("expo/metro-config");
3
4const config = getDefaultConfig(__dirname);
5
6// --- burnt ---
7config.resolver.sourceExts.push("mjs");
8config.resolver.sourceExts.push("cjs");
9// --- end burnt ---
10
11module.exports = config;

Plain React Native

1pod install

Solito

1cd applications/app
2expo install burnt expo-build-properties
3npx expo prebuild --clean
4npx expo run:ios
5cd ../..
6yarn

Be sure to also follow the expo instructions and web instructions.

API

toast

https://user-images.githubusercontent.com/13172299/202275423-300671e5-3918-4d5d-acae-0602160de252.mp4

toast(options): Promise<void>

1Burnt.toast({
2  title: "Congrats!", // required
3
4  preset: "done", // or "error", "none", "custom"
5
6  message: "", // optional
7
8  haptic: "none", // or "success", "warning", "error"
9
10  duration: 2, // duration in seconds
11
12  shouldDismissByDrag: true,
13
14  from: "bottom", // "top" or "bottom"
15
16  // optionally customize layout
17  layout: {
18    iconSize: {
19      height: 24,
20      width: 24,
21    },
22  },
23  icon: {
24    ios: {
25      // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
26      name: "checkmark.seal",
27      color: "#1D9BF0",
28    },
29    web: <Icon />,
30  },
31});

alert

https://user-images.githubusercontent.com/13172299/202275324-4f6cb5f5-a103-49b5-993f-2030fc836edb.mp4

The API changed since recording this video. It now uses object syntax.

alert(options): Promise<void>

1import * as Burnt from "burnt";
2
3export const alert = () => {
4  Burnt.alert({
5    title: "Congrats!", // required
6
7    preset: "done", // or "error", "heart", "custom"
8
9    message: "", // optional
10
11    duration: 2, // duration in seconds
12
13    // optionally customize layout
14    layout: {
15      iconSize: {
16        height: 24,
17        width: 24,
18      },
19    },
20    icon: {
21      ios: {
22        // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
23        name: "checkmark.seal",
24        color: "#1D9BF0",
25      },
26      web: <Icon />,
27    },
28  });
29};

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.

Contribute

1yarn build
2cd example
3npx 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.

Thanks

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.