6-Creando Componentes Reutilizables en React Native

 

Creando Componentes Reutilizables en React Native

¡Bienvenido de nuevo! Ya conoces los componentes principales de React Native (View, Text, Image, etc.). Ahora, aprenderás a anidarlos y combinarlos para crear componentes personalizados y reutilizables, la esencia del paradigma de React.

¿Por Qué Crear Componentes Personalizados?

• Reutilización: Evita repetir código.

• Mantenibilidad: Cambios centralizados en un solo lugar.

• Legibilidad: Jerarquía clara de UI.

---

Ejemplo: Creando un "Card" Personalizado

Imagina que quieres mostrar tarjetas (Card) con un título, descripción y botón en tu app. En lugar de escribir el mismo código múltiples veces, puedes crear un componente Card y reutilizarlo.

Paso 1: Define el Componente

Crea un archivo Card.js:

javascript

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

const Card = ({ title, description, onPress }) => {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.description}>{description}</Text>
      <Button title="Acción" onPress={onPress} />
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    margin: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // Para Android
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  description: {
    fontSize: 14,
    color: '#666',
  },
});

export default Card;

Paso 2: Úsalo en tu App

javascript

import React from 'react';
import { View } from 'react-native';
import Card from './Card';

const App = () => {
  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Card
        title="Tarjeta 1"
        description="Esta es una descripción de ejemplo."
        onPress={() => alert('¡Acción!')}
      />
      <Card
        title="Tarjeta 2"
        description="Otra tarjeta reutilizable."
        onPress={() => alert('¡Segunda acción!')}
      />
    </View>
  );
};

export default App;

Resultado:
https://via.placeholder.com/300x200/EFEFEF/333333?text=Card+Example (Reemplaza con una imagen real de tu componente)

---

Ventajas de este Enfoque

1. Props dinámicas: Personaliza cada instancia del componente (title, description).

2. Estilos encapsulados: El CSS vive dentro del componente.

3. Fácil escalabilidad: Añade más props (ej: color, icon) sin modificar el código que lo usa.

---

Conclusión

Crear componentes personalizados es la clave para desarrollar apps eficientes y organizadas en React Native. Ahora imagina lo que puedes hacer:

• Header con logo y menú.

• ProductItem para un e-commerce.

• Comment para una red social.

🧠 Desafío: Crea un componente <CustomButton> que acepte color y text como props. ¡Compártelo en los comentarios!

En el próximo post, exploraremos hooks personalizados para lógica reutilizable. ¡No te lo pierdas!