Rendering two images in one row react native - react-native

Question

I have visited so many websites and read many articles but couldn't find any solution. I want a ui in which each row contains two images. I have done this by adding view tag in every new row but i want to do in in a single View tag. Kindly help
<View style={{ marginTop: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
resizeMode="stretch"
source={require('../assets/images/Home/zinger_ratha.jpg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch', }} />
<Text style={{ fontSize: 18 }}>Zinger Ratha</Text>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
source={require('../assets/images/Home/arabian_delight.png')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch' }} />
<Text style={{ fontSize: 18 }}>Arabian Delight</Text>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
resizeMode="stretch"
source={require('../assets/images/Home/mingle_bucket.jpg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch', }} />
<Text style={{ fontSize: 18 }}>Mingle Bucket</Text>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
source={require('../assets/images/Home/xtreme_box.jpeg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch' }} />
<Text style={{ fontSize: 18 }}>Xtreme Box</Text>
</View>
</View>
</View>
I want like this but in single View tag

Answer 1

You can do the following:
import Dimensions from react-native,
The idea here is to give the View a width of whatever percentage of the phone screen size and then give the image a percentage of the View that would give you what you want.
For example, if I want to display three images in a row, I can give my View a width of 90% and flexWrap: wrap, and give each image inside it a width of 30% so it can only contain 3 images in a row.
You can do the following for your case.
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('screen');
// inside your render or return
<View style={{ width: width * 0.9, display: "flex", flexDirection: "row", flexWrap: "wrap", alignContent: "center", alignItems: "center", justifyContent: "center" }}>
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
</View>
or if you need to put it in a flatlist you can do something like this:
numColumns={2} // you need to specify the number of columns here
<FlatList
style={styles.dashboard}
data={this.categories}
renderItem={this.renderItem}
keyExtractor={item => item.id}
numColumns={2}
/>