stream.place
Live video on the AT Protocol
1import { Toast, useToastController, useToastState } from "@tamagui/toast";
2import { Button, H4, XStack, YStack, isWeb } from "tamagui";
3
4export function CurrentToast() {
5 const currentToast = useToastState();
6
7 if (!currentToast || currentToast.isHandledNatively) return null;
8
9 return (
10 <Toast
11 key={currentToast.id}
12 duration={currentToast.duration}
13 viewportName={currentToast.viewportName}
14 enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}
15 exitStyle={{ opacity: 0, scale: 1, y: -20 }}
16 y={isWeb ? "$12" : 0}
17 theme="purple"
18 br="$6"
19 animation="quick"
20 zIndex={999999}
21 >
22 <YStack ai="center" p="$2" gap="$2">
23 <Toast.Title fow="bold">{currentToast.title}</Toast.Title>
24 {!!currentToast.message && (
25 <Toast.Description>{currentToast.message}</Toast.Description>
26 )}
27 </YStack>
28 </Toast>
29 );
30}
31
32export function ToastControl() {
33 const toast = useToastController();
34
35 return (
36 <YStack gap="$2" ai="center">
37 <H4>Toast demo</H4>
38 <XStack gap="$2" jc="center">
39 <Button
40 onPress={() => {
41 toast.show("Successfully saved!", {
42 message: "Don't worry, we've got your data.",
43 });
44 }}
45 >
46 Show
47 </Button>
48 <Button
49 onPress={() => {
50 toast.hide();
51 }}
52 >
53 Hide
54 </Button>
55 </XStack>
56 </YStack>
57 );
58}