How to add Haptic Feedback / Vibrations in react native app?

Question

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.

Answer 1

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