Skip to content

fix: map text-align start/end to left/right for RN compatibility - #397

Open
mubeess wants to merge 1 commit into
nativewind:mainfrom
mubeess:fix/text-start-end-logical-values
Open

fix: map text-align start/end to left/right for RN compatibility#397
mubeess wants to merge 1 commit into
nativewind:mainfrom
mubeess:fix/text-start-end-logical-values

Conversation

@mubeess

@mubeess mubeess commented Jul 30, 2026

Copy link
Copy Markdown

Summary

Tailwind CSS v4 generates text-align: start and text-align: end for the text-start and text-end utility classes. These are CSS logical values that depend on writing direction.

React Native's textAlign prop does not support start or end values — only auto, left, right, center, and justify. Previously, these values were silently dropped (returned undefined with a warning).

Fix

  • start → mapped to left
  • end → mapped to right

This matches the LTR default behavior and is a pragmatic fallback since React Native doesn't support direction-aware text alignment.

Files Changed

File Change
src/compiler/declarations.ts Add startleft and endright mapping in parseTextAlign
src/__tests__/vendor/tailwind/typography.test.tsx Add text-start and text-end tests

Testing

  • yarn test: 1053 passed (1051 existing + 2 new)
  • yarn lint: clean
  • yarn typecheck: clean

Checklist

  • Tests pass
  • Lint passes
  • Typecheck passes
  • No breaking changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant