flex, flexDirection React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}></View>
      <View style={styles.box2}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "yellow",
  },
  box1: {
    backgroundColor: "gray",
    flex: 1,
  },
  box2: {
    backgroundColor: "bisque",
    flex: 1,
  },
});

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <View style={styles.child4}></View>
        <View style={styles.child5}></View>
      </View>
      <View style={styles.box2}>
        <View style={styles.child1}></View>
        <View style={styles.child2}></View>
        <View style={styles.child3}></View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "yellow",
    // flexDirection: "column", //varsayılan
    flexDirection: "column",
  },
  box1: {
    backgroundColor: "gray",
    flex: 1,
    flexDirection: "row",
  },
  child4: {
    flex: 1,
    backgroundColor: "#ec4c4c",
  },
  child5: {
    flex: 1,
    backgroundColor: "aqua",
  },
  box2: {
    backgroundColor: "bisque",
    flex: 1,
    flexDirection: "row",
  },
  child1: {
    flex: 1,
    backgroundColor: "#ffc107",
  },
  child2: {
    flex: 2,
    backgroundColor: "#0ac556",
  },
  child3: {
    flex: 1,
    backgroundColor: "#4630eb",
  },
});