burnt
0.12.2
Brindes multiplataforma para React Native, alimentados por elementos nativos.
Agora com suporte para Android, iOS e Web.
Veja este tópico do Twitter.
Esta é uma biblioteca com um método toast e alert para mostrar UI efêmera.
No iOS, envolve SPIndicator e AlertKit .
No Android, ele envolve ToastAndroid do react-native . Burnt.alert() volta para Burnt.toast() no Android. Isso pode mudar em uma versão futura.
Na Web, envolve sonner de Emil Kowalski.
Burnt funciona com arquiteturas antigas e novas. É construído sobre JSI, graças ao novo sistema de módulos da Expo.
toast simples e imperativo que usa componentes nativos nos bastidores, em vez de usar o estado React com UI baseada em JS.alert semelhantes aos da App Store do iOSExibir brindes sobre modais sempre foi um problema no React Native. Com Burnt, isso funciona imediatamente.
import * as Burnt from "burnt" ;
Burnt . toast ( {
title : "Burnt installed." ,
preset : "done" ,
message : "See your downloads." ,
} ) ; Você também pode Burnt.alert() e Burnt.dismissAllAlerts() .
yarn add burntBurnt provavelmente requer Expo SDK 46+.
npx expo install burnt expo-build-properties Adicione o plug-in expo-build-properties ao seu app.json / app.config.js , definindo o destino de implantação como 13.0 (ou superior):
export default {
plugins : [
[
"expo-build-properties" ,
{
ios : {
deploymentTarget : "13.0" ,
} ,
} ,
] ,
] ,
} ;Então, você precisará reconstruir seu cliente de desenvolvimento. Queimado não funcionará no Expo Go.
npx expo prebuild --clean
npx expo run:iosO plug-in de configuração garante que seu aplicativo iOS tenha pelo menos iOS 13 como destino de implantação, que é necessário para Burnt (bem como Expo SDK 47+).
Para ativar o suporte da Web, você precisa adicionar <Toaster /> à raiz do seu aplicativo. Se você estiver usando Next.js, adicione-o ao seu componente _app.tsx .
// _app.tsx
import { Toaster } from "burnt/web" ;
function MyApp ( { Component , pageProps } ) {
return (
< >
< Component { ... pageProps } / >
< Toaster position = 'bottom-right' / >
< / >
) ;
} Se você estiver usando Next.js, adicione burnt aos seus transpilePackages em next.config.js .
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages : [
// Your other packages here
"burnt"
]
} Para configurar sua Toaster , consulte a documentação sonner .
Se estiver usando o Expo Web, você precisará adicionar o seguinte ao seu arquivo metro.config.js :
// 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 ../..
yarnCertifique-se também de seguir as instruções da exposição e as instruções da web.
toast 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 / > ,
} ,
} ) ;alertA API mudou desde a gravação deste vídeo. Agora usa sintaxe de objeto.
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 / > ,
} ,
} ) ;
} ;Na Web, isso exibirá um brinde normal. Isso pode mudar no futuro.
dismissAllAlerts()Faz o que você pensa que faz! No futuro, permitirei spinners assíncronos para promessas e isso será útil.
yarn build
cd example
yarn
npx expo run:ios # do this again whenever you change native code Você pode editar os arquivos iOS em ios/ e atualizar o JS adequadamente em src .
Agradecimentos especiais a Tomasz Sapeta por oferecer ajuda ao longo do caminho.
Expo Modules tornou isso muito fácil de construir, e tudo com Swift – sem Objective C. É a primeira vez que escrevo Swift e foi realmente muito fácil.
