border-s-* and border-e-* compile to style props React Native does not support

[danstepanov]

Split out from nativewind/nativewind#1737, which was reported against v4 with a narrower symptom. The v5 version is broader.

All logical border utilities are silent no-ops on native. The compiler maps border-inline-start-color to borderInlineStartColor, and border-s-1 produces borderInlineStartWidth and borderInlineStartStyle. None of these props exist in React Native. RN 0.81 ships logical inline props only for margin, padding, and inset. For borders it has borderStartColor, borderEndColor, borderStartWidth, and borderEndWidth, which are RTL aware. Unknown style keys get dropped by the view config filter, so nothing renders and nothing warns.

Verified by compiling .x { border-inline-start-color: red; } through the current compiler, which emits borderInlineStartColor, and by checking RN 0.81 view configs for the supported prop names. There is no remapping in the runtime either.

Fix should go in the declaration parsers in src/compiler/declarations.ts (the border-inline-* entries around lines 120 to 131): emit border-start-color, border-end-color, border-start-width, and border-end-width so they camelCase to the real RN logical props. Border style has no per-side RN equivalent, so the inline style declarations should fold into borderStyle or be dropped.

Note the existing tests in src/__tests__/vendor/tailwind/borders.test.tsx currently assert the invalid names (border-s-1 expects borderInlineStartWidth: 1), so they pass while the behavior is broken. Expectations need to change with the fix.

The v4 issue is narrower and separate: only var() based custom colors fail there, because unparsedPropertyMapping in react-native-css-interop lacks the border inline entries that the parsed path has. That fix stays in the v4 branch.

[github-actions]

🤖 Auto-triage

Status: CONFIRMED
Type: bug
Version: v5

Findings

Confirmed. The declaration mapper in src/compiler/declarations.ts:121-131 emits borderInlineStartColor, borderInlineStartWidth, borderInlineEndColor, and borderInlineEndWidth — none of which are valid React Native 0.81 style props. RN's supported logical border props are borderStartColor, borderStartWidth, borderEndColor, borderEndWidth. The unknown keys get silently dropped by the view config filter, so border-s-* / border-e-* render nothing with no warning.

What I tested

• Fetched issue body and existing labels
• Read src/compiler/declarations.ts around lines 100–150 to confirm the mapping
• Read src/__tests__/vendor/tailwind/borders.test.tsx and verified the existing tests at lines 54–66 and 117–127 lock in the broken output (borderInlineStartWidth, borderInlineEndWidth, plus borderInlineStartStyle / borderInlineEndStyle)
• Wrote a Jest reproduction against registerCSS for border-inline-start-color, border-inline-start-width, border-inline-end-color, border-inline-end-width; all four asserted the RN-supported names and all four failed with the compiler emitting the borderInline* variants instead

Next steps

• Update the border-inline-start-* / border-inline-end-* entries in src/compiler/declarations.ts to emit border-start-* / border-end-* (so they camelCase into the RN logical props)
• Border style has no per-side RN equivalent — fold the inline -style declarations into borderStyle or drop them
• Update the tailwind vendor tests in src/__tests__/vendor/tailwind/borders.test.tsx (border-s-1, border-e-1, border-s-2, border-e-2, and the border-inline-color case at line 235) to assert the corrected output

---

_{This is an automated triage. See auto-triage.yml.}