claude-code - 💡(How to fix) Fix [BUG] Claude repeatedly fails to produce equal-width table columns in React Native / Tamagui despite explicit instruction [1 participants]

Preflight Checklist

• I have searched existing issues and this hasn't been reported yet
• This is a single bug report (please file separate reports for different bugs)
• 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.

What Should Happen?

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

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