Item occlusion/Render order

[bengy]

Hello, I'm running into some issues with items occluding each other if they overflow their heights. What I'm trying to accomplish is rendering items that can be nested as shown here:

I would like the parent container to wrap around it's children as shown in the image in order for the click animation to be on the hole container. In the example this is done by overflowing the box for the first parent element and adding extra padding to child elements. Each element should still be it's own list item as I would like to add a filter by [all/only parents/only children] and animate between their nested and unnested states.

Current behavior

The list is rendered correclty for the first render but when scrolling I run into render order issues with the children being occluded by the overflowing parent container. Setting the zIndex or elevation does not change the behaviour. See the attached video (note that I switch to flatlist half through the video where the issue does not appear):

https://github.com/Shopify/flash-list/assets/1978709/15a69aae-39a0-4367-9d88-f8cf2b070b34

Expected behavior

Behave like the FlatList or ,if this is just not how it's supposed to work, this difference to the FlatList behaviour could be added to the documentation

To Reproduce

Github link to Expo repro

Platform:

• [x] iOS
• [x] Android

Environment

1.6.4

[phgn0]

So here's what fixed click interactions with absolute overlay content for me.

<FlashList
    ...
    CellRendererComponent={(props) => (
        <View
            {...props}
            style={{
                zIndex: isActiveElement ? 10 : 1,
            }}
        >
            {props.children}
        </View>
    )}
    disableAutoLayout={true} // needed to fix CellRendererComponent
/>

See https://github.com/Shopify/flash-list/discussions/738 Related: https://github.com/Shopify/flash-list/issues/1283