Guías Técnicas

Pressable en React Native: Manejo de Interacciones Táctiles

  ¿Qué es Pressable y para qué se usa en React Native?

Pressable es un componente en React Native diseñado para manejar interacciones táctiles de una manera más flexible que otros componentes como TouchableOpacity. Permite agregar varios estados de interacción, como cuando el usuario presiona o mantiene presionado un área, brindando más control sobre las interacciones del usuario.

Estructura básica de Pressable

Pressable se utiliza para envolver un componente y hacer que sea interactivo. Se puede combinar con diversas propiedades para manejar el comportamiento táctil, como cambios de estilo o acciones cuando el área es presionada.

jsx 
import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <Pressable style={styles.button} onPress={() => alert('¡Presionado!')}>
      <Text style={styles.buttonText}>Presiona aquí</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default App;

Propiedades más comunes

  • onPress: Función que se ejecuta cuando el usuario presiona el componente.
  • onPressIn: Función que se ejecuta cuando el usuario comienza a presionar el componente.
  • onPressOut: Función que se ejecuta cuando el usuario deja de presionar el componente.
  • style: Estilos aplicados al componente. Puedes cambiar el estilo basado en la interacción del usuario (por ejemplo, cuando se presiona).
  • android_ripple: Configura el efecto de onda (ripple) cuando se presiona en dispositivos Android.
  • disabled: Si es true, el componente no es interactivo.

🚀 Ejemplo Básico: Botón presionable

Este ejemplo muestra un botón básico que se activa cuando el usuario lo presiona.

jsx 
import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

const App = () => {
return (
  <Pressable 
    style={styles.button} 
    onPress={() => alert('¡Botón presionado!')}>
    <Text style={styles.buttonText}>Presiona aquí</Text>
  </Pressable>
);
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default App;

Cambiar Estilo al Presionar

Pressable permite cambiar dinámicamente el estilo del componente cuando el usuario interactúa con él, usando las propiedades onPressIn y onPressOut.

jsx 
import React, { useState } from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

const App = () => {
const [pressed, setPressed] = useState(false);

return (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <Pressable
      style={[styles.button, pressed && styles.buttonPressed]}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
      onPress={() => alert('¡Botón presionado!')}>
      <Text style={styles.buttonText}>Presiona aquí</Text>
    </Pressable>
    </SafeAreaView>
  </SafeAreaProvider>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent:"center",
    alignContent:"center",
    backgroundColor: '#f5f5f5',
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonPressed: {
    backgroundColor: 'orange',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default App;


🏁 Cambios visuales con android_ripple

En dispositivos Android, Pressable soporta un efecto de onda de estilo ripple que da un feedback visual cuando se presiona el componente.

jsx 
import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

const App = () => {
return (
  <Pressable
    style={styles.button}
    onPress={() => alert('¡Botón presionado!')}
    android_ripple={{ color: 'lightblue' }}
  >
    <Text style={styles.buttonText}>Presiona aquí</Text>
  </Pressable>
);
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default App;

🧑‍💻 Otros Usos Comunes

  • Botones personalizados: Al igual que TouchableOpacity, Pressable se puede usar para crear botones personalizados con una respuesta visual al toque del usuario.
  • Interacciones complejas: Puedes combinar varias funciones como onPressIn, onPressOut y onPress para crear interacciones complejas, como animaciones o cambios de estilo durante el ciclo de vida de la presión.
  • Deshabilitar interacciones: Utiliza disabled para hacer que un componente no sea interactivo cuando sea necesario.

📝 Buenas Prácticas

  • Retroalimentación visual: Es importante dar retroalimentación visual a los usuarios. Usar los eventos onPressIn y onPressOut para cambiar el estilo de los componentes es una forma sencilla de hacerlo.
  • Uso de android_ripple: Aprovecha el efecto ripple en dispositivos Android para mejorar la experiencia de usuario.
  • Deshabilitar con disabled: Utiliza la propiedad disabled para evitar que un componente sea presionado varias veces de forma consecutiva si es necesario.
  Correcto

Pressable es un componente poderoso en React Native que te permite manejar interacciones táctiles con mucho control, como la capacidad de detectar el comienzo y final de un toque, cambiar estilos dinámicamente y aplicar efectos como el ripple. Es ideal para situaciones en las que necesitas una mayor flexibilidad en la interacción del usuario con los elementos de la interfaz.