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

Mei

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>

Ericaericaceous

where to put this code and is it similar to 3d touch? – Personable

Answer 2

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" />

Gerber

This does not mimc hapticFeedback feeling. I edited my question to be more specific. – Mei

Isn't haptic feedback just vibration on tap? Is you want to change the vibration it takes parameters. – Gerber

I know, and the constant for android is Vibration.vibrate(3). But this mean I need to handle it on my own - different for each OS, plus to check what the user android global settings are. I would have thought that this will be a something that react-native platform will take care of. – Mei

The permission thing fixed it for me, thanks Ivan. However it is not working on iOS. Is there some permission to add for iOS? – Jess

This is why I switched to nativescript which provide 100% native feeling – Eggett

Answer 3

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.

Mayan

Answer 4

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.

Godgiven

If anyone having trouble of without getting any haptics from React Native on version > 0.60 on any iOS devices that support haptics feedback, just go to your React Native project directory on the XCode folder structure (on the top-left handside of XCode) => Go to Build Phases tabs (on the top middle of the XCode screen) => dropdown Link BIrary with Libraries => Add by click on (+ Drag to reorder linked binaries) => search for "libRNReactNativeHapticFeedback.a => add it. Then stop running and re-run your project or github.com/junina-de/react-native-haptic-feedback/issues/40 – Tondatone

Answer 5

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

Boanerges