[BUG]: Horizontal LegendList clips items in cross‑axis (height) unless list height is explicitly set (iOS, RN 0.81 / Expo 54)

[gunnartorfis]

When using LegendList horizontally, item views with an explicit height render clipped vertically unless the list itself is given an explicit style.height (or equivalent). The items measure correctly (e.g. 200px height), but the list’s visible height stays small (appears to match padding), so only a strip of the item is visible.

This is reproducible in a minimal Expo project, and the workaround is to measure the first item and set the list height.

Minimum reproducible repo: https://github.com/gunnartorfis/legendlist-horizontal-nested-issue

Steps to reproduce

1. Clone the repo and install deps.
2. Run iOS: npm run ios (or expo run:ios depending on your setup).
3. App renders two sections: “Broken” (clipped) and “Working” (workaround applied)

What you’ll see
In the “Broken” section the red squares should be 200×200 but only a thin strip is visible.

Expected
A horizontal LegendList should size its cross-axis height to fit its children (or otherwise render them fully without requiring style.height).

Workaround
Measure first rendered item and apply style.height:

const [measuredHeight, setMeasuredHeight] = React.useState<number | null>(null);

<LegendList
  horizontal
  estimatedItemSize={VOUCHER_WIDTH}
  estimatedListSize={{ width: windowW, height: 1 }}
  style={measuredHeight != null ? { height: measuredHeight } : undefined}
  renderItem={() => {
    const item = <View style={{ height: 200, width: 200, marginHorizontal: 16, backgroundColor: "red" }} />;
    if (measuredHeight !== null) return item;
    return <View onLayout={e => setMeasuredHeight(e.nativeEvent.layout.height)}>{item}</View>;
  }}
/>