Skip to main content
Glama
haptics.md3.93 kB
--- title: Haptics description: 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. sourceCodeUrl: https://github.com/expo/expo/tree/sdk-53/packages/expo-haptics packageName: expo-haptics iconUrl: /static/images/packages/expo-haptics.png platforms: ["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`](./battery.md). - 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](https://caniuse.com/vibration)) - 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 ## Configuration On Android, this library requires permission to control vibration on the device. The `VIBRATE` permission is added automatically. ## Usage ```jsx return ( <View style={styles.container}> <Text style={styles.text}>Haptics.selectionAsync</Text> <View style={styles.buttonContainer}> <Button title="Selection" onPress={() => /* @info */ Haptics.selectionAsync() /* @end */} /> </View> <Text style={styles.text}>Haptics.notificationAsync</Text> <View style={styles.buttonContainer}> <Button title="Success" onPress={ () => /* @info */ Haptics.notificationAsync( Haptics.NotificationFeedbackType.Success ) /* @end */ } /> <Button title="Error" onPress={ () => /* @info */ Haptics.notificationAsync( Haptics.NotificationFeedbackType.Error ) /* @end */ } /> <Button title="Warning" onPress={ () => /* @info */ Haptics.notificationAsync( Haptics.NotificationFeedbackType.Warning ) /* @end */ } /> </View> <Text style={styles.text}>Haptics.impactAsync</Text> <View style={styles.buttonContainer}> <Button title="Light" onPress={ () => /* @info */ Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) /* @end */ } /> <Button title="Medium" onPress={ () => /* @info */ Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) /* @end */ } /> <Button title="Heavy" onPress={ () => /* @info */ Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy) /* @end */ } /> <Button title="Rigid" onPress={ () => /* @info */ Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Rigid) /* @end */ } /> <Button title="Soft" onPress={ () => /* @info */ Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft) /* @end */ } /> </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 ```js ```

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/jaksm/expo-docs-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server