Haptics

React Native · Reference cheat sheet

📋 Overview

Haptics provide nuanced tactile feedback (impact, notification, selection). In Expo use expo-haptics; in bare RN use platform modules or community packages. Prefer haptics over crude Vibration for UI polish—especially iOS.

🔧 Core concepts

Always no-op gracefully on unsupported hardware/simulators.

💡 Examples

import * as Haptics from "expo-haptics";
import { Pressable, Text } from "react-native";

export function LikeButton({ onLike }: { onLike: () => void }) {
  return (
    <Pressable
      onPress={async () => {
        await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
        onLike();
      }}
    >
      <Text>Like</Text>
    </Pressable>
  );
}

export async function notifySuccess() {
  await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
}

export async function tick() {
  await Haptics.selectionAsync();
}

⚠️ Pitfalls

• Firing haptics on every scroll event—too noisy.
• Ignoring “Reduce Motion” / haptic disable preferences when available.
• Blocking UI on awaited haptics unnecessarily—fire-and-forget is fine.
• Assuming Android parity with iOS Taptic Engine.

🔗 Related

• vibration.md — basic vibrate
• pressable.md — buttons
• picker.md — selection ticks
• gesture.md — gesture feedback
• touchable.md — press handling