Utilisation d'expo-haptics pour le retour tactile sur les appuis de boutons, confirmations de succès et alertes d'erreur.

Haptique

Le retour haptique ajoute une dimension physique aux interactions de votre app. ScaleRocket Mobile utilise expo-haptics pour fournir des réponses tactiles pour les appuis de boutons, les états de succès/erreur et les transitions UI.

Installation

npx expo install expo-haptics

Note : L'haptique nécessite un appareil physique. Les simulateurs et émulateurs ne vibrent pas.

Utilisation de base

import * as Haptics from "expo-haptics";

// Tap léger — appui de bouton, toggle
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

// Tap moyen — changement de sélection
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

// Tap fort — action significative
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);

Types de retour

expo-haptics fournit trois catégories de retour :

Retour d'impact

Sensation de tap physique avec intensité variable :

// Léger — subtil, pour les interactions fréquentes
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

// Moyen — modéré, pour les sélections
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

// Fort — intense, pour les actions importantes
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);

Retour de notification

Retour sémantique lié aux résultats :

// Succès — action terminée
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);

// Avertissement — prudence requise
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);

// Erreur — action échouée
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);

Retour de sélection

Pour les molettes de sélection et changements de sélection :

Haptics.selectionAsync();

Quand utiliser l'haptique

Interaction	Type haptique	Pourquoi
Appui de bouton	`Impact.Light`	Confirmer que le tap est enregistré
Interrupteur	`Impact.Light`	Sensation de clic physique
Action de suppression	`Impact.Heavy`	Souligner l'action destructive
Formulaire soumis	`Notification.Success`	Confirmer la complétion
Erreur affichée	`Notification.Error`	Alerter l'utilisateur
Tirer pour rafraîchir	`Impact.Medium`	Seuil atteint
Défilement de sélecteur	`Selection`	Chaque changement d'option
Appui long	`Impact.Heavy`	Déclenchement du menu contextuel

Intégration avec les composants

Bouton haptique

Ajoutez l'haptique au composant Button :

import * as Haptics from "expo-haptics";

function HapticButton({ onPress, haptic = true, ...props }: ButtonProps) {
  const handlePress = () => {
    if (haptic) {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    }
    onPress?.();
  };

  return <Button {...props} onPress={handlePress} />;
}

Barre d'onglets haptique

Ajoutez du retour lors du changement d'onglet :

// app/(tabs)/_layout.tsx
<Tabs
  screenListeners={{
    tabPress: () => {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    },
  }}
>
  {/* Écrans d'onglets */}
</Tabs>

Confirmation de suppression

async function handleDelete() {
  Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);

  Alert.alert("Delete Item", "This cannot be undone.", [
    { text: "Cancel", style: "cancel" },
    {
      text: "Delete",
      style: "destructive",
      onPress: async () => {
        await deleteItem();
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      },
    },
  ]);
}

Hook personnalisé

Créez un hook haptique réutilisable :

import * as Haptics from "expo-haptics";
import { Platform } from "react-native";

export function useHaptics() {
  const isDevice = Platform.OS !== "web";

  return {
    light: () => isDevice && Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light),
    medium: () => isDevice && Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium),
    heavy: () => isDevice && Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy),
    success: () => isDevice && Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success),
    error: () => isDevice && Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error),
    warning: () => isDevice && Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning),
    selection: () => isDevice && Haptics.selectionAsync(),
  };
}

Utilisation :

function MyComponent() {
  const haptics = useHaptics();

  return (
    <Button title="Save" onPress={() => {
      haptics.light();
      handleSave();
    }} />
  );
}

Bonnes pratiques

N'en abusez pas — Trop de retour haptique devient agaçant
Adaptez l'intensité à l'importance — Léger pour la routine, fort pour le significatif
Ignorez sur le web — Vérifiez la plateforme avant d'appeler l'haptique
Respectez les paramètres utilisateur — Les réglages d'haptique système iOS sont respectés automatiquement
Testez sur de vrais appareils — Les simulateurs ne peuvent pas produire de retour haptique

Haptique

On this page