import * as React from "react"; import { Gradient, HStack, PressableScale, Text, VStack, useAura } from "aura-ui-native"; const cardapio = [ { nome: "Smash duplo", desc: "Dois blends de 90 g, cheddar e picles", preco: "R$ 34,90" }, { nome: "Batata rústica", desc: "Com páprica e maionese da casa", preco: "R$ 18,00" }, { nome: "Milkshake de doce de leite", desc: "400 ml", preco: "R$ 21,50" } ]; export default function PressableDemo() { const t = useAura(); const [sacola, setSacola] = React.useState<Record<string, number>>({}); const [promo, setPromo] = React.useState(false); const total = Object.values(sacola).reduce((soma, n) => soma + n, 0); const add = (nome: string) => setSacola((s) => ({ ...s, [nome]: (s[nome] ?? 0) + 1 })); return ( <VStack p={4} space={4}> {/* pressScale: quanto encolhe ao tocar (padrão 0.97; 1 desliga) */} <PressableScale pressScale={0.94} role="button" aria-label="Combo em dobro" onPress={() => setPromo((p) => !p)} > <Gradient gradient="accent" style={{ borderRadius: t.radius.xl, padding: t.space(5), gap: t.space(1) }} > <Text variant="caption" weight="bold" color="accentForeground"> {promo ? "CUPOM ATIVADO ✓" : "SÓ HOJE · TOQUE PARA ATIVAR"} </Text> <Text variant="h3" color="accentForeground"> Combo em dobro por R$ 49,90 </Text> </Gradient> </PressableScale> {cardapio.map((item) => ( <PressableScale key={item.nome} role="button" aria-label={`Adicionar ${item.nome}`} onPress={() => add(item.nome)} > {/* children como função recebem o estado { pressed } */} {({ pressed }) => ( <HStack p={4} radius="lg" border bg={pressed ? "muted" : "surface"}> <VStack space={0.5} flex={1}> <Text variant="label">{item.nome}</Text> <Text variant="caption" tone="muted"> {item.desc} </Text> </VStack> <VStack space={0.5} align="flex-end"> <Text variant="label">{item.preco}</Text> {sacola[item.nome] ? ( <Text variant="caption" tone="primary" weight="semibold"> {`${sacola[item.nome]} na sacola`} </Text> ) : null} </VStack> </HStack> )} </PressableScale> ))} <Text variant="bodySm" tone="muted" align="center"> {total > 0 ? `${total} ${total === 1 ? "item" : "itens"} na sacola` : "Toque num item para adicionar"} </Text> </VStack> ); }

Instalação

Uso

API

Código-fonte

components/pressable.tsx