Height mesurement flaky when list header has `flex: 1`

[zoriya]

What happened?

Every time a view has flex: 1 that should take the full width of a FlatList header, measurement of the height flips between wrapped and non-wrapped mesurements (i suppose because sometimes it measures with an infinite width).

Example screenshots:

Some examples:

Incorect	Correct (it randomly switch between the two)

screen-20260408-192033-1775668814476.2.mp4

Steps to Reproduce

Here's a minimal reproduction, you can see the logs of the measures:

LOG  [LL HEADER] {"h": 263.5555419921875}
LOG  [LL HEADER] {"h": 16}
LOG  [LL HEADER] {"h": 263.5555419921875}
LOG  [LL HEADER] {"h": 16}
LOG  [LL HEADER] {"h": 263.5555419921875}
LOG  [LL HEADER] {"h": 16}
LOG  [LL HEADER] {"h": 263.5555419921875}
LOG  [LL HEADER] {"h": 16}
LOG  [LL HEADER] {"h": 263.5555419921875}
LOG  [LL HEADER] {"h": 16}
LOG  [LL HEADER] {"h": 263.5555419921875}

import { useMemo, } from "react";
import { FlatList, Text, View } from "react-native";

function Header() {
	return (
		<View>
			<View className="my-2 flex-1 flex-row flex-wrap items-center justify-between sm:mx-8">
				<View className="flex-1 flex-row flex-wrap gap-3">
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
				</View>
				<View className="flex-row">
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
					<Text className="dark:text-white">Test</Text>
				</View>
			</View>
		</View>
	);
}

export default function Repro() {
	const data = useMemo(() => [...Array(1000)].map((_, i) => i), []);
	return (
		<FlatList
			data={data}
			ListHeaderComponent={
				<View
					onLayout={(e) => {
						const h = e.nativeEvent.layout.height;
						console.log("[LL HEADER]", { h });
					}}
				>
					<Header />
				</View>
			}
			renderItem={({ index }) => (
				<Text className="h-10 dark:text-white">{`Index ${index}`}</Text>
			)}
		/>
	);
}

Snack or Repository Link

https://github.com/zoriya/uniwind-repro

Uniwind version

1.6.3

React Native Version

0.81.5

Platforms

Android

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none

[Brentlok]

Hey, thanks for reporting this
On the web flex: 1 is a shorthand for

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

But on the native it's

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

And this flex-basis difference was causing the issue, I've already opened a new PR #543 that doesn't parse flex: 1 for separated values

[Brentlok]

https://github.com/uni-stack/uniwind/releases/tag/v1.7.0