React justifyContent: "space-between" does not work with columns

Question

In my code the bottom Box does not get pushed to the bottom of the screen it just shows below the top Box like in second image.( I dont want to use any libraries)

What i need My result

<View style={{ flex:1 }}>
 <View style={{ justifyContent: "space-between", flexDirection: "row" }}>
     <Box />
     <View style={{ flexDirection: "row" }}>
         <Box />
         <Box />
     </View>
     </View>
     <View style={{ justifyContent: "space-between", flexDirection: "column"}}>
         <Box />
     </View>
</View>

Also if i try to have simple space-between column it does not work, but when i set direction to "row" it works, but it has to be column.

<View style={{ justifyContent: "space-between", flexDirection: "column" }}>
     <Box />
      <Box />
</View>

Answer 1

This is how I Achive this.

import * as React from 'react';
import {  View, StyleSheet } from 'react-native';


const Box =()=>{
  return(<View style={styles.box}></View>)
}
export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.seconCont}>
      <Box/>
      <Box/>
      </View>
      <View style={styles.thirdCont}>
      <Box/>
      <Box/>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:"row",
    backgroundColor:'red'
   
  },
  seconCont:{
    flex: 1,
    flexDirection:"column",
    justifyContent:"space-between",
     backgroundColor:'green'
  },
   thirdCont:{
    flex: 1,
    flexDirection:"row",
    justifyContent:"space-between",
     backgroundColor:'blue'
  },
  box:{
    width:50,
    height:50,
    backgroundColor:"orange",
   
  }
 
});

I have also setup an Snack example. https://snack.expo.dev/4QJYzNJz-