React Native flex not giving height to component - css

Question

I'm trying to create something like this:
The sections labeled with Dates, Time are where my the data from my dates and timeSpan will go. The red area is where my calendar would be placed.
I have been trying to fit Views to look like tables, but it has not been working out so well. Here's my code:
<ScrollView>
<View>...</View>
<View **
style={{
marginHorizontal: 10,
marginTop: 10,
flex: 1,
borderColor: Colors.separatorColor,
borderWidth: StyleSheet.hairlineWidth}}>
<View style={{
flex: 1,
flexDirection: 'row',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#EDEDED'}}>
<View style={{1, backgroundColor: '#ff0000'}}/>
{
dates.map((date, i) => {
<View key={i} style={{
flex:1,
backgroundColor: '#00fff0',
borderRightColor: '#EDEDED',
borderRightWidth: StyleSheet.hairlineWidth}}>
<Text>{date}</Text>
</View>
})
}
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
</View>
{
timeSpan.map((time,i) => {
<View style={{
flex: 1,
flexDirection: 'row',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#EDEDED'}}>
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
<View style={{flex: 1, backgroundColor: '#ff0000'}}/>
</View>
})
}
</View>
<View>...</View>
</ScrollView>
The <View>...</View> is the code for Other Stuff that will just make my question look much longer so I cut it out. I'm trying to make the <View>s look like a table which have dates.length columns and timeSpan.length rows.
The issue right now is that nothing appears on my screen when I give flex: 1 to my View that I marked in the code with **. However, if I give it a fixed height such as height: 260, then I get one big fat red box instead of seeing many Views that would make up my custom calendar.
I have put in static data to dates and timeSpan and checked by logging that the iterations are done over these arrays so I am confident that the rows and columns are being created but they are not shown on the screen.
How would I resolve this issue which I believe is caused by the flex values?
EDIT:
here's a snack example of my app:
<div data-snack-id="#ohnu93/tenacious-marshmallows" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>