• Stars
    star
    1,140
  • Rank 40,656 (Top 0.9 %)
  • Language
    Java
  • License
    MIT License
  • Created almost 2 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Crunchy toasts for React Native. ๐Ÿž

๐Ÿž burnt

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

Now with Android, iOS & Web Support.

Alerts

Simulator.-.iPhone.13.Pro.Max.-.16.November.2022.3.mp4

...and Toasts

Simulator.-.iPhone.13.Pro.Max.-.18.November.2022.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 SPAlert.

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.

Simulator.-.iPhone.13.Pro.Max.-.17.November.2022.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+.

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+).

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' />
    </>
  );
}

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

Simulator.-.iPhone.13.Pro.Max.-.16.November.2022.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", // ios only, "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

Simulator.-.iPhone.13.Pro.Max.-.16.November.2022.2.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
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.

More Repositories

1

moti

๐Ÿผ The React Native (+ Web) animation library, powered by Reanimated 3.
TypeScript
3,956
star
2

solito

๐Ÿงโ€โ™‚๏ธ React Native + Next.js, unified.
TypeScript
3,426
star
3

dripsy

๐Ÿท Responsive, unstyled UI primitives for React Native + Web.
TypeScript
1,918
star
4

zeego

Menus for React (Native) done right.
TypeScript
1,520
star
5

swr-firestore

Implement Vercel's useSWR for querying Firestore in React/React Native/Expo apps. ๐Ÿ‘ฉโ€๐Ÿš’๐Ÿ”ฅ
TypeScript
763
star
6

expo-next-react-navigation

โ›ด Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.
TypeScript
388
star
7

react-navigation-heavy-screen

โšก๏ธOptimize heavy screens to prevent lags during React Navigation transitions.
TypeScript
320
star
8

react-native-anchors

๐Ÿฆ… Anchor links and scroll-to utilities for React Native (+ Web)
JavaScript
299
star
9

swr-react-native

React Native/React Navigation compatibility for Vercel's useSWR hook. ๐Ÿฎ
TypeScript
285
star
10

galeria

The React (Native) Image Viewer. ๐Ÿ“ท
TypeScript
145
star
11

expo-next-monorepo

๐Ÿ’ธ Expo + Next.js monorepo starter.
JavaScript
114
star
12

expo-spotify-party

๐ŸŽน Listen to Spotify with your friends in real-time. (React Native Expo + Next.js)
TypeScript
88
star
13

nextjs-conf-22-example

Example repository for the 2022 Next.js Conf about React Native.
TypeScript
67
star
14

react-native-iconic

๐ŸŽจ Iconic icons for React Native (+Web)
TypeScript
65
star
15

react-native-heroicons

Hero Icons for React Native. ๐Ÿซก
TypeScript
64
star
16

zero-to-10m

Resources from my talk at Next.js Conf: "Zero to $10 Million with React Native + Next.js"
57
star
17

expo-firestore-offline-persistence

โ„๏ธ Enable Firestore offline persistence in Expo apps without detaching.
JavaScript
51
star
18

tamagui-intellisense

VSCode Plugin for Tamagui
JavaScript
41
star
19

sf-symbols-typescript

TypeScript types for iOS SF Symbols ๐Ÿ
TypeScript
36
star
20

doorman

๐ŸšชDoorman is a full-stack phone authentication solution for Expo + Firebase auth.
TypeScript
29
star
21

reanimated-tree-shaking

A Next.js playground to test Reanimated bundle size.
TypeScript
24
star
22

sticky

Implement position: sticky in React Native
TypeScript
15
star
23

ts-monorepo-autoimport-guide

A guide for making VSCode's autoimport work in a monorepo.
12
star
24

expo-gatsby-navigation

๐ŸคตMake Gatsby and React Navigation play nicely together with an Expo/React Native Web app.
TypeScript
12
star
25

tgui

TypeScript
11
star
26

react-native-2030

The implementation of my App.js Conf talk, "React Native 2030"
11
star
27

fuego

๐Ÿ”ฅFirebase Firestore hooks & components for React Native/React.
TypeScript
10
star
28

shared-animations

๐Ÿ•บA global state manager for React Native animations.
JavaScript
10
star
29

expo-electron-copy-magic

Copy clip sucks, so this is a better one made with Expo + Electron.
TypeScript
10
star
30

lint-expo

๐Ÿ  A mini script that configures prettier and eslint for React/Expo projects.
JavaScript
9
star
31

tamagui-starter

Starter project for issue reproductions on CodeSandbox
TypeScript
8
star
32

doorman-examples

๐ŸฅณA repository of example apps for Doorman (Expo + Firebase phone auth)
TypeScript
8
star
33

solito-test

TypeScript
6
star
34

react-doorman

React Core library for Doorman's Firebase Auth, without the RN dependencies. ๐Ÿ‘พMeant for use in Gatsby/other React apps.
TypeScript
4
star
35

expo-eas-semantic-release

git push โ†’ automated Expo EAS builds, over-the-air updates, & prerelease versions.
JavaScript
4
star
36

lexical-ios-react-native

Just an experiment with Expo Modules
Swift
4
star
37

expo-starter-project

eslint, src folder, etc
TypeScript
3
star
38

panda

๐Ÿผ Design websites in seconds. Export clean code. (PRE-ALPHA)
JavaScript
3
star
39

expo-navigation-core

Package with reusable expo web navigation hooks / components.
TypeScript
2
star
40

lint-react-native-app

๐Ÿค“ Simple command to add ESLint and Prettier to a react-native project.
TypeScript
2
star
41

thet

TypeScript
2
star
42

animateMePlz

โšก๏ธ A lightweight jQuery extension for scrolling animations.
HTML
2
star
43

expo-router-bug

TypeScript
1
star
44

plaid-bug-repro

Repro for https://github.com/plaid/react-native-plaid-link-sdk/issues/436
Objective-C
1
star
45

nandorojo

1
star
46

expo-next-issue

โšก๏ธReact-native-paper issue with expo / next.
JavaScript
1
star
47

react-native-bootstrap

React-bootstrap, remade for React Native (& React Native For Web).
TypeScript
1
star
48

reanimated-next13-issue

Reanimated isn't working with Next.js 13.
JavaScript
1
star
49

react-native-beacons-example

Repo for react-native-beacons
TypeScript
1
star
50

react-spring-next-issue

Reproducible repo for this issue: https://github.com/react-spring/react-spring/issues/627#issuecomment-541235141
TypeScript
1
star
51

next-style-issue

Issue: prop did not match, server: x, client: y for issue: https://github.com/vercel/next.js/discussions/14469
TypeScript
1
star
52

writing-javascript-actions

1
star
53

eslint-config-nando

Stress-free react native linting. ๐Ÿ‹๐Ÿปโ€โ™‚๏ธ
JavaScript
1
star
54

Penn-Requirement-Counter

๐Ÿค“ Find courses that count for one or more requirements at UPenn.
JavaScript
1
star
55

expo-web-img-picker-bug

SDK 41 image picker not working on web.
JavaScript
1
star
56

expo-next-webpack5-issue

Reproduction of Webpack 5 not working with Expo in a Next.js app
JavaScript
1
star