Guías Técnicas

onLongPress en React Native: Detectar pulsaciones largas

  ¿Qué es onLongPress en React Native?

onLongPress es una propiedad que se puede usar en componentes como TouchableOpacity, TouchableHighlight, Pressable, entre otros, para ejecutar una acción cuando el usuario mantiene presionado un elemento durante un período prolongado de tiempo.

Esta propiedad onLongPress recibe una función como valor que se ejecuta cuando el usuario mantiene presionado el componente por un tiempo específico (por defecto, 500 ms). Es útil para acciones como mostrar un menú contextual, realizar una acción secundaria o activar una opción adicional.

👇 Ejemplo básico con TouchableOpacity

El siguiente ejemplo muestra cómo usar onLongPress con un botón:

jsx 
import React from 'react';
import { View, Text, TouchableOpacity, Alert, StyleSheet } from 'react-native';

const EjemploLongPress = () => {

const handleLongPress = () => {
    Alert.alert('¡Pulsación larga detectada!');
  };

return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.boton}
        onLongPress={handleLongPress}
      >
        <Text style={styles.texto}>Mantén presionado</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boton: {
    backgroundColor: '#4CAF50',
    padding: 20,
    borderRadius: 10,
  },
  texto: {
    color: '#fff',
    fontSize: 16,
  },
});

export default EjemploLongPress;
  Explicación

  • onLongPress: Detecta el evento cuando el usuario mantiene presionado el área del Pressable por más de 500 ms.
  • handleLongPress: La función que se ejecuta cuando el evento es disparado (en este caso, muestra una alerta).

  Opciones adicionales

  • delayLongPress: Puedes controlar cuánto tiempo debe transcurrir para que se active el evento onLongPress, con un valor en milisegundos. Si deseas un tiempo más corto o más largo, puedes configurarlo así:

jsx 
<Pressable
  onLongPress={handleLongPress}
  delayLongPress={1000} // 1 segundo
  style={{
    padding: 10,
    backgroundColor: 'skyblue',
    borderRadius: 5,
  }}>
  <Text>¡Mantén presionado!</Text>
</Pressable>

onLongPress es muy útil para proporcionar una interacción adicional o más compleja con los usuarios, más allá de un simple clic o toque.

⚙️ Combinar onPress y onLongPress

Puedes usar ambos eventos en un mismo componente:

jsx 
import React from 'react';
import { View, Text, Alert, TouchableOpacity, StyleSheet } from 'react-native';

const App = () => {
const handlePress = () => {
  Alert.alert('Toque normal');
};

const handleLongPress = () => {
  Alert.alert('Pulsación larga');
};

return (
  <View style={styles.container}>
    <TouchableOpacity
      style={styles.button}
      onPress={handlePress}
      onLongPress={handleLongPress}
      activeOpacity={0.7} // Ajusta la opacidad cuando el botón está presionado
    >
      <Text style={styles.buttonText}>Presióname</Text>
    </TouchableOpacity>
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  button: {
    backgroundColor: '#3498db',
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
    elevation: 3, // Agrega sombra para Android
    shadowColor: '#000', // Agrega sombra para iOS
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 3,
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default App;
  Nota

Usamos View para contener el botón de TouchableOpacity.

El componente TouchableOpacity tiene las propiedades onPress y **onLongPress**, que muestran un Alert dependiendo de la interacción. Botón interactivo que, al ser presionado, muestra una alerta de “Toque normal”, y al mantenerlo presionado, muestra una alerta de “Pulsación larga”.