Make nested flexbox child take all height

Question

In react native, I am trying to make the flex "columns" inside the rows take up the whole height but can't accomplish it. I tried using 'alignItems: "stretch"' but that did not work either.

Here's a live preview: https://snack.expo.dev/@mccafe/fd9368

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

export default function App() { 
  threeByThree = {
    rowCount:3,
    columnCount:3,
  }
  return (    
      <SafeAreaView style={styles.safeAreaView}>
      {
        Array(threeByThree["rowCount"]).fill(null).map((value, rowIndex) => (        
          <View style={styles.rowContainer}>              
            <View key={rowIndex} style={rowIndex==0?styles.rowOne:(rowIndex==1?styles.rowTwo:styles.rowThree)}>              
              <View style={{flexDirection:"row"}}>
              {Array(threeByThree["columnCount"]).fill(null).map((value, columnIndex) => (                                           
                <View key={columnIndex} style={columnIndex==0?styles.columnOne:(columnIndex==1?styles.columnTwo:styles.columnThree)}>              
                  <Text>{columnIndex}</Text>{console.log(rowIndex, columnIndex)}
                </View>                                          
              ))}
              </View>                          
            </View>
          </View>            
        ))
      }    
      </SafeAreaView>
  )  
}
const styles = StyleSheet.create({
  safeAreaView: {    
    flex:1,
    width:"100%", 
    height:"100%",
    backgroundColor:"orange"
  },
  rowContainer: {            
    flex:1,
    backgroundColor:"white",
    flexDirection:"column",
    alignItems: "stretch",
    alignSelf: "stretch",    
  },
  rowOne: {            
    flex:1,
    alignSelf: "stretch",    
    backgroundColor:"blue"
  },
  rowTwo: {        
    flex:1,        
    backgroundColor:"lightblue",
    alignItems: "stretch",    
    alignSelf: "stretch",    
  },
  rowThree: {            
    flex:1,    
    backgroundColor:"darkblue",    
  },
  columnContainer: {    
    flex:1,
    backgroundColor:"lightgreen",
    width:"100%",
    height:"100%",    
    alignItems: "stretch",    
    flexDirection:"row"
  },
  columnOne: {                
    flex:1,    
    backgroundColor:"red",  
    height:"100%",      
    alignItems: "center",    
    alignSelf: "center",    
  },
  columnTwo: {
    flex:1,       
    backgroundColor:"yellow",    
  },
  columnThree: {            
    flex:1,
    backgroundColor:"green",    
  },
})

In react native, I am trying to make the flex "columns" inside the rows take up the whole height but can't accomplish it. I tried using 'alignItems: "stretch"' but that did not work either.