burnt
0.12.2
Brindis multiplataforma para React Native, impulsado por elementos nativos.
Ahora con Android, iOS y soporte web.
Vea este hilo de Twitter.
Esta es una biblioteca con un método toast y alert para mostrar una interfaz de usuario efímera.
En iOS, incluye SPIndicator y AlertKit .
En Android, empaqueta ToastAndroid desde react-native . Burnt.alert() recurre Burnt.toast() en Android. Esto puede cambiar en una versión futura.
En la web, envuelve sonner de Emil Kowalski.
Burnt funciona tanto con la arquitectura antigua como con la nueva. Está construido sobre JSI, gracias al nuevo sistema de módulos de Expo.
toast simple e imperativo que utiliza componentes nativos bajo el capó, en lugar de usar el estado React con una interfaz de usuario basada en JS.alert similares a las de la App Store de iOSMostrar brindis encima de los modales siempre ha sido un problema en React Native. Con Burnt, esto funciona de inmediato.
import * as Burnt from "burnt" ;
Burnt . toast ( {
title : "Burnt installed." ,
preset : "done" ,
message : "See your downloads." ,
} ) ; También puedes Burnt.alert() y Burnt.dismissAllAlerts() .
yarn add burntEs probable que quemado requiera Expo SDK 46+.
npx expo install burnt expo-build-properties Agregue el complemento expo-build-properties a su app.json / app.config.js y establezca el objetivo de implementación en 13.0 (o superior):
export default {
plugins : [
[
"expo-build-properties" ,
{
ios : {
deploymentTarget : "13.0" ,
} ,
} ,
] ,
] ,
} ;Luego, necesitarás reconstruir tu cliente de desarrollo. Quemado no funcionará en Expo Go.
npx expo prebuild --clean
npx expo run:iosEl complemento de configuración garantiza que su aplicación iOS tenga al menos iOS 13 como destino de implementación, lo cual es necesario para Burnt (así como para Expo SDK 47+).
Para habilitar el soporte web, debe agregar <Toaster /> a la raíz de su aplicación. Si está utilizando Next.js, agréguelo a su componente _app.tsx .
// _app.tsx
import { Toaster } from "burnt/web" ;
function MyApp ( { Component , pageProps } ) {
return (
< >
< Component { ... pageProps } / >
< Toaster position = 'bottom-right' / >
< / >
) ;
} Si está utilizando Next.js, agregue burnt a sus transpilePackages en next.config.js .
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages : [
// Your other packages here
"burnt"
]
} Para configurar su Toaster , consulte los documentos sonner .
Si está utilizando Expo Web, deberá agregar lo siguiente a su archivo 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 ../..
yarnAsegúrese de seguir también las instrucciones de la exposición y las instrucciones 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 / > ,
} ,
} ) ;alertLa API cambió desde que se grabó este video. Ahora usa sintaxis de objetos.
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 / > ,
} ,
} ) ;
} ;En la Web, esto mostrará un brindis normal. Esto puede cambiar en el futuro.
dismissAllAlerts()¡Hace lo que crees que hace! En el futuro, permitiré controles giratorios asíncronos para las promesas y será útil entonces.
yarn build
cd example
yarn
npx expo run:ios # do this again whenever you change native code Puede editar los archivos de iOS en ios/ y luego actualizar el JS en consecuencia en src .
Un agradecimiento especial a Tomasz Sapeta por ofrecernos ayuda en el camino.
Expo Modules hizo que esto fuera muy fácil de construir, y todo con Swift, sin Objective C. Es la primera vez que escribo Swift y fue realmente muy sencillo.
