Modelo de Caja en React Native: Margen, Relleno y Bordes

En este artículo exploraremos cómo funcionan las propiedades relacionadas con el modelo de caja (Box Object Model) en React Native. Además, crearemos un ejemplo práctico para ilustrar su uso.

Propiedades del Modelo de Caja

El modelo de caja define cómo los elementos se distribuyen y se relacionan entre sí. En React Native, esto incluye propiedades como margen (margin), relleno (padding) y bordes (border).

Margen (margin)

El margen es el espacio externo que separa un elemento de los demás. React Native ofrece las siguientes propiedades:

• margin: Aplica margen uniforme a todos los lados.
• marginTop: Aplica margen en la parte superior.
• marginBottom: Aplica margen en la parte inferior.
• marginLeft: Aplica margen a la izquierda.
• marginRight: Aplica margen a la derecha.
• marginVertical: Aplica margen tanto en la parte superior como en la inferior.
• marginHorizontal: Aplica margen a ambos lados (izquierda y derecha).

Ejemplo:

style={{
  margin: 10,          // Margen uniforme
  marginHorizontal: 5, // Margen a los lados
  marginVertical: 15,  // Margen arriba y abajo
}}

Relleno (padding)

El relleno es el espacio interno entre el contenido de un elemento y su borde. Sus propiedades son similares a las de margin:

• padding: Aplica relleno uniforme.
• paddingTop: Relleno superior.
• paddingBottom: Relleno inferior.
• paddingLeft: Relleno a la izquierda.
• paddingRight: Relleno a la derecha.
• paddingVertical: Relleno superior e inferior.
• paddingHorizontal: Relleno a los lados.

Ejemplo:

style={{
  padding: 10,             // Relleno uniforme
  paddingVertical: 20,     // Relleno arriba y abajo
  paddingHorizontal: 15,   // Relleno a los lados
}}

Bordes (border)

Las propiedades relacionadas con bordes permiten definir el grosor, color y estilo de los bordes.

• borderWidth: Grosor uniforme de los bordes.
• borderTopWidth: Grosor del borde superior.
• borderBottomWidth: Grosor del borde inferior.
• borderLeftWidth: Grosor del borde izquierdo.
• borderRightWidth: Grosor del borde derecho.
• borderColor: Color del borde.
• borderRadius: Esquinas redondeadas.

Ejemplo:

style={{
  borderWidth: 2,           // Grosor uniforme
  borderColor: 'blue',      // Color del borde
  borderTopWidth: 4,        // Grosor del borde superior
  borderRadius: 10,         // Esquinas redondeadas
}}

Importante: El Padre Define el Tamaño del Hijo

En React Native, el tamaño de un componente hijo está influenciado por las restricciones definidas en el componente padre. Si el padre establece límites como flex o tamaños específicos, el hijo debe ajustarse dentro de ellos.

Ejemplo:

<View style={{ flex: 1 }}>
  <View style={{ height: 50, backgroundColor: 'red' }} />
</View>

En este caso, el elemento rojo tiene una altura fija de 50 dentro del contenedor padre.

Ejemplo Completo: BoxObjectModelScreen

A continuación, implementamos un componente que demuestra el uso de margen, relleno y bordes:

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

export const BoxObjectModel = () => {
  return (
    <View style={styles.container}>
      <View style={styles.purpleBox}>
        <Text style={{ color: 'white' }}>Hola</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e8e8e8',
  },
  purpleBox: {
    backgroundColor: 'purple',
    height: 30,
    marginVertical: 50, // Margen superior e inferior
    marginHorizontal: 10, // Margen izquierdo y derecho
    padding: 5, // Relleno interno
  },
});

Explicación del Código

• Contenedor (container): Es el padre con flex: 1 para ocupar toda la pantalla.
• Caja Morada (purpleBox): Demuestra el uso de márgenes y relleno.
  • marginVertical y marginHorizontal definen los márgenes.
  • padding ajusta el espacio interno.
  • La propiedad height fija la altura.