burnt

? dibakar

Bersulang lintas platform untuk React Native, didukung oleh elemen asli.

• Memasang
• Penggunaan

Sekarang dengan Android, iOS & Dukungan Web.

Peringatan

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

...dan bersulang

Simulator.-.iPhone.13.Pro.Max.-.18.November.2022.mp4

...dan Dukungan Web

contoh terbakar.-.8.Mei.2023.mp4

Konteks

Lihat utas Twitter ini.

Apa

Ini adalah perpustakaan dengan metode toast dan alert untuk menampilkan UI sementara.

Di iOS, ini membungkus SPIndicator dan AlertKit .

Di Android, ini membungkus ToastAndroid dari react-native . Burnt.alert() kembali ke Burnt.toast() di Android. Ini mungkin berubah di versi mendatang.

Di Web, itu dibungkus sonner oleh Emil Kowalski.

Burnt berfungsi dengan arsitektur lama & baru. Itu dibangun di atas JSI, berkat sistem modul Expo yang baru.

Fitur

• toast sederhana dan penting yang menggunakan komponen asli , daripada menggunakan status React dengan UI berbasis JS.
• Ikon animasi
• Munculan alert seperti iOS App Store
• Hamparan di atas modal iOS asli
• Memuat peringatan

Modal

Menampilkan toast di atas modals selalu menjadi masalah di React Native. Dengan Burnt, ini berhasil.

Simulator.-.iPhone.13.Pro.Max.-.17.November.2022.mp4

Penggunaan

 import * as Burnt from "burnt" ;

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

Anda juga bisa Burnt.alert() dan Burnt.dismissAllAlerts() .

TODO

• dukungan iOS
• dukungan Android
• Ikon iOS khusus
• dukungan web

Instalasi

yarn add burnt

Pameran

Pembakaran kemungkinan memerlukan Expo SDK 46+.

npx expo install burnt expo-build-properties

Tambahkan plugin expo-build-properties ke app.json / app.config.js Anda, atur target penerapan ke 13.0 (atau lebih tinggi):

 export default {
  plugins : [
    [
      "expo-build-properties" ,
      {
        ios : {
          deploymentTarget : "13.0" ,
        } ,
      } ,
    ] ,
  ] ,
} ;

Kemudian, Anda harus membangun kembali klien dev Anda. Terbakar tidak akan berfungsi di Expo Go.

npx expo prebuild --clean
npx expo run:ios

Plugin konfigurasi memastikan bahwa aplikasi iOS Anda memiliki setidaknya iOS 13 sebagai target penerapan, yang diperlukan untuk Burnt (serta Expo SDK 47+).

Dukungan Web

Untuk mengaktifkan dukungan Web, Anda perlu menambahkan <Toaster /> ke root aplikasi Anda. Jika Anda menggunakan Next.js, tambahkan ini ke komponen _app.tsx Anda.

 // _app.tsx
import { Toaster } from "burnt/web" ;

function MyApp ( { Component , pageProps } ) {
  return (
    < >
      < Component { ... pageProps } / >
      < Toaster position = 'bottom-right' / >
    < / >
  ) ;
}

Jika Anda menggunakan Next.js, tambahkan burnt ke transpilePackages Anda di next.config.js .

 /** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages : [
    // Your other packages here
    "burnt"
  ]
}

Untuk mengonfigurasi Toaster Anda, harap rujuk dokumen sonner .

Web Pameran

Jika Anda menggunakan Expo Web, Anda harus menambahkan yang berikut ini ke file metro.config.js Anda:

 // 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 ;

Bereaksi Biasa Asli

pod install

sendirian

 cd applications/app
expo install burnt expo-build-properties
npx expo prebuild --clean
npx expo run:ios
cd ../..
yarn

Pastikan juga untuk mengikuti instruksi pameran dan instruksi web.

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" , // "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

API berubah sejak merekam video ini. Sekarang menggunakan sintaks objek.

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

Di Web, ini akan menampilkan roti panggang biasa. Hal ini mungkin berubah di masa depan.

dismissAllAlerts()

Lakukan apa yang menurut Anda berhasil! Di masa depan, saya akan mengizinkan async spinner untuk mendapatkan janji, dan itu akan berguna nantinya.

Menyumbang

yarn build
cd example
yarn
npx expo run:ios # do this again whenever you change native code

Anda dapat mengedit file iOS di ios/ , lalu memperbarui JS sesuai di src .

Terima kasih

Terima kasih khusus kepada Tomasz Sapeta yang telah menawarkan bantuan selama ini.

Modul Expo membuat ini sangat mudah untuk dibuat, dan semuanya dengan Swift – tanpa Objective C. Ini pertama kalinya saya menulis Swift, dan itu sangat mudah.