nativeStyleMapping crashes with "true.split is not a function" when mapping value is the boolean shorthand (e.g. TextInput textAlign)

[telanflow]

Summary

nativeStyleMapping() in src/native/styles/index.ts assumes every mapping value is a dot-path string and calls path.split("."). However, the NativeStyleMapping type — and the built-in components shipped by this package — allow the value to be the boolean shorthand true (meaning "map onto a native prop with the same name"). When such a mapped style is actually present, (true).split throws TypeError: undefined is not a function during render.

Same root cause as #232 / #288 — filing with a precise root-cause trace and a one-line fix that I've verified locally via a patch.

Affected built-in components

Components that ship a boolean-shorthand nativeStyleMapping crash as soon as the mapped style is applied:

• components/TextInput.tsx → { textAlign: true } — triggered by text-right / text-center / text-left
• components/ImageBackground.tsx → { backgroundColor: true } — triggered by any bg-*

(ActivityIndicator / Button use { color: "color" }, a string path, so they don't hit this.)

Reproduction

import { TextInput } from "react-native-css/components"; // or via nativewind v5
<TextInput className="text-right" value="x" onChangeText={() => {}} />

Render → TypeError: undefined is not a function.

Note it only crashes when the mapped style is actually present: when textAlign is absent, styleValue === undefined short-circuits via continue, which is why text-left-less inputs render fine and the crash looks intermittent.

Root cause

src/native/styles/index.ts:

for (const [key, path] of Object.entries(config.nativeStyleMapping)) {
  const styleValue = source[key];
  delete source[key];
  if (styleValue === undefined) {
    continue;
  }
  let target = props;
  const tokens = path.split(".");   // path === true  ->  true.split is not a function
  ...
}

useNativeCss.ts casts value.nativeStyleMapping as Record<string, string>, but the runtime value is { textAlign: true }, so path is the boolean true.

Suggested fix

Treat true as the same-name shorthand (target prop named key), matching the true | DotNotation type:

const tokens = (typeof path === "string" ? path : key).split(".");

Environment

• react-native-css 3.0.7 (latest)
• nativewind 5.0.0-preview.3
• react-native 0.85.3 / React 19.2.3
• Hermes, iOS

Related: #232, #288, #251

[github-actions]

🤖 Auto-triage

Status: CONFIRMED
Type: bug
Version: v5 (react-native-css 3.0.7)

Findings

Reproduced. nativeStyleMapping in src/native/styles/index.ts:507 calls path.split(".") unconditionally, but the NativeStyleMapping type permits true as a shorthand and the shipped TextInput ({ textAlign: true }) and ImageBackground ({ backgroundColor: true }) components use it. As soon as the mapped style is present, render throws TypeError: path.split is not a function.

What I tested

• Read src/native/styles/index.ts and confirmed the unguarded path.split(".") on line 507.
• Verified src/components/TextInput.tsx ships { textAlign: true } and src/components/ImageBackground.tsx ships { backgroundColor: true }.
• Wrote a Jest test rendering <TextInput className="text-right" value="x" /> with text-align: right registered; it crashed with the exact error: TypeError: path.split is not a function at src/native/styles/index.ts:507:25 (stack: nativeStyleMapping → useNativeCss → useCssElement → TextInput).

Next steps

• The reporter's suggested fix is correct and minimal: const tokens = (typeof path === "string" ? path : key).split("."); — this matches the documented true | DotNotation type semantics.
• Add regression tests covering both TextInput (textAlign) and ImageBackground (backgroundColor) under src/__tests__/native/.
• Worth auditing other nativeStyleMapping consumers (and the as Record<string, string> cast in useNativeCss.ts) for similar type/runtime mismatches.
• Related prior reports: [V5] - TextInput crashes when using "text-center" or "text-right" or "text-left" in NativeWind v5 (react-native-css: path.split is undefined) #232, nativeStyleMapping crashes when value is boolean (path.split is not a function) #288, Fixing Issue with text classes from TW 5 #251.

---

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