Specifically, I'm trying to get a TouchableOpacity to vibrate the user's device when pressed, and trying to add a vibration when a challenge success modal has been shown in the application.
Note that I do not need to add sound effects to my app, just a vibration.
After some research, there seem to be a few options:
The most simple which requires no external packages is React Native's Vibration module - here's a quick and dirty how to use for touchables or triggered in a callback.
Note that the vibration is in ms, so Vibration.vibrate(100) will vibrate for 1/10th of a second
<TouchableOpacity
onPress={() => {
setModalVisible(true);
Vibration.vibrate(100);
}}
style={{height:50, width: 50, borderRadius:15, backgroundColor:'blue'}
/>
on android devices, youll need to include the haptic app permission in your manifest file by adding the following line
<uses-permission android:name="android.permission.VIBRATE" />
This module also supports stringing together multiple vibrations to create complex patterns of vibrations
here's an example of that:
Vibrates for 500ms
Sleeps (no vibration) for 300ms
Vibrates for 200ms
Sleeps for 100ms
Vibrates for 500ms
Vibration.vibrate([500, 300, 200, 100, 500]);
Worth noting, however, that though this is how it 'should' work, the haptics don't feel all too precise when using the patterns in my experience, and take some trial and error to get the feel right. One of the other haptic feedback options might be better when doing complex vibration patterns...
Other haptic feedback options:
The react-native-haptic-feedback package - this does take some additional configuration for both iOS and android
If you are using Expo, then you can use the Expo Haptics module
You can simply use the react native vibration module.
It's pretty straight forward and easy to implement!
// Import Vibration module
import { Vibration } from "react-native";
// Vibrate device for x miliseconds
Vibration.vibrate(100);