Grid layout using flex In React Native - react-native

Question

I am using flex to display some profile.
<View style={styles.flexContainer}>
<View style={styles.profileImgContainer} >
<Image style={styles.profileImg}/>
</View>
<View style={styles.name}>
<Markdown>{user.name}</Markdown>
</View>
</View>
const styles = StyleSheet.create({
flexContainer: {
flexDirection: 'row'
},
...,
});
I want to put Image in center of col1 using row1 and row2.
I want to put Markdown in col2 of row1.
My flex container should look like this.
col1 | col2 |
row1 |______|
| |
row2 ____|______|
How I can do this ?

Answer 1

Output:
Code:
<View style={styles.container}>
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={styles.col1}>
<Image source={{uri: 'https://www.deine-tierwelt.de/magazin/wp-content/uploads/sites/2/2013/10/Australian-Cattle-Dog-1000x570.jpg'}} style={{width: 100, height: 100}} />
</View>
<View style={styles.col2}>
<View style={styles.row1}>
<Text> Username </Text>
</View>
<View style={styles.row2}>
</View>
</View>
</View>
<View style={{flex: 1}} />
</View>
Stylesheet:
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
flexDirection: 'column',
padding: 8,
},
col1: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray'
},
col2: {
flex:1,
flexDirection: 'column'
},
row1: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: 'lightgray'
},
row2: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
backgroundColor: 'darkgray'
}
Demo:
https://snack.expo.io/eoENHOHvq

Answer 2

Check below code
<View style={{ flex: 1, flexDirection: 'row' }}>
{/* column 1 */}
<View style={{ flex: 1, backgroundColor: 'green', justifyContent: 'center', alignItems: 'center' }}>
<Image
style={{ width: 50, height: 50 }}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
</View>
{/* column 2 */}
<View style={{ flex: 1 }}>
{/* row 1 */}
<View style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello</Text>
</View>
{/* row 2 */}
<View style={{ flex: 1, backgroundColor: 'yellow' }}>
</View>
</View>
</View>
Hope this helps you. Feel free for doubts.