How to Generate Haptic Feedback in React Native
Haptic touch feedback is engineered from applying touch on a phone. Learn how to use haptics feedback in your React Native apps to improve user experience.
Join the DZone community and get the full member experience.Join For Free
Perceived performance is critical in mobile apps. We need to make our apps fast and snappy, otherwise users won’t use them. Adding features like animations and haptic touch feedback makes mobile apps feel more performant. In this article we are going to be talking about Haptic Feedback in React Native – what it is and how can we implement it in mobile apps.
Haptic touch feedback is an engineered feedback from applying touch on a game, console or a smartphone. You know those vibrations from your favorite video games when your character dies or when the ball strikes the bar in FIFA.
At Instamobile, we use haptics feedback in all of our React Native apps, in order to make the user experience snappy and engaging. Take a look at big apps, such as Facebook, Instagram, or Twitter and notice how nice the haptic feedback feels in your hand when you are taking important actions such as likes or follows.
The haptic feedback library we are about to explore in this React Native tutorial is provided by Expo and is called expo-haptics. After exploring the library, we will go ahead and build a tiny application to apply what what we have learnt.
Create a new Expo project
- expo init haptic_feedback_example
- expo install expo-haptics
Now let us explore the methods and their most likely use case, there are three methods provided by this dependency:
a. Haptics.selectionAsync(): This function takes no argument. This call produces a vibration about 1 second after this function has been triggered. This function can be applied when the animation is done. The animation could be initiated by the user or initiated programmatically.
b. Haptics.notificationAsync(type): This function takes an argument type which can be one of the following:
This function could be applied when giving feedback after validation. Regular users of Snapchat are familiar with this vibration on their phone after scanning a Snapchat QR code.
c. Haptics.impactAsync(style): This function also accepts only one argument style which is usually one of three values depending the intensity of the desired feedback:
This function, on invocation, produces a quicker feedback than the selectionAsync and can be used to give instant haptic feedback when a user presses a button. The topping on the cake is that you get to regulate the intensity of the vibration.
Haptic Feedback in React Native
We have our React Native project created already so let’s build a simple project and test the impactAsync method and explore the different haptic feedback styles:
What are we doing in the React Native codebase above?
We create three buttons to represent the three styles of impactAsync. We have this simple screenshot showing the different buttons with their several styles and intensities:
Run the project and start tapping the three buttons alternatively. On close observation you’ll notice the slight differences in intensities ranging from light to medium to heavy.
Let us build a small QR scanner to verify if a resolved QR code is a valid URL.
For this we have to add expo-barcode-scanner provided by Expo.
Let us write up code to scan a random barcode and verify if it’s a valid URL:
What are we doing in the above codebase?
We have to ask for permission first before we go ahead to scan a barcode and then validate the result of the scan to verify whether it’s a URL:
We apply different haptic feedback styles based on whether the scanned barcode URL is valid or not. You would notice the difference in the haptic feedback between scanning a valid URL barcode and an invalid URL barcode.
Conclusion on Haptic Feedback in React Native
We have gone through the expo-haptics library and its possible use-cases. We went ahead to apply what we’ve learned by building a couple of small apps to apply these use cases and get a practical feeling of how these interactions behave.
Adding haptic feedback in React Native apps is pretty straightforward, given that there are libraries out there that can make this task trivial. However, you need to choose carefully when to trigger these haptic feedback interactions, in order to provide a high-quality mobile app. Abusing these vibrations will piss off your users and it will also drain their phone battery pretty quickly, so choose wisely.
For more ideas on mobile performance, check out our article on how to boost performance in mobile apps.
Published at DZone with permission of krissanawatt kaewsanmunag. See the original article here.
Opinions expressed by DZone contributors are their own.