React Native FlatList - Variable columns

Question

I am developing a infinitely scrolling list of products which contain different types of products. A product can be featured or not featured. When a product is featured, we have a product card design that takes up the full width of the phone, otherwise the design calls for a 2 column row

The data looks something like this:

[
  {
    "type": "featured-product",
    "name": "Product",
    "description: "yadda yadda"
  },
  {
    "type": "product",
    "name": "Another Product",
    "description: "yadda yadda"
  },
  {
    "type": "product",
    "name": "And Another Product",
    "description: "yadda yadda"
  },
  {
    "type": "product",
    "name": "One more Product",
    "description: "yadda yadda"
  }
  {
    "type": "product",
    "name": "Yet another",
    "description: "yadda yadda"
  },
  {
    "type": "featured-product",
    "name": "This one's Featured though",
    "description: "yadda yadda"
  }
]

For example, the list would look something like this:

--------------
|            |
|  Featured  |
|            |
--------------
|     ||     |
| Not || Not |
|     ||     |
--------------
|     ||     |
| Not || Not |
|     ||     |
--------------
|            |
|  Featured  |
|            |
--------------
|     ||     |
| Not || Not |
|     ||     |
--------------
|     ||     |
| Not || Not |
|     ||     |
--------------

However, with the FlatList component, I'm not having luck achieving this design's layout.

• Adding styles to each respective item flex: 1 on full width and flex: 0.5 on double column doesn't allow for wrapping columns and always displays a single column row
• Setting the numColumns prop to 2 displays the products somewhat properly, but causes issues with the full width featured item.
• Thought about chunking the items by 2 and having them represent one item, but that's proving to require much more overhead while using Flow

I was venturing down the path of using a FlatList for the performance benefits, but I'm starting to think it might not be suited for the layout that I require.

Has anyone solved this before?

Answer 1

As far as I know FlatList renders each item in data on its own row. The desired behavior of what you ask is not possible unless you manipulate the native side to create a desired behavior component.

I think your best/easiest way to go is third option. What you can do I think somehow manipulate your data being rendered and group every other "not featured" items in two and get them rendered together.

For Example

renderItem({item}) {
  if (item.notFeatured === true) return <NotFeaturedRow data={item.items} />
  else return <FeaturedRow data={item} />
}

const data = [
  {
    "type": "featured-product",
    "name": "Product",
    "description: "yadda yadda"
  },
  {
    notFeatured: true, 
    items: [
      {
        "type": "product",
        "name": "Another Product",
        "description: "yadda yadda"
     },
     {
        "type": "product",
        "name": "And Another Product",
        "description: "yadda yadda"
      }    
    ]
  },
  {
    notFeatured: true, 
    items: [
      {
        "type": "product",
        "name": "Another Product",
        "description: "yadda yadda"
     },
     {
        "type": "product",
        "name": "And Another Product",
        "description: "yadda yadda"
      }    
    ]
  },
  {
    "type": "featured-product",
    "name": "This one's Featured though",
    "description: "yadda yadda"
  }
]

Answer 2

Just use RecyclerListView instead. It is faster than FlatList and battle tested at Flipkart. It supports staggered layouts.

Link: https://github.com/Flipkart/ReactEssentials

You can read more about it here: https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef