Estoy atascado con algo que es más fácil de explicar con este código de muestra

 import React from "react"; import { StyleSheet, View } from "react-native"; function App() { return ( <View style={styles.container}> <View style={styles.row}> <View style={styles.square} /> <View style={styles.square} /> <View style={styles.square} /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "white" }, row: { height: 100, flexDirection: "row", backgroundColor: "red", }, square: { aspectRatio: 1, margin: 20, backgroundColor: "green", } }); export default App;

Por el momento, simplemente estoy dibujando 3 cuadrados verdes dentro de una fila roja con una altura fija de 100.

En cada dispositivo, probablemente tendré estos 3 cuadrados seguidos de un "espacio libre" a la derecha. (Foto 1)

Si se aumenta la altura de la fila, se reduce el "espacio libre" de la derecha, hasta el punto en que los cuadrados superan el ancho disponible. (imagen 2)

Ahora, no puedo hacer que estos 3 cuadrados se ajusten automáticamente a la página, dejando el "espacio libre" solo en la parte inferior cuando la altura de la fila es lo suficientemente grande. (imagen 3 y 4)

Podría jugar con onLayout prop o podría hacer algún tipo de cálculo matemático sobre los tamaños de los elementos, pero me gustaría mantenerlo simple y tratar de entender si el problema se puede resolver usando flexbox de la manera correcta.

Un par de imágenes para explicar mejor el escenario:

Por encima de cómo funciona bien saber. la foto 1 esta bien La imagen 2 es algo que no quiero. Cuando la altura de la fila no es suficiente para contener los cuadrados, debería actuar como en las imágenes a continuación.

violín aquí