overrideItemLayout is not adjusting item span across columns

[mmosayed]

Current behavior

Hey I am trying to increase the amount a certain item is spanning across the columns. Here is the example of my code:

export const ViewTypes = {
  HALF_WIDTH: 0,
  FULL_WIDTH: 1,
};

const ListContainer = (props) => {
  const [ listData, setListData ] = useState([]);

  useEffect(() => {
    setListData(ListManager.get());
  }, []);

  const _renderItem = ({ item, index }) => {    
    const height = ITEM_HEIGHT;

    switch (item.type) {
      case ViewTypes.HALF_WIDTH:
        return (
          <HalfWidthView 
            height={height}
          />
        );
      case ViewTypes.FULL_WIDTH:
        return (
          <FullWidthView 
            height={height}
          />
        );
      default:
        return (
          <HalfWidthView
            height={height}
          />
        );
    }
  }

  _getItemType = (item) => {
    return item.type;
  }

  _overrideItemLayout = (layout, item, index, maxColumns) => {
    layout.size = ITEM_HEIGHT;
    layout.span = index === 0 ? 2 : 1;
  }

  return (
    <>
      <MasonryFlashList
        data={listData}
        renderItem={_renderItem}
        estimatedItemSize={ITEM_HEIGHT}
        numColumns={2}
        optimizeItemArrangement={true}
        overrideItemLayout={_overrideItemLayout}
      />
    </>
  );
};

export default  ListContainer;

Here is an example of the output:

Expected behavior

I am expecting the blue box to take up 2 columns span. So the top row would be full width of the screen and allow the blue box to take up that space. The rest of the "half width" items will naturally wrap to the next row.

To Reproduce

It seems doing the following is not working:

 _overrideItemLayout = (layout, item, index, maxColumns) => {
    layout.size = ITEM_HEIGHT;
    layout.span = index === 0 ? 2 : 1;
 }

Platform:

• [ X] iOS
• [ X] Android

Environment

"@shopify/flash-list": "^1.4.0",

[fortmarek]

As mentioned here, we don't currently support this since we could easily end up with gaps between items. I will still keep this opened as I agree we should document this and remove that prop from the MasonryFlashList.

[Nantris]

I think that instead MasonryFlashList should support the prop. Gaps between items are acceptable - but we've already implemented MasonryFlashList and now we'll have to revert all the relevant commits to undo it?

I'd rather an imperfect solution to scrapping hours of work. Is there any hope for that?

We're just trying to achieve two simple headings in the layout, like this:

[Nantris]

I don't understand why it's not supported since it's used in the source code? https://github.com/Shopify/flash-list/blob/main/src/MasonryFlashList.tsx

And even this comment mentions it being used:

flash-list/src/MasonryFlashList.tsx

Lines 49 to 52 in bdf570d

	/**
	* If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order.
	* `overrideItemLayout` is required to make this work.
	*/

Can we somehow use patch-package to make this work for us, even if the Shopify team doesn't care to support it?

[mmosayed]

As mentioned here, we don't currently support this since we could easily end up with gaps between items. I will still keep this opened as I agree we should document this and remove that prop from the MasonryFlashList.

Hey @fortmarek thanks for the reply! Does this mean this column span is possible with regular FlashList?

Do you have any documentation or example showing how to support Rows with different column spans? Example, Row 1: Full Width Item, Row 2: Half Width Item, Half Width Item, Row 3: Full Width Item

[Nantris]

@mmosayed I was playing around with it. What you're asking for it possible without masonry mode, but not easily as far as I can see. I Can't really advise how to do it - I can only say that I accidentally achieved it while trying to patch the code to make overrideItemLayout (or something like it) work.

In that case it will look like this though, where the brackets are blocks. There can only be a single block per row:

[             ]
[    ]
[         ]
[    ]
[         ]
[         ]

Also see #587

I'm surprised that achieving the layout you shared is so difficult.

[l2aelba]

Still not possible right?

[Nantris]

It's still not possible :(

[Nantris]

Is there any interest from the maintainers in supporting this use case? It would be enormously helpful.

Or even just a suggestion of how to hack it to display an item in the leftmost column while keeping the space to the right of it empty to emulate a full-width item. Of course, such a hack would fail if the item needed to show a background color across the entire screen, but it would be great for text labels, headings, etc.

[tbosch82]

+++ for implementing this or offering a workaround. Loving Flashlist and the masonry layout, but lack of support here is disappointing!

[mahjiang]

Also +++, would really like to see this added since we too are really appreciating flashlist and masonry

[smspasha]

Hi, any update on this?