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>
);

} }

Answer 1

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} />;
  }
}