[QUESTION] Implementing this within a FlatList component

To Do First

• Take a look in the README
• Take a look in the docs

Ask your Question Thanks for this great tool. I am using it within a feed post system, similar to Facebook. I use a <FlatList> to render each post, and then each post uses its own <MasonryList> with the photos from that post. However, the images don’t appear in a grid. They appear one atop the other. I have tried with several different options, and have also tried with your basic example, with the same result.

Works (shows images as grid):

import MasonryList from "react-native-masonry-list";
//...
render() {
  return (
    <MasonryList
      images={[
        { source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } },
        { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
        { URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg",
            id: "blpccx4cn" },
        { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
        { URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
      ]}
    />
  );
}
//...

Doesn’t work (shows images one atop the other):

import MasonryList from "react-native-masonry-list";
//...
render() {
  return (
    <FlatList
      data={posts}
      renderItem={({ item }) => {
        return (
          <MasonryList
            images={[
              { source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } },
              { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
              { URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg",
                  id: "blpccx4cn" },
              { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
              { URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
            ]}
          />
        );
      }}
    />
  );
}
//...

Do you have any ideas on what might be causing this issue?

Thanks very much.

Tags FlatList, single column

[GitHubGreg]

Your code works, but it uses columns={1}, so the images are one atop the other.

If I change it to columns={2} then it doesn’t show them in a grid as expected, it shows them one atop the other, in half the screen:

For the record, these are the photos of @Luehang, not mine!

[GitHubGreg]

Sorry @jasminmesada I meant to write they were the photos of @Luehang 😃 I’ve corrected the comment.