Flexbox en React Native

React Native usa Flexbox como sistema de layout, igual que CSS, pero con una diferencia crucial: el flex-direction por defecto es "column" (vertical) en lugar de "row" (horizontal) como en CSS web. Esto tiene sentido para mobile donde el layout principal es vertical (como leer un documento).

Para crear layouts horizontales (una fila de botones, una grilla) cambias flexDirection a "row". El modelo mental es el mismo que CSS Flexbox, solo con ese cambio de default.

No hay grid layout en React Native, pero Flexbox resuelve casi todo. Para layouts de grilla (como una galería de fotos en 2 columnas), usas FlatList con numColumns.

Para distribución de espacio, flex: 1 funciona igual que en CSS: un hijo con flex: 1 ocupa todo el espacio disponible, dos hijos con flex: 1 se dividen el espacio a la mitad. La propiedad alignItems y justifyContent funcionan exactamente igual que en CSS Flexbox.

import { View, Text, StyleSheet } from "react-native";

// Flexbox en React Native
export default function LayoutEjemplos() {
  return (
    <View style={styles.container}>
      {/* Row horizontal */}
      <View style={styles.fila}>
        <View style={[styles.caja, { backgroundColor: "red" }]} />
        <View style={[styles.caja, { backgroundColor: "green" }]} />
        <View style={[styles.caja, { backgroundColor: "blue" }]} />
      </View>
      
      {/* Centrado */}
      <View style={styles.centrado}>
        <Text>Centrado</Text>
      </View>
      
      {/* Space between */}
      <View style={styles.espaciado}>
        <Text>Inicio</Text>
        <Text>Medio</Text>
        <Text>Fin</Text>
      </View>
      
      {/* flex: 1 - ocupa todo el espacio disponible */}
      <View style={{ flex: 1, backgroundColor: "#1a1a2e" }}>
        <Text style={{ color: "white" }}>Ocupa todo el espacio</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: "#0A0F1E",
  },
  fila: {
    flexDirection: "row",     // Horizontal
    justifyContent: "center", // Eje principal
    alignItems: "center",     // Eje cruzado
    gap: 8,                   // Separación
  },
  caja: {
    width: 50,
    height: 50,
    borderRadius: 4,
  },
  centrado: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  espaciado: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: 16,
  },
});