expo-haptics provides haptic (touch) feedback for
On iOS, the Taptic engine will do nothing if any of the following conditions are true on a user's device:
[[UIDevice currentDevice] valueForKey: @"_feedbackSupportLevel"] so this is not added in ExpoConstants.platform.ios.systemVersion or Constants.platform.ios.platform| Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
|---|---|---|---|---|
- expo install expo-hapticsIf 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.
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';
Haptics.impactAsync(style)| Name | Type | Description |
|---|---|---|
| style (optional) | ImpactFeedbackStyle | A collision indicator that on iOS is directly mapped to Default: ImpactFeedbackStyle.Medium |
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 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.
Haptics.selectionAsync()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.
ImpactFeedbackStyleThe mass of the objects in the collision simulated by a UIImpactFeedbackGenerator object
UINotificationFeedbackStyle
MediumImpactFeedbackStyle.Medium ＝ "medium"A collision between moderately sized user interface elements.
NotificationFeedbackTypeThe type of notification feedback generated by a UINotificationFeedbackGenerator object.
UINotificationFeedbackType
ErrorNotificationFeedbackType.Error ＝ "error"A notification feedback type indicating that a task has failed.
SuccessNotificationFeedbackType.Success ＝ "success"A notification feedback type indicating that a task has completed successfully.
WarningNotificationFeedbackType.Warning ＝ "warning"A notification feedback type indicating that a task has produced a warning.