This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

Expo Haptics

A library that provides access to the system's vibration effects on Android, the haptics engine on iOS, and the Web Vibration API on web.

Android

iOS

Web

expo-haptics provides haptic (touch) feedback for:

Android devices using Vibrator system service.
iOS 10+ devices using the Taptic Engine.
Web platforms using the Web Vibration API.

On iOS, the Taptic engine will do nothing if any of the following conditions are true on a user's device:

Low Power Mode is enabled. This can be detected with expo-battery.
User disabled the Taptic Engine in settings.
iOS Camera is active (to prevent destabilization).
iOS dictation is active (to not disturb the microphone input).

On web, the library uses the Web Vibration API. Note the following:

The API must be supported by the browser (check browser compatibility)
The device must have vibration hardware
The user must grant permission to use vibration (usually automatic)
Some browsers may ignore vibration in certain contexts (for example, background tabs)

For more advanced control over haptics, we recommend Pulsar haptics SDK. It lets you create custom haptic patterns, use a wider set of presets, build gesture-based haptics, and run haptics on worklets.

Installation

Terminal

- npx expo install expo-haptics

- yarn expo install expo-haptics

- pnpm expo install expo-haptics

- bun expo install expo-haptics

If you are installing this in an existing React Native app, make sure to install expo in your project.

Configuration

On Android, this library requires permission to control vibration on the device. The VIBRATE permission is added automatically.

Usage

Haptics usage

import { StyleSheet, View, Text, Button } from 'react-native';
import * as Haptics from 'expo-haptics';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Haptics.selectionAsync</Text>
      <View style={styles.buttonContainer}>
        <Button title="Selection" onPress={() => Haptics.selectionAsync()} />
      </View>
      <Text style={styles.text}>Haptics.notificationAsync</Text>
      <View style={styles.buttonContainer}>
        <Button
          title="Success"
          onPress={
            () =>
              Haptics.notificationAsync(
                Haptics.NotificationFeedbackType.Success
              )
          }
        />
        <Button
          title="Error"
          onPress={
            () =>
              Haptics.notificationAsync(
                Haptics.NotificationFeedbackType.Error
              )
          }
        />
        <Button
          title="Warning"
          onPress={
            () =>
              Haptics.notificationAsync(
                Haptics.NotificationFeedbackType.Warning
              )
          }
        />
      </View>
      <Text style={styles.text}>Haptics.impactAsync</Text>
      <View style={styles.buttonContainer}>
        <Button
          title="Light"
          onPress={
            () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
          }
        />
        <Button
          title="Medium"
          onPress={
            () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
          }
        />
        <Button
          title="Heavy"
          onPress={
            () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
          }
        />
        <Button
          title="Rigid"
          onPress={
            () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Rigid)
          }
        />
        <Button
          title="Soft"
          onPress={
            () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft)
          }
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  text: {
    textAlign: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 10,
    marginBottom: 30,
    justifyContent: 'space-between',
  },
});

API

import * as Haptics from 'expo-haptics';

No API data file found, sorry!