How to loop images in MasonryList on React-Native

Question

I have a array with photos Url in it.

How can I show this array in masonryList ??

I will retrieve the photo source from the database

  images = [
{
  images: {
    uri:
      'https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg',
  },
},
{
  images: {
    uri:
      'https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg',
  },
},];

  render() {
return (
  <MasonryList
    itemSource={['node', 'image']}
    images={[
      {
        node: this.images.map((prop, key) => {
          return this.images[prop.images];
        }),
      },
    ]}
  />
  // <Text></Text>
);

} }

score 0 · Answer 1 · answered Dec 18 '19 at 12:11

0

Does this help?:

processImagesForMasony(inputImages) {
    var _newArray = inputImages.map(({images}) => {
         return images.uri;
    });

    this.setState({
        imagesForMasonry: _newArray
    });
}

<MasonryList
    images={this.state.imagesForMasonry} 
/>

then you can call processImagesForMasony with your source array when you receive it/it updates.

answered Dec 18 '19 at 12:11

scgough

5,099
3
30
48

I call your function but facing array.map is not a function error.. – Baran Güngör Dec 18 '19 at 12:54

score 0 · Accepted Answer · answered Dec 18 '19 at 13:39

SOLVED I created a js file for my photo datas. Like this

    const data = [
  {
    uri:
      'https://stimg.cardekho.com/images/carexteriorimages/360x240/Ferrari/Ferrari-Portofino/047.jpg',
  },
  {
    uri: 'https://rollr.io/wp-content/uploads/2017/02/mini-home-car.jpg',
  },
  {
    uri:
      'https://www.bmw-speedmotorwagen.in/sites/default/files/styles/nostyle/public/slider_banner_image/2018-02/M4Coupe-Header_Banner_17.jpg?itok=zmJWURhi',
  },
  {
    url:
      'https://img.etimg.com/thumb/msid-67103187,width-1200,height-900,resizemode-4,imgsize-96644/car-getty.jpg',
  },
  {
    uri:
      'https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/vdat/submodels/dodge_challenger_dodge-challenger_2019-1545059179866.jpg',
  },
  {
    uri:
      'https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg',
  },
];
export default data;

Then import to where i use this datas.

import data from './data';

class HomeScreen extends Component {
  render() {
    return <MasonryList images={data} />;
  }
}

glad you solved it. Just to note, your `data` is in a different format to that in your original post (multi-dimensional array). — scgough, Dec 18 '19 at 13:41
i know bro only tested can i get images from dynamic array. thanks for your interest.. — Baran Güngör, Dec 18 '19 at 14:23

How to loop images in MasonryList on React-Native

2 Answers2