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

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)

Installation

Terminal

- npx 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,
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 10,
    marginBottom: 30,
    justifyContent: 'space-between',
  },
});

API

import * as Haptics from 'expo-haptics';

Methods

`Haptics.impactAsync(style)`

Android

iOS

Web

Parameter	Type	Description
style(optional)	`ImpactFeedbackStyle`	A collision indicator that on iOS is directly mapped to `UIImpactFeedbackStyle`, while on Android these are simulated using Vibrator. You can use one of `Haptics.ImpactFeedbackStyle.{Light, Medium, Heavy}`. Default:`ImpactFeedbackStyle.Medium`

Returns:

Promise<void>

A Promise which fulfils once native size haptics functionality is triggered.

`Haptics.notificationAsync(type)`

Android

iOS

Web

Parameter	Type	Description
type(optional)	`NotificationFeedbackType`	A notification feedback type that on iOS is directly mapped to UINotificationFeedbackType, while on Android these are simulated using Vibrator. You can use one of `Haptics.NotificationFeedbackType.{Success, Warning, Error}`. Default:`NotificationFeedbackType.Success`

The kind of notification response used in the feedback.

Returns:

Promise<void>

A Promise which fulfils once native size haptics functionality is triggered.

`Haptics.selectionAsync()`

Android

iOS

Web

Used to let a user know when a selection change has been registered.

Returns:

Promise<void>

A Promise which fulfils once native size haptics functionality is triggered.

Enums

`ImpactFeedbackStyle`

Android

iOS

Web

The mass of the objects in the collision simulated by a UIImpactFeedbackGenerator object UINotificationFeedbackStyle

`Heavy`

ImpactFeedbackStyle.Heavy ＝ "heavy"

A collision between large, heavy user interface elements.

`Light`

ImpactFeedbackStyle.Light ＝ "light"

A collision between small, light user interface elements.

`Medium`

ImpactFeedbackStyle.Medium ＝ "medium"

A collision between moderately sized user interface elements.

`Rigid`

ImpactFeedbackStyle.Rigid ＝ "rigid"

A collision between user interface elements that are rigid, exhibiting a small amount of compression or elasticity.

`Soft`

ImpactFeedbackStyle.Soft ＝ "soft"

A collision between user interface elements that are soft, exhibiting a large amount of compression or elasticity.

`NotificationFeedbackType`

Android

iOS

Web

The type of notification feedback generated by a UINotificationFeedbackGenerator object. UINotificationFeedbackType

`Error`

NotificationFeedbackType.Error ＝ "error"

A notification feedback type indicating that a task has failed.

`Success`

NotificationFeedbackType.Success ＝ "success"

A notification feedback type indicating that a task has completed successfully.

`Warning`

NotificationFeedbackType.Warning ＝ "warning"

A notification feedback type indicating that a task has produced a warning.