A library that provides access to the system's vibration effects on Android and the haptics engine on iOS.
GitHub
npm
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:
expo-battery
.-
npx expo install expo-haptics
If 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.
On Android, this library requires permission to control vibration on the device. The VIBRATE
permission is added automatically.
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',
},
});
import * as Haptics from 'expo-haptics';
Haptics.impactAsync(style)
Parameter | 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)
Parameter | 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
ImpactFeedbackStyle Values
Medium
ImpactFeedbackStyle.Medium = "medium"
A collision between moderately sized user interface elements.
Rigid
ImpactFeedbackStyle.Rigid = "rigid"
A collision between user interface elements that are rigid, exhibiting a small amount of compression or elasticity.
Soft
ImpactFeedbackStyle.Soft = "soft"
A collision between user interface elements that are soft, exhibiting a large amount of compression or elasticity.
NotificationFeedbackType
The type of notification feedback generated by a UINotificationFeedbackGenerator object.
UINotificationFeedbackType
NotificationFeedbackType Values
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.