[BUG] Claude repeatedly fails to produce equal-width table columns in React Native / Tamagui despite explicit instruction

Preflight Checklist

• [x] I have searched existing issues and this hasn't been reported yet
• [x] This is a single bug report (please file separate reports for different bugs)
• [x] I am using the latest version of Claude Code

What's Wrong?

escription

When asked to build a data table with evenly distributed, equal-width columns in a React Native + Tamagui codebase, Claude consistently used flex={1} on Stack / Text children of an XStack. It was told multiple times that the columns were visually unequal, and each time it either re-applied the same broken pattern or introduced a new variation (textAlign="center", Stack flex={1} alignItems="center") that still failed.

Root cause (known)
In React Native, flex={1} distributes remaining space proportionally but does not guarantee equal widths when the parent has no fixed width constraint. textAlign="center" on a Text centers text within the element's natural width, not within the flex column. Neither pattern reliably produces equal-width columns.

Working solution (took ~10 attempts to reach)
Use explicit percentage widths — width="25%" for a 4-column table — on every cell in both the header and data rows.

Expected behaviour
Claude should know that width="XX%" is the correct React Native primitive for equal-width table columns, and should use it on the first attempt rather than requiring the user to send screenshots proving the columns are misaligned.

<img width="920" height="254" alt="Image" src="https://github.com/user-attachments/assets/d00390f5-18f0-469e-bfc1-a3ac3e1a93ab" />

What Should Happen?

Claude should have been able to create a table with equal widths.

<img width="940" height="282" alt="Image" src="https://github.com/user-attachments/assets/a43a979a-61ef-4c32-8b31-354398857711" />

Error Messages/Logs

Steps to Reproduce

Open a React Native + Tamagui project (Expo web or device)
Ask Claude to build a data table with evenly distributed columns, e.g.:
"Build a 4-column history table in React Native using Tamagui. All columns should be the same width and all text should be centered in each cell."

Observe that Claude generates something like:
<XStack>
<Text flex={1} textAlign="center">Month</Text>
<Text flex={1} textAlign="center">Subscription</Text>
<Text flex={1} textAlign="center">Extra</Text>
<Text flex={1} textAlign="center">Rollover</Text>
</XStack>
Run the app — columns will be visually unequal widths, with each column sized to its content
Tell Claude the columns are not equal. Observe it suggest Stack flex={1} alignItems="center" wrappers — still unequal
Tell Claude again. Observe it re-apply the same broken patterns with minor variations
Show Claude a screenshot with red debug borders confirming unequal widths
Only at this point does Claude arrive at width="25%" — the correct solution
Expected result at step 3: Claude generates width="25%" on each cell from the start

Actual result: Requires ~8–10 iterations and a debug screenshot to reach the correct solution

Claude Model

Sonnet (default)

Is this a regression?

I don't know

Last Working Version

_No response_

Claude Code Version

1.3883.0

Platform

Anthropic API

Operating System

macOS

Terminal/Shell

Terminal.app (macOS)

Additional Information

_No response_