Question 232109 in React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search