I have the following code:

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

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row_1}>
        <View style={styles.square} />
      </View>
      <View style={styles.row_2}>
        <View style={styles.square} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  row_1: {
    flex: 1,
    backgroundColor: "red",
    alignItems: "center",
    padding: 10
  },
  row_2: {
    flex: 5,
    backgroundColor: "blue",
    alignItems: "center",
    //flexDirection: 'row',
    padding: 10
  },
  square: {
    flex: 1,
    aspectRatio: 1,
    backgroundColor: "white"
  }
});

export default App;

I'm trying to insert a white square in the center of the rows, without knowing a priori the height and the width of the rows. In the example, on a 4:3 phone, the first row is larger then higher and the second row higher than larger.

The square in the first row is correct, but the square in the second row exceeds the margins. I can manually set flexDirection: 'row' in the row_2 to achieve the expected result, but just because I know the container is higher than larger. How can I achieve the same result, without specifing the flex direction?

Sandbox here