Documentation → https://docs.expo.dev/versions/latest/sdk/haptics/

Install Haptics

npx expo install expo-haptics

Import Haptics

import * as Haptics from 'expo-haptics';

notificationAsync - NotificationFeedbackType

<View>
  <Text style={{ textAlign: "center", fontSize: "17px", marginTop: 10 }}>
    Basic Haptics - NotificationFeedbackType
  </Text>

  <Pressable onPress={() => {
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
  }}
    style={{ backgroundColor: 'black', padding: 10, margin: 10, borderRadius: 5 }}
  >
    <Text style={{ color: "white", textAlign: "center" }}>Success Haptic</Text>
  </Pressable>
  <Pressable onPress={() => {
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
  }}
    style={{ backgroundColor: 'black', padding: 10, margin: 10, borderRadius: 5 }}
  >
    <Text style={{ color: "white", textAlign: "center" }}>Error Haptic</Text>
  </Pressable>
  <Pressable onPress={() => {
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning)
  }}
    style={{ backgroundColor: 'black', padding: 10, margin: 10, borderRadius: 5 }}
  >
    <Text style={{ color: "white", textAlign: "center" }}>Warning Haptic</Text>
  </Pressable>
</View>

impactAsync - ImpactFeedbackStyle

<View>
  <Text style={{ textAlign: "center", fontSize: "17px", marginTop: 10 }}>
    Haptics - ImpactFeedbackStyle
  </Text>
  <Pressable onPress={() => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
  }}
    style={{ backgroundColor: 'black', padding: 10, margin: 10, borderRadius: 5 }}
  >
    <Text style={{ color: "white", textAlign: "center" }}>Light Haptic</Text>
  </Pressable>
  <Pressable onPress={() => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
  }}
    style={{ backgroundColor: 'black', padding: 10, margin: 10, borderRadius: 5 }}
  >
    <Text style={{ color: "white", textAlign: "center" }}>Medium Haptic</Text>
  </Pressable>
  <Pressable onPress={() => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
  }}
    style={{ backgroundColor: 'black', padding: 10, margin: 10, borderRadius: 5 }}
  >
    <Text style={{ color: "white", textAlign: "center" }}>Heavy Haptic</Text>
  </Pressable>
  <Pressable onPress={() => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft)
  }}
    style={{ backgroundColor: 'black', padding: 10, margin: 10, borderRadius: 5 }}
  >
    <Text style={{ color: "white", textAlign: "center" }}>Soft Haptic</Text>
  </Pressable>
</View>

Custom Haptic

const triggerCustomHaptic = async () => {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 7; j++) {
      await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
      await new Promise(resolve => setTimeout(resolve, 100));
    }
    if (i % 2 == 0) {
      await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
      await new Promise(resolve => setTimeout(resolve, 10));
    }
    await new Promise(resolve => setTimeout(resolve, 300));
  }
};

{/* Custom Haptic */}
<View>
  <Text style={{ textAlign: "center", fontSize: "17px", marginTop: 10 }}>
    Custom Haptic
  </Text>
  <Pressable onPress={triggerCustomHaptic}
    style={{ backgroundColor: 'black', padding: 10, margin: 10, borderRadius: 5 }}
  >
    <Text style={{ color: "white", textAlign: "center" }}>Custom Haptic</Text>
  </Pressable>
</View>