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

score 7 · Answer 1 · edited Oct 11 '19 at 20:46

7

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>

edited Oct 11 '19 at 20:46

Adam

3,815
29
24

answered Jul 28 '19 at 07:49

A.R.Basith

141
1
8

where to put this code and is it similar to 3d touch? – Rami Salim Jul 29 '20 at 06:15

score 2 · Answer 2 · edited Jun 22 '19 at 19:52

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

edited Jun 22 '19 at 19:52

Abraham

8,525
5
47
53

answered May 03 '17 at 16:34

Ivan Wu

232
1
7

1

This does not mimc hapticFeedback feeling. I edited my question to be more specific. – Nadav Nagel May 04 '17 at 08:41
Isn't haptic feedback just vibration on tap? Is you want to change the vibration it takes parameters. – Ivan Wu May 04 '17 at 17:14
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. – Nadav Nagel May 05 '17 at 13:04
The permission thing fixed it for me, thanks Ivan. However it is not working on iOS. Is there some permission to add for iOS? – Noitidart Jun 05 '17 at 04:35
This is why I switched to nativescript which provide 100% native feeling – Toni Joe Mar 17 '18 at 21:52

score 2 · Answer 3 · answered Jul 25 '17 at 19:23

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.

answered Jul 25 '17 at 19:23

David

453
3
14

Umang Loriya · Answer 4 · 2020-01-27T04:11:18.453

2

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.

edited Jan 27 '20 at 04:11

answered Jan 27 '20 at 04:05

Umang Loriya

840
8
15

1

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 https://github.com/junina-de/react-native-haptic-feedback/issues/40 – Chanrithisak Phok Oct 15 '20 at 23:43

score 0 · Answer 5 · answered Jan 18 '19 at 06:17

0

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

answered Jan 18 '19 at 06:17

Hamid

1,948
4
25
38

Enable haptic Feedback on react-native touchable view

5 Answers5

Linked