Guías Técnicas

TouchableOpacity en React Native: Área Táctil con Retroalimentación Visual

  ¿Qué es TouchableOpacity y para qué se usa?

TouchableOpacity es un componente en React Native que permite crear áreas táctiles en la interfaz. Cuando el usuario toca un elemento, la opacidad del mismo disminuye, proporcionando una retroalimentación visual que indica que el elemento ha sido presionado. Es comúnmente utilizado para crear botones.

Estructura básica de TouchableOpacity

TouchableOpacity envuelve un componente y lo convierte en táctil. Puedes agregarle una acción al evento onPress para manejar interacciones del usuario.

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

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

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 área táctil.
  • activeOpacity: Controla el nivel de opacidad cuando el elemento está siendo presionado. El valor debe estar entre 0 y 1, donde 1 es opaco y 0 es completamente transparente.
  • style: Estilos aplicados al componente, que pueden incluir propiedades como padding, borderRadius, etc.
  • disabled: Si es true, el componente no será interactivo y no reaccionará a los toques.

🚀 Botón con retroalimentación visual

Este ejemplo muestra cómo usar TouchableOpacity para crear un botón que se vuelve ligeramente transparente cuando se presiona.

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

const App = () => {
  return (
    <TouchableOpacity 
      style={styles.button} 
      activeOpacity={0.7}  // Establece la opacidad cuando se presiona
      onPress={() => alert('¡Botón presionado!')}
    >
      <Text style={styles.buttonText}>Presiona aquí</Text>
    </TouchableOpacity>
  );
};

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

export default App;

Ejemplo: Deshabilitar el botón

En este ejemplo, el botón se desactiva después de ser presionado, evitando que el usuario interactúe con él nuevamente.

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

const App = () => {
  const [disabled, setDisabled] = useState(false);

  const handlePress = () => {
    setDisabled(true);
    alert('¡Botón deshabilitado!');
  };

  return (
    <TouchableOpacity 
      style={styles.button} 
      onPress={handlePress}
      disabled={disabled}  // El botón no es interactivo después de ser presionado
    >
      <Text style={styles.buttonText}>Presiona aquí</Text>
    </TouchableOpacity>
  );
};

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: Puedes usar TouchableOpacity para crear botones con cualquier diseño personalizado, como iconos, texto, imágenes, etc.
  • Navegación: Utiliza TouchableOpacity para navegar entre pantallas en tu aplicación, como en un componente de menú.
  • Acciones de confirmación: Es común usarlo en diálogos o mensajes de confirmación, donde el usuario puede tocar para aceptar o cancelar.
  • Controles multimedia: Puedes usarlo para crear controles de reproducción, pausa, avance rápido, etc., en aplicaciones de música o video.
  • Interacciones en listas: En listas o tablas, puedes usar TouchableOpacity para hacer que cada elemento sea interactivo, permitiendo al usuario seleccionar o editar elementos de la lista.
  Resumen

TouchableOpacity es un componente en React Native que permite crear áreas táctiles con un efecto de opacidad, proporcionando retroalimentación visual al usuario cuando interactúa con el elemento. Es comúnmente utilizado para crear botones y áreas de interacción en las interfaces de usuario. Su uso simple y flexible lo convierte en una excelente opción para manejar interacciones táctiles en aplicaciones móviles.