Guides
Plan-enterprise-icon
Expo Application Services
API Reference

Haptics

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:
  • Low Power Mode is enabled (Feature Request)
  • User disabled the Taptic Engine in settings (Feature Request)
  • Haptic engine generation is too low (less than 2nd gen) - Private API
    • Using private API will get your app rejected: [[UIDevice currentDevice] valueForKey: @"_feedbackSupportLevel"] so this is not added in Expo
  • iOS version is less than 10 (iPhone 7 is the first phone to support this)
    • This could be found through: Constants.platform.ios.systemVersion or Constants.platform.ios.platform

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-failed-icon

Installation

Terminal
→ expo install expo-haptics

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

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

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',
  },
});

import * as Haptics from 'expo-haptics';

NameTypeDescription
style
(optional)
ImpactFeedbackStyleA 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}.

  • Undo-iconPromise<void>

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

NameTypeDescription
type
(optional)
NotificationFeedbackTypeA 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}.

The kind of notification response used in the feedback.

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

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

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

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

ImpactFeedbackStyle.Heavy = "heavy"

A collision between large, heavy user interface elements.

ImpactFeedbackStyle.Light = "light"

A collision between small, light user interface elements.

ImpactFeedbackStyle.Medium = "medium"

A collision between moderately sized user interface elements.

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

NotificationFeedbackType.Error = "error"

A notification feedback type indicating that a task has failed.

NotificationFeedbackType.Success = "success"

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

NotificationFeedbackType.Warning = "warning"

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