Guías Técnicas

onPress en React Native

  ¿Qué es onPress en React Native?

onPress, es una propiedad (o prop) que se utiliza en componentes interactivos como Button, TouchableOpacity, Pressable, TouchableHighlight, etc. Se usa para detectar cuando el usuario toca o presiona un componente. Es similar a onClick en React para la web.

Ejemplo básico

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

const BotonEjemplo = () => {
const mostrarAlerta = () => {
  Alert.alert('¡Botón presionado!', 'Has hecho tap sobre el botón.');
};

return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.boton} onPress={mostrarAlerta}>
        <Text style={styles.texto}>Presióname</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    alignItems: 'center',
  },
  boton: {
    backgroundColor: '#007bff',
    padding: 15,
    borderRadius: 10,
  },
  texto: {
    color: '#fff',
    fontWeight: 'bold',
  },
});

export default BotonEjemplo;

¿Dónde se usa?

onPress se utiliza en componentes que son interactivos y pueden recibir eventos táctiles. Algunos ejemplos son:

  • TouchableOpacity
  • Pressable
  • Button
  • TouchableHighlight
  • Cualquier componente que soporte eventos táctiles
  Cosas importantes

  • Es una función callback que se dispara cuando el usuario presiona.
  • Puede ser una función anónima o una declarada.
  • También sirve para navegar, mostrar alertas, cambiar estado, etc.

  TIP rápido

Para evitar múltiples taps rápidos, puedes deshabilitar temporalmente el botón o usar TouchableWithoutFeedback junto con lógica adicional.

¿Qué puedo hacer con onPress?

  • Cambiar el estado (useState)
  • Navegar a otra pantalla
  • Ejecutar funciones personalizadas
  • Mostrar modales, alerts, toasts, etc.

Acontinuación, un ejemplo práctico de cómo usar onPress en un componente de React Native: