🍞 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

import * as Burnt from "burnt";

Burnt.toast({
  title: "Burnt installed.",
  preset: "done",
  message: "See your downloads.",
});

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

TODO

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

Installation

yarn add burnt

Expo

Burnt likely requires Expo SDK 46+.

npx expo install burnt

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

npx expo prebuild
npx expo run:ios

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.

// _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.

Plain React Native

pod install

Solito

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.

API

toast

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

toast(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 />,
  },
});

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>

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.

Contribute

yarn build
cd example
yarn
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.

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.