burnt
0.12.2
Toasts multiplateformes pour React Native, alimentés par des éléments natifs.
Maintenant avec support Android, iOS et Web.
Voir ce fil Twitter.
Il s'agit d'une bibliothèque avec une méthode toast et alert pour afficher l'interface utilisateur éphémère.
Sur iOS, il englobe SPIndicator et AlertKit .
Sur Android, il enveloppe ToastAndroid de react-native . Burnt.alert() revient à Burnt.toast() sur Android. Cela pourrait changer dans une prochaine version.
Sur le Web, il emballe sonner d'Emil Kowalski.
Burnt fonctionne avec les anciennes et les nouvelles architectures. Il est construit sur JSI, grâce au nouveau système de modules d'Expo.
toast simple et impératif qui utilise des composants natifs sous le capot, plutôt que d'utiliser l'état React avec une interface utilisateur basée sur JS.alert de type iOS App StoreL'affichage de toasts au-dessus des modaux a toujours été un problème dans React Native. Avec Burnt, cela fonctionne immédiatement.
import * as Burnt from "burnt" ;
Burnt . toast ( {
title : "Burnt installed." ,
preset : "done" ,
message : "See your downloads." ,
} ) ; Vous pouvez également Burnt.alert() et Burnt.dismissAllAlerts() .
yarn add burntBurnt nécessite probablement Expo SDK 46+.
npx expo install burnt expo-build-properties Ajoutez le plugin expo-build-properties à votre app.json / app.config.js , en définissant la cible de déploiement sur 13.0 (ou supérieur) :
export default {
plugins : [
[
"expo-build-properties" ,
{
ios : {
deploymentTarget : "13.0" ,
} ,
} ,
] ,
] ,
} ;Ensuite, vous devrez reconstruire votre client de développement. Burnt ne fonctionnera pas dans Expo Go.
npx expo prebuild --clean
npx expo run:iosLe plugin de configuration garantit que votre application iOS a au moins iOS 13 comme cible de déploiement, ce qui est requis pour Burnt (ainsi que pour Expo SDK 47+).
Pour activer la prise en charge Web, vous devez ajouter le <Toaster /> à la racine de votre application. Si vous utilisez Next.js, ajoutez-le à votre composant _app.tsx .
// _app.tsx
import { Toaster } from "burnt/web" ;
function MyApp ( { Component , pageProps } ) {
return (
< >
< Component { ... pageProps } / >
< Toaster position = 'bottom-right' / >
< / >
) ;
} Si vous utilisez Next.js, ajoutez burnt à vos transpilePackages dans next.config.js .
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages : [
// Your other packages here
"burnt"
]
} Pour configurer votre Toaster , veuillez vous référer à la documentation sonner .
Si vous utilisez Expo Web, vous devrez ajouter les éléments suivants à votre fichier 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 ../..
yarnAssurez-vous également de suivre les instructions de l'exposition et les instructions 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 / > ,
} ,
} ) ;alertL'API a changé depuis l'enregistrement de cette vidéo. Il utilise désormais la syntaxe objet.
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 / > ,
} ,
} ) ;
} ;Sur le Web, cela affichera un toast régulier. Cela pourrait changer à l’avenir.
dismissAllAlerts()Fait ce que vous pensez ! À l'avenir, j'autoriserai les spinners asynchrones pour les promesses, et cela sera alors utile.
yarn build
cd example
yarn
npx expo run:ios # do this again whenever you change native code Vous pouvez modifier les fichiers iOS dans ios/ , puis mettre à jour le JS en conséquence dans src .
Un merci spécial à Tomasz Sapeta pour son aide tout au long du processus.
Les modules Expo ont rendu cela si facile à construire, et tout cela avec Swift – pas d'Objective C. C'est la première fois que j'écris Swift, et c'était vraiment un jeu d'enfant.
