diff --git a/src/__tests__/vendor/tailwind/typography.test.tsx b/src/__tests__/vendor/tailwind/typography.test.tsx index 00d184b7..ef8de294 100644 --- a/src/__tests__/vendor/tailwind/typography.test.tsx +++ b/src/__tests__/vendor/tailwind/typography.test.tsx @@ -282,6 +282,16 @@ describe("Typography - Text Align", () => { props: { style: { textAlign: "justify" } }, }); }); + test("text-start", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { textAlign: "left" } }, + }); + }); + test("text-end", async () => { + expect(await renderCurrentTest()).toStrictEqual({ + props: { style: { textAlign: "right" } }, + }); + }); }); describe("Typography - Text Color", () => { diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index 9ca2aab8..ec762310 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -2446,6 +2446,16 @@ export function parseTextAlign( { value }: DeclarationType<"text-align">, builder: StylesheetBuilder, ) { + // React Native has no logical `start`/`end` for textAlign. On it + // resolves `left`/`right` against the writing direction, so they already + // behave as the logical values and the mapping can happen at compile time. + // treats them as physical: facebook/react-native#45255 + if (value === "start") { + return "left"; + } else if (value === "end") { + return "right"; + } + const allowed = new Set(["auto", "left", "right", "center", "justify"]); if (allowed.has(value)) { return value;