I am looking to create an app using React Native and need a list of images to be arranged and displayed just like facebook activity photos.
In short, I want to create the react-native version of https://taras-d.github.io/images-grid/
Does anyone know a RN Component that offers something similar ?
You can create image grid yourself by setting width height for each image and render it in a row.
For example, You want 3 images for 1 row. You can use dimensions to get windows width and divide for 3.
const windowWidth = Dimensions.get('window').width;
var IMAGES_PER_ROW = 3;
calculatedSize(){
var size = windowWidth / IMAGES_PER_ROW
return {width: size, height: size}
}
After that, we will render images in a row.
renderRow(images) {
return images.map((uri,i) =>{
return(
<Image key={i} style={[styles.item, this.calculatedSize()]} source={{uri: uri}} />
);
})
}
renderImagesInGroupsOf(count) {
return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow,i) => {
return (
<View style={styles.row} key={i}>
{this.renderRow(imagesForRow)}
</View>
)
})
}
You can set image grid margin like you want in styles.item like margin: 1.
Full example here