Creating table layout in React Native app - react-native

Question

I'm trying to create a table layout in my React Native app and I think I'm pretty close but rows seem to spread out over the whole screen. I'd like the table and all its rows to stay at the top of the screen. I tried flex-start but didn't seem to help. Also, notice that I really would like the white background to show in between columns. In my code, all the columns merge into one.
Here's the outcome I'm trying to achieve:
And here's a link to my snack where you can see and play with the code and here's the code as it is now -- see below:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.tableContainer}>
<View style={styles.tableRow}>
<View style={styles.tableColumnHeader}>
<Text style={styles.textHeader}>Monday, February 6, 2021!</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>10:00 AM</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>12:00 PM</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>2 Hrs</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={{...styles.textLineItem, justifyContent: "flex-end"}}>$25.00</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>1:00 PM</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>5:30 PM</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>4.5 Hrs</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={{...styles.textLineItem, justifyContent: "flex-end"}}>$56.25</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnHeader}>
<Text style={styles.textHeader}>Tuesday, February 7, 2021!</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>9:00 AM</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>12:00 PM</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>3 Hrs</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={{...styles.textLineItem, justifyContent: "flex-end"}}>$37.50</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>1:00 PM</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>5:30 PM</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={styles.textLineItem}>4.5 Hrs</Text>
</View>
<View style={styles.tableColumnRegular}>
<Text style={{...styles.textLineItem, justifyContent: "flex-end"}}>$56.25</Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: Constants.statusBarHeight,
backgroundColor: "#ecf0f1",
padding: 8,
},
tableContainer: {
flex: 1,
},
tableRow: {
flex: 1,
flexDirection: "row",
backgroundColor: "white"
},
tableColumnRegular: {
flex: 1,
flexDirection: "column",
backgroundColor: "#c7c7c7",
alignItems: "center",
height: 25,
padding: 2
},
tableColumnHeader: {
flex: 4,
flexDirection: "row",
backgroundColor: "tomato",
height: 25,
alignItems: "center",
justifyContent: "center"
},
textHeader: {
color: "white"
},
textLineItem: {
color: "black"
}
});
I'd appreciate some help with this.

Answer 1

I figured it out. I hope this solution helps others too. Obviously, I changed the colors from the original specs but that would be easy to update if someone else were to use this code.
Here's the link to my snack.
And here's the code:
export default function App() {
return (
<View style={styles.container}>
<View style={styles.tableContainer}>
<View style={styles.tableRowHeader}>
<View style={styles.tableColumnHeader}>
<Text style={styles.textHeader}>Monday, February 8, 2021</Text>
<Text style={styles.textHeaderSubTitle}>(6.5 Hrs)</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnClockInOutTimes}>
<Text style={styles.textLineItem}>10:00 AM - 12:00 PM</Text>
</View>
<View style={styles.tableColumnTotals}>
<Text style={styles.textLineItem}>2 Hrs</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnClockInOutTimes}>
<Text style={styles.textLineItem}>1:00 PM - 5:30 PM</Text>
</View>
<View style={styles.tableColumnTotals}>
<Text style={styles.textLineItem}>4.5 Hrs</Text>
</View>
</View>
<View style={styles.tableRowHeader}>
<View style={styles.tableColumnHeader}>
<Text style={styles.textHeader}>Tuesday, February 9, 2021</Text>
<Text style={styles.textHeaderSubTitle}>(8 Hrs)</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnClockInOutTimes}>
<Text style={styles.textLineItem}>8:30 AM - 12:00 PM</Text>
</View>
<View style={styles.tableColumnTotals}>
<Text style={styles.textLineItem}>3.5 Hrs</Text>
</View>
</View>
<View style={styles.tableRow}>
<View style={styles.tableColumnClockInOutTimes}>
<Text style={styles.textLineItem}>1:00 PM - 5:30 PM</Text>
</View>
<View style={styles.tableColumnTotals}>
<Text style={styles.textLineItem}>4.5 Hrs</Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#000000",
flex: 1,
padding: 10
},
tableColumnHeader: {
alignItems: "center",
backgroundColor: "#1FE0A2",
flex: 5,
justifyContent: "center"
},
tableColumnClockInOutTimes: {
alignItems: "center",
backgroundColor: "#000000",
flex: 3,
justifyContent: "center",
margin: 1
},
tableColumnTotals: {
alignItems: "center",
backgroundColor: "#000000",
flex: 2,
justifyContent: "center",
margin: 1
},
tableRow: {
flex: 5,
flexDirection: "row",
maxHeight: 30
},
tableRowHeader: {
flex: 5,
flexDirection: "row",
maxHeight: 40
},
tableContainer: {
backgroundColor: "#202020",
borderRadius: 5,
flex: 1,
marginTop: 0,
padding: 10
},
textHeader: {
color: "#000000",
fontWeight: "bold"
},
textHeaderSubTitle: {
color: "#000000",
fontSize: 12
},
textLineItem: {
color: "#FFFFFF"
}
});