Guía rápida para dominar Flexbox en React Native

---

Los patrones de diseño son soluciones generales y reutilizables a problemas comunes que se presentan en el desarrollo de software.

Regla base en React Native

En React Native, Flexbox es el sistema de diseño por defecto. Esto significa que todos los componentes se comportan como elementos flexibles. Esto permite que los elementos se ajusten automáticamente al espacio disponible en la pantalla.

<View style={{ flexDirection: 'row' }}>...</View>

• flexDirection: 'row' → elementos uno al lado del otro (horizontal)
• flexDirection: 'column' → elementos uno debajo del otro (vertical) (es el valor por defecto)

Propiedades clave de Flexbox en React Native

Flexbox tiene varias propiedades que permiten controlar la disposición de los elementos, y aquí hay una tabla con las más importantes:

Ejemplos prácticos

1. column - Columnas (Uno debajo del otro - (vertical))

Esta es la forma más común de usar Flexbox en React Native. El contenedor principal tiene la propiedad flexDirection: 'column'.

<View style={{ flexDirection: 'column' }}>
<View style={{ height: 50, backgroundColor: 'red' }} />
<View style={{ height: 50, backgroundColor: 'blue' }} />
</View>

2. row - Fila (uno al lado del otro (horizontal))

Permite alinear los elementos en una fila. En este caso, el contenedor principal tiene la propiedad flexDirection: 'row'.

<View style={{ flexDirection: 'row' }}>
<View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
<View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />
</View>

3. space-between - Uno a la izquierda y otro a la derecha

Esto es útil para crear un diseño donde los elementos se distribuyen uniformemente a lo largo del eje principal.

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text>Izquierda</Text>
<Text>Derecha</Text>
</View>

4. center - Centrado total (vertical y horizontal)

Propiedad alignItems para centrar los elementos en el eje cruzado y justifyContent para centrar en el eje principal.

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>¡Centrado!</Text>
</View>

5. flex - Tamaño dinámico con flex

La propiedad flex permite que los elementos dentro de un contenedor ocupen el espacio disponible de manera proporcional.

<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 2, backgroundColor: 'red' }} />
<View style={{ flex: 1, backgroundColor: 'blue' }} />
</View>

El rojo ocupará 2/3 del espacio y el azul 1/3.

6. item - Lista estilo “item” (📷 imagen + texto + ícono ➡️)

Este es un ejemplo de cómo crear un diseño de lista con una imagen, texto y un ícono a la derecha.

<View style={{
flexDirection: 'row',
alignItems: 'center',
padding: 10,
backgroundColor: '#f0f0f0',
}}>
<Image
  source={{ uri: 'https://via.placeholder.com/40' }}
  style={{ width: 40, height: 40, borderRadius: 20, marginRight: 10 }}
/>
<View style={{ flex: 1 }}>
  <Text style={{ fontSize: 16 }}>Título del ítem</Text>
</View>
<Text style={{ fontSize: 20, color: '#aaa' }}>›</Text>
</View>