Multi Column and Rows Flex Box issue in React Native - css

Question

I'm having and Issue with Flex Box I'm trying to get this type of Grid View:
And I have tried a bunch of positions without any luck, the last one I tried is:
return (
<>
<View style={styles.container}>
<View style={styles.column}>
<View style={styles.row}>
<View style={[styles.box, { backgroundColor: 'yellow' }]} />
</View>
</View>
<View style={styles.column}>
<View style={[styles.box, { backgroundColor: 'green' }]} />
<View style={[styles.box, { backgroundColor: 'lightblue' }]} />
</View>
<View style={styles.space_between_columns} />
<View style={styles.column}>
<View style={[styles.box, { backgroundColor: 'grey' }]} />
<View style={[styles.box, { backgroundColor: 'purple' }]} />
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
row: {
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center',
height:200,
width:50
},
column: {
flexDirection:'column',
justifyContent:'space-between',
alignItems:'center',
height:200,
width:50
},
space_between_columns:{
width:100
},
box: {
height:50,
width:50
}
});
But instead of giving me the Top Section where I want it, it puts it like this:
Any Ideas?
Kind Regards

Answer 1

Working App: Expo Snack
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.header}>
<Text style={styles.text}>Header</Text>
</View>
<View style={{ padding: 10, flex: 1 }}>
<View style={styles.topSection}>
<Text style={styles.text}>Top Section</Text>
</View>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.leftColumn}>
<Text style={styles.text}>Left Column</Text>
</View>
<View style={styles.rightColumn}>
<Text style={styles.text}>Right Column</Text>
</View>
</View>
<View
style={{
height: 70,
flexDirection: 'row',
}}>
<View style={styles.subLeft}>
<Text style={styles.text}>Sub Left</Text>
</View>
<View style={styles.subRight}>
<Text style={styles.text}>Sub Right</Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'start',
backgroundColor: 'black',
},
header: {
height: 100,
backgroundColor: 'lightblue',
justifyContent: 'center',
},
topSection: {
height: 70,
backgroundColor: 'yellow',
justifyContent: 'center',
},
leftColumn: {
flex: 1,
backgroundColor: 'green',
justifyContent: 'center',
},
rightColumn: {
flex: 1,
backgroundColor: 'lightblue',
justifyContent: 'center',
},
subLeft: {
flex: 1,
backgroundColor: 'grey',
justifyContent: 'center',
},
subRight: {
flex: 1,
backgroundColor: 'purple',
justifyContent: 'center',
},
text: {
alignSelf: 'center',
color: 'black',
fontWeight: '800',
fontSize: 20,
},
});