Diseño con Flexbox

Flexbox es la forma de acomodar elementos en pantalla en React Native — centrar contenido, crear filas y columnas, agregar espacio entre elementos. Es la única herramienta de diseño que necesitas aprender.

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
  <Text>Perfectamente centrado</Text>
</View>

Diferencias clave con CSS web

Propiedad	Valor por defecto en web	Valor por defecto en React Native
flexDirection	row	column
alignContent	stretch	flex-start
Unidades	px, rem, %, etc.	Números sin unidad

Entendiendo los ejes

Eje principal = la dirección en la que se acomodan los hijos. En React Native, por defecto es column (vertical, de arriba a abajo). Usa flexDirection: "row" para ir horizontal.

Eje cruzado = la otra dirección. Si el eje principal es vertical, el eje cruzado es horizontal, y viceversa.

justifyContent controla el espacio en el eje principal. alignItems controla la alineación en el eje cruzado.

Las propiedades esenciales

Propiedades del contenedor (en el View padre):

<View
  style={{
    flex: 1, // Ocupa todo el espacio disponible
    flexDirection: "row", // Acomoda los hijos horizontalmente
    justifyContent: "space-between", // Espacio en el eje principal
    alignItems: "center", // Alineación en el eje cruzado
    gap: 12, // Espacio entre hijos
  }}
>
  <Text>Izquierda</Text>
  <Text>Derecha</Text>
</View>

Propiedades de los hijos:

<View style={{ flex: 1 }}>   {/* Ocupa 1/3 del espacio */}</View>
<View style={{ flex: 2 }}>   {/* Ocupa 2/3 del espacio */}</View>

Diseños comunes

// Contenido centrado
{ flex: 1, justifyContent: "center", alignItems: "center" }

// Header + contenido + footer
<View style={{ flex: 1 }}>
  <View style={{ height: 60 }}><Text>Header</Text></View>
  <View style={{ flex: 1 }}><Text>Contenido</Text></View>
  <View style={{ height: 60 }}><Text>Footer</Text></View>
</View>

Intenta esto: Crea una fila de tres cajas de colores que compartan el espacio equitativamente usando flex: 1 en cada una.