✨ ¡Excelente momento para conectar! Estoy disponible para tu próximo proyecto. No más esperas ni complicaciones. Te ofrezco desarrollo ágil, comunicación clara y resultados que superan expectativas. Conversemos sobre cómo puedo impulsar tu idea.

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).