Enable haptic Feedback on react-native touchable view

Question

I an writing a react-native app, And I noticed that while the buttons look like native buttons when clicked - they do not behave as one (At lease not like android button behave).

Clicking on android app button - make a sound and give the user an haptic Feedback. On the sound I saw that there is github discussions and open issue, but I could not found anywhere anything about the haptic Feedback.

How can I make my view (any touchable view..) to make haptic feedback on click? This is really important feeling in an app.

I want something like this (In android)

View view = findViewById(...)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);

This doesn't require from the app to have permission for Vibrate.

And managing haptic feedback on my own with the Vibrate api will cause users that disable this option globally to experience bad behavior

Thanks

Answer 1

If you are using Expo with react-native, I recommend you to use Expo haptics

After installing the library You can use it like:

<TouchableOpacity onPress = { ()=> { 
     Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
     or
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) 
     or
     Haptics.selectionAsync()
   
 } } > </TouchableOpacity>

Answer 2

I found this component on github https://github.com/charlesvinette/react-native-haptic

I didn't try it yet, but it should help you to get the haptic feedback you want.

Answer 3

I published a project on Github which provides this functionality. Check this repo out: react-native-haptic-view

Answer 4

You can use the built-in Vibration module facebook.github.io/react-native/docs/touchablewithoutfeedback

import { Vibration } from 'react-native';
...

<TouchableWithoutFeedback
  onPressIn={() => Vibration.vibrate()}
/>

Remember to include this in your AndroidManifest

<uses-permission android:name="android.permission.VIBRATE" />

Answer 5

I also have nearly the same requirements and I ended up using this library react-native-haptic-feedback.

Keep in mind that haptic feedback is available only on some latest android devices and in iOS above iPhone 6s. Here is a simple code snippet:

import ReactNativeHapticFeedback from "react-native-haptic-feedback";

const options = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false
};

ReactNativeHapticFeedback.trigger("impactMedium", options);

In your case, it will work directly with the button's onPress method such as:

<TouchableOpacity onPress={()=>{ReactNativeHapticFeedback.trigger("impactMedium", options);}} />

Note: I found that the most versatile type which is supported by maximum devices is impactMedium.