This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 52).
Expo HapticsA library that provides access to the system's vibration effects on Android, the haptics engine on iOS, and the Web Vibration API on 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
- npx expo install expo-hapticsIf you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.
Configuration
On Android, this library requires permission to control vibration on the device. The VIBRATE permission is added automatically.
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
| Parameter | Type | Description |
|---|---|---|
| style(optional) | ImpactFeedbackStyle | A collision indicator that on Android is simulated using Default: ImpactFeedbackStyle.Medium |
Promise<void>A Promise which fulfils once native size haptics functionality is triggered.
| Parameter | Type | Description |
|---|---|---|
| type(optional) | NotificationFeedbackType | A notification feedback type that on Android is simulated using Default: NotificationFeedbackType.Success |
The kind of notification response used in the feedback.
Promise<void>A Promise which fulfils once native size haptics functionality is triggered.
| Parameter | Type |
|---|---|
| type | AndroidHaptics |
Use the device haptics engine to provide physical feedback to the user.
Promise<void>Used to let a user know when a selection change has been registered.
Promise<void>A Promise which fulfils once native size haptics functionality is triggered.
Enums
AndroidHaptics.Clock_Tick ＝ "clock-tick"The user has pressed either an hour or minute tick of a Clock.
AndroidHaptics.Confirm ＝ "confirm"A haptic effect to signal the confirmation or successful completion of a user interaction.
AndroidHaptics.Context_Click ＝ "context-click"The user has performed a context click on an object.
AndroidHaptics.Drag_Start ＝ "drag-start"The user has started a drag-and-drop gesture. The drag target has just been "picked up".
AndroidHaptics.Gesture_End ＝ "gesture-end"The user has finished a gesture (for example, on the soft keyboard).
AndroidHaptics.Gesture_Start ＝ "gesture-start"The user has started a gesture (for example, on the soft keyboard).
AndroidHaptics.Keyboard_Press ＝ "keyboard-press"The user has pressed a virtual or software keyboard key.
AndroidHaptics.Keyboard_Release ＝ "keyboard-release"The user has released a virtual keyboard key.
AndroidHaptics.Long_Press ＝ "long-press"The user has performed a long press on an object that results in an action being performed.
AndroidHaptics.Reject ＝ "reject"A haptic effect to signal the rejection or failure of a user interaction.
AndroidHaptics.Segment_Frequent_Tick ＝ "segment-frequent-tick"The user is switching between a series of many potential choices. For example, minutes on a clock face or individual percentages. This constant is expected to be very soft, so as not to be uncomfortable when performed a lot in quick succession. If the device can't make a suitably soft vibration, then it may not make any vibration.
AndroidHaptics.Segment_Tick ＝ "segment-tick"The user is switching between a series of potential choices. For example, items in a list or discrete points on a slider.
AndroidHaptics.Text_Handle_Move ＝ "text-handle-move"The user has performed a selection/insertion handle move on text field.
AndroidHaptics.Toggle_Off ＝ "toggle-off"The user has toggled a switch or button into the off position.
AndroidHaptics.Toggle_On ＝ "toggle-on"The user has toggled a switch or button into the on position.
AndroidHaptics.Virtual_Key ＝ "virtual-key"The user has pressed on a virtual on-screen key.
The mass of the objects in the collision simulated by a UIImpactFeedbackGenerator object
UINotificationFeedbackStyle.
ImpactFeedbackStyle.Medium ＝ "medium"A collision between moderately sized user interface elements.
ImpactFeedbackStyle.Rigid ＝ "rigid"A collision between user interface elements that are rigid, exhibiting a small amount of compression or elasticity.
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.