Displaying Images from an array of URLs

Question

I'm trying to get some images from firebase storage and display it in a gallery like view.

This is how I retrieved the URLs of uploaded images from firebase:

function listAll() :{ url: string; }[]{
    const storageRef = firebase.storage().ref();
    let listRef = storageRef.child('/');
    const accum: { url: string; }[] = [];

    listRef.listAll() .then((res) => {
      res.prefixes.forEach((folderRef) => {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
      });
      res.items.forEach((itemRef) => {
        itemRef.getDownloadURL().then((url) => {
          console.log(url);
          accum.push({
            url
          })
        })
      });
    }).catch((error) => {
      console.log('Errors while downloading => ', error);
    });
    return accum
  }

This is how I want the images to look like : Example of gallery view

This is my style sheet:

container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: Platform.OS === "android" ? Constants.statusBarHeight:0,
    // alignItems: 'center',
    // justifyContent: 'center',
  },
  imgParent: {
    flex: 1,
    justifyContent: "space-around",
    flexDirection: "row",
    alignItems:"center",
    flexWrap: 'wrap',
    backgroundColor: '#fff',
  },

  imgElements: {
    margin:10,
    width: 150,
    height:150,
  },

I've seen examples of one image however I'm new to JS and TS so I don't seem to be able to figure it out how to render an array of URIs on my own?