Estados Interativos

Pressed states, disabled states e focus em todo o app.

Pressed States

Todos os elementos táteis do app respondem ao toque com redução de opacidade via Pressable ou TouchableOpacity.

// Padrão Pressable com pressed state
<Pressable
  style={({ pressed }) => [
    styles.button,
    pressed && { opacity: 0.85 },
  ]}
  onPress={onPress}
>
  <Text style={styles.label}>Ação</Text>
</Pressable>

Disabled States

Estados desabilitados usam sempre opacidade — nunca mudam cor. O componente permanece visível mas sem resposta ao toque.

// Disabled com Pressable
<Pressable
  style={[styles.btn, !isValid && styles.btnDisabled]}
  onPress={onPress}
  disabled={!isValid}
>
  <Text style={styles.btnText}>Confirmar</Text>
</Pressable>

// btnDisabled: { opacity: 0.45 }

Input Focus

Ao focar um input, a borda muda de white10 para embarko_blue. Sem shadow ou scale.

// components/TextInput padrão — borda com foco
const [isFocused, setIsFocused] = useState(false);

<TextInput
  style={[
    styles.input,
    isFocused && styles.inputFocused,
  ]}
  onFocus={() => setIsFocused(true)}
  onBlur={() => setIsFocused(false)}
/>

// input: {
//   borderWidth: 1,
//   borderColor: colors.white10,       // rgba(255,255,255,0.10)
//   borderRadius: radius.md,           // 12
//   backgroundColor: colors.white10,
// }
// inputFocused: {
//   borderColor: colors.inputBorderFocused,  // #4494FC
// }

Favorito ativo

O ícone de coração alterna entre favorite_border (inativo) e favorite (ativo) com cor embarko_blue.

// ViatorHighlightCard — favorito
<Pressable
  style={({ pressed }) => [
    styles.favoriteBtn,
    pressed && { opacity: 0.7 },
  ]}
  onPress={() => onFavoritePress(item.productCode)}
>
  <MaterialIcons
    name={isFavorite ? 'favorite' : 'favorite-border'}
    size={20}
    color={isFavorite ? colors.embarko_blue : colors.white}
  />
</Pressable>

// favoriteBtn: {
//   width: 36, height: 36, borderRadius: 18,
//   backgroundColor: colors.dark60,   // rgba(0,0,0,0.60)
//   alignItems: 'center', justifyContent: 'center',
// }