Expo 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:

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
iOS Camera is active (in order prevent destabilization)

Platform Compatibility

Android Device	Android Emulator	iOS Device	iOS Simulator	Web

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

Name	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)`

Name	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`