Guías Técnicas

Cómo usar el componente Button en React Native

  ¿Qué es el componente Button en React Native?

El componente Button te permite crear botones simples y funcionales en tu app.
Es uno de los elementos más usados para generar interacción con el usuario, como enviar formularios, abrir pantallas o disparar acciones.

Usar el componente Button

Este es un ejemplo básico de cómo utilizar un botón:

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

// Componente funcional MiBoton
const MiBoton = () => {
  // Función que se ejecuta al presionar el botón
  const manejarClick = () => {
    Alert.alert("¡Haz hecho clic en el botón!");
  };

  // Renderiza el botón
  return (
    <View style={styles.contenedor}>
      <Button title="Haz clic aquí" onPress={manejarClick} color="#1e90ff" />
    </View>
  );
};

// Estilos para el contenedor
const styles = StyleSheet.create({
  contenedor: {
    flex: 1, // Ocupa todo el espacio disponible
    justifyContent: "center", // Centra verticalmente
    alignItems: "center", // Centra horizontalmente
    padding: 10,
  },
});

export default MiBoton;
  Detalles del código

  • title: Texto que se muestra dentro del botón.
  • onPress: Función que se ejecuta cuando se presiona el botón.
  • color: Propiedad para cambia el color del botón (solo en Android).
  • Alert.alert(): Es un componente nativo de React Native que muestra un mensaje emergente (ideal para pruebas rápidas).

Limitaciones del componente Button

El componente Button en React Native es nativo, simple y con opciones limitadas de personalización. Si necesitas mayor control sobre el estilo (como bordes, íconos o sombras), considera usar alternativas como:

  • TouchableOpacity
  • Pressable
  • Librerías como react-native-paper, react-native-elements, etc.

Alternativa personalizada con TouchableOpacity

Puedes usar TouchableOpacity para crear un botón más estilizado:

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

// Componente funcional MiBoton
const MiBoton = () => {
  // Función que se ejecuta al presionar el botón
  const manejarClick = () => {
    alert("¡Haz hecho clic en el botón!");
  };

  // Renderiza el botón
  return (
    <TouchableOpacity style={styles.botonPersonalizado} onPress={manejarClick}>
      <Text style={styles.textoBoton}>Haz clic aquí</Text>
    </TouchableOpacity>
  );
};

// Estilos para el botón
const styles = StyleSheet.create({
  botonPersonalizado: {
    backgroundColor: 'crimson',
    padding: 12,
    borderRadius: 25,
  },
  textoBoton: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center',
  },
})

export default MiBoton;

Componente TouchableOpacity en React Native

  Detalles del código

  • TouchableOpacity: Permite crear botones con estilos personalizados.
  • style: Propiedad para aplicar estilos al botón.
  • padding: Espacio interno del botón.
  • borderRadius: Bordes redondeados del botón.
  • Text: Componente para mostrar texto dentro del botón.
  • textAlign: Alineación del texto dentro del botón.

Componente Button en React Native

  Detalles del código

  • Button: Componente nativo de React Native para crear botones.
  • title: Texto que se muestra dentro del botón.
  • onPress: Función que se ejecuta cuando se presiona el botón.
  • color: Propiedad para cambia el color del botón (solo en Android).