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-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.
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.
ImpactFeedbackStyle
The mass of the objects in the collision simulated by a UIImpactFeedbackGenerator object
UINotificationFeedbackStyle
Medium
ImpactFeedbackStyle.Medium = "medium"
A collision between moderately sized user interface elements.
NotificationFeedbackType
The type of notification feedback generated by a UINotificationFeedbackGenerator object.
UINotificationFeedbackType
Error
NotificationFeedbackType.Error = "error"
A notification feedback type indicating that a task has failed.
Success
NotificationFeedbackType.Success = "success"
A notification feedback type indicating that a task has completed successfully.
Warning
NotificationFeedbackType.Warning = "warning"
A notification feedback type indicating that a task has produced a warning.