Toast — pesan singkat global

NexaJS menyediakan komponen Toast / ToastContainer dan API imperatif toastManager untuk menampilkan notifikasi ringkas (sukses, error, peringatan, info) dengan posisi, durasi, gaya kustom, aksi “Undo”, dan beberapa toast berurutan.

Alur penggunaan di aplikasi

Pendaftaran route — "Toast" (judul: "Toast").
Navigasi — navigation.navigate("Toast"). MenuComponents.
Root — Pasang <ToastContainer /> sekali di hierarki (mis. di layar demo atau root app) agar toastManager berfungsi.

Cuplikan cepat

toastManager (disarankan)

import { SafeAreaView, ToastContainer, toastManager, Buttons } from "NexaJS";

export default function Screen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ToastContainer />
      <Buttons
        label="Sukses"
        onPress={() =>
          toastManager.success("Data tersimpan", { position: "top", duration: 3000 })
        }
        background="#4CAF50"
        txColor="#FFF"
        border={8}
        vertical={6}
      />
    </SafeAreaView>
  );
}

show + opsi

toastManager.show("Pesan", {
  type: "info",
  position: "bottom",
  duration: 4000,
  action: () => toastManager.info("Dibatalkan"),
  actionLabel: "Undo",
  style: { backgroundColor: "#9c27b0" },
  textStyle: { fontSize: 16, fontWeight: "bold" },
});

API pada demo

toastManager.success, .error, .warning, .info, dan .show dengan objek opsi. Demo juga menunjukkan toast komponen mandiri dengan state lokal (Toast + showToast) sebagai perbandingan.

Praktik yang disarankan

Utamakan toastManager agar tidak perlu mengoper state antar layar.
Pesan panjang: pertimbangkan durasi lebih lama atau potong teks.

Nxdom Framework

Toast — pesan singkat global

Alur penggunaan di aplikasi

Cuplikan cepat

API pada demo

Praktik yang disarankan