Add Haptic Feedback (Vibration) to a Button in Your React Native App with Expo

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes
Today we are going to learn how we can add haptic feedback to a button using React Native with Expo.

Haptic feedback on a button is tactile feedback provided by a device when you press a button or perform some touch action on it. Instead of simply pressing a button and not receiving any response, haptic feedback simulates a tactile sensation that can vary in intensity, duration, and type of vibration.

This technology is used to enhance the user experience when interacting with electronic devices, such as smartphones, game controllers, touch panels, among others. Some examples of how haptic feedback is used on a button include:

  1. Action confirmation: When you press a button to perform an action on a device, haptic feedback can simulate the feeling of a physical click, providing tactile confirmation that the action has been performed correctly.
  2. Texture emulation: Haptic feedback can also simulate different tactile textures, such as the feeling of pressing a physical button, sliding over a rough or smooth surface, or even simulating the sensation of movement in certain games.
  3. Notifications and alerts: Devices can use haptic feedback to notify the user about important events, such as receiving a message, an incoming call, or an app alert. The distinctive vibration can help the user recognize the importance of the event without having to look at the screen.

Now let’s see how we can implement it.

First, we need to install the expo-haptics library

expo install expo-haptics --save

Once installed, we will apply it.

We will need to add this line to the button’s onclick event:

Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

Importing beforehand:

import * as Haptics from 'expo-haptics';

We also have different haptic feedback responses depending on the action:

Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);

For ImpactFeedbackStyle we have:

Haptics.ImpactFeedbackStyle.Light
Haptics.ImpactFeedbackStyle.Medium
Haptics.ImpactFeedbackStyle.Heavy

And for NotificationFeedbackType we have:

Haptics.NotificationFeedbackType.Success
Haptics.NotificationFeedbackType.Error
Haptics.NotificationFeedbackType.Warning
Post Views: 45

Leave a Comment