Hoy vamos a aprender cómo podemos añadir una respuesta háptica en un botón usando React Native con Expo.
Una respuesta háptica en un botón es una retroalimentación táctil que proporciona un dispositivo cuando presionas un botón o realizas alguna acción táctil sobre él. En lugar de simplemente pulsar un botón y no recibir ningún tipo de respuesta, la respuesta háptica simula una sensación táctil que puede variar en intensidad, duración y tipo de vibración.
Esta tecnología se utiliza para mejorar la experiencia del usuario al interactuar con dispositivos electrónicos, como teléfonos inteligentes, controladores de videojuegos, paneles táctiles, entre otros. Algunos ejemplos de cómo se utiliza la respuesta háptica en un botón incluyen:
- Confirmación de acción: Cuando presionas un botón para realizar una acción en un dispositivo, la respuesta háptica puede simular la sensación de un clic físico, proporcionando una confirmación táctil de que la acción se ha realizado correctamente.
- Emulación de texturas: La respuesta háptica también puede simular diferentes texturas táctiles, como la sensación de presionar un botón físico, deslizar sobre una superficie rugosa o suave, o incluso simular la sensación de movimiento en ciertos juegos.
- Notificaciones y alertas: Los dispositivos pueden utilizar la respuesta háptica para notificar al usuario sobre eventos importantes, como recibir un mensaje, una llamada entrante o una alerta de aplicación. La vibración distintiva puede ayudar al usuario a reconocer la importancia del evento sin tener que mirar la pantalla.
Ahora vamos a ver cómo podemos imeplementarla.
Primero tenemos que instalar la libreria expo-haptics
expo install expo-haptics --save
Una vez instalada, vamos a aplicarla.
Tendremos que añadir esta línea en el evento onclick del botón:
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
Importando antes:
import * as Haptics from 'expo-haptics';
También tenemos distintas respuestas hápticas según la acción:
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
Para ImpactFeedbackStyle tenemos:
Haptics.ImpactFeedbackStyle.Light Haptics.ImpactFeedbackStyle.Medium Haptics.ImpactFeedbackStyle.Heavy
Y para NotificationFeedbackType tenemos:
Haptics.NotificationFeedbackType.Success Haptics.NotificationFeedbackType.Error Haptics.NotificationFeedbackType.Warning
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.