Tela: Viagens

Lista de viagens salvas, swipe para deletar e FAB para criar nova viagem.

TripCard

Card horizontal com thumbnail, nome da cidade e metadados da viagem.

🗼

Paris

10–17 jan · 5 passeios

TripCard

🗽

Nova York

22–29 mar · 8 passeios

TripCard

Propriedade	Valor	Descrição
`card.flexDirection`	`row`
`card.alignItems`	`center`
`card.gap`	`spacing.md (16px)`
`card.backgroundColor`	`rgba(255,255,255,0.08)`	white08
`card.borderRadius`	`radius.lg (16px)`
`card.padding`	`spacing.sm (8px)`
`image.size`	`80×80`
`image.borderRadius`	`radius.md (12px)`
`cityName.fontSize`	`18px`	Semibold, white
`meta.fontSize`	`14px`	Medium, white60
`pressedOpacity`	`0.85`

// screens/Viagens — TripCard
tripCard: {
  flexDirection: 'row',
  alignItems: 'center',
  gap: spacing.md,           // 16
  backgroundColor: colors.white08,
  borderRadius: radius.lg,   // 16
  padding: spacing.sm,       // 8
},
tripThumb: {
  width: 80, height: 80,
  borderRadius: radius.md,   // 12
},
tripCity: {
  fontSize: 18, fontFamily: Semibold, color: colors.white,
},
tripMeta: {
  fontSize: 14, fontFamily: Medium, color: colors.white60,
},

Ação de Delete (swipe)

Área vermelha revelada pelo swipe esquerdo via react-native-gesture-handler. Ao confirmar delete, o card sai com animação paralela: opacity e translateX.

screens/Viagens — SwipeableRow / DeleteActionwidth 80px | bg #E53935 | radius 16 | ícone delete branco

delete

Delete Action

Propriedade	Valor	Descrição
`deleteArea.width`	`80px`
`deleteArea.borderRadius`	`16px`	radius.lg
`deleteArea.background`	`#E53935`	Vermelho destrutivo
`deleteIcon.size`	`24px`	Material Icons delete, color white
`anim opacity`	`1 → 0`	200ms timing
`anim translateX`	`0 → -500`	250ms timing, paralelo

// Animação de saída do TripCard ao deletar
Animated.parallel([
  Animated.timing(opacity, {
    toValue: 0,
    duration: 200,
    useNativeDriver: true,
  }),
  Animated.timing(translateX, {
    toValue: -500,
    duration: 250,
    useNativeDriver: true,
  }),
]).start(() => onDelete(id));

FAB — Criar nova viagem

Botão flutuante pill no rodapé da tela. Ícone add_circle + label.

screens/Viagens — FABpill azul | add_circle 32px black | texto 16 Semibold black

add_circleCriar nova viagem

FAB

Propriedade	Valor	Descrição
`fab.backgroundColor`	`#4494FC`	embarko_blue
`fab.borderRadius`	`100px`	Pill perfeito
`fab.paddingLeft`	`10px`
`fab.paddingRight`	`12px`
`fab.paddingVertical`	`8px`
`icon.size`	`32px`	add_circle, color #000
`label.fontSize`	`16px`	Semibold
`label.color`	`#000000`

// FAB — Viagens
fab: {
  flexDirection: 'row',
  alignItems: 'center',
  gap: 4,
  backgroundColor: colors.embarko_blue,
  borderRadius: 100,
  paddingLeft: 10, paddingRight: 12,
  paddingVertical: 8,
},
fabText: {
  fontSize: 16, fontFamily: Semibold, color: '#000',
},