HomeGuidesReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

Expo Haptics iconExpo Haptics

GitHub

npm

A library that provides access to the system's vibration effects on Android and the haptics engine on iOS.


expo-haptics provides haptic (touch) feedback for

  • iOS 10+ devices using the Taptic Engine
  • Android devices using Vibrator system service.

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

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

Installation

Terminal
npx expo install expo-haptics

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Configuration

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

Usage

Haptics usage
import * as React from 'react';
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)
          }
        />
      </View>
    </View>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%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)

NameTypeDescription
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)

NameTypeDescription
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()

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

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

ImpactFeedbackStyle Values

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.

NotificationFeedbackType

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

NotificationFeedbackType Values

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.