Skip to content

fix: handle boolean true in nativeStyleMapping#323

Open
danstepanov wants to merge 1 commit intomainfrom
fix/native-style-mapping-boolean
Open

fix: handle boolean true in nativeStyleMapping#323
danstepanov wants to merge 1 commit intomainfrom
fix/native-style-mapping-boolean

Conversation

@danstepanov
Copy link
Copy Markdown
Member

Summary

  • nativeStyleMapping allows true as a value (e.g. textAlign: true on TextInput, backgroundColor: true on ImageBackground), meaning "extract this property from style and set it as a prop with the same name"
  • The runtime called path.split(".") which throws TypeError on boolean true
  • Fixed by converting true to the key name during config creation in useNativeCss, so the runtime always receives strings

Test plan

  • Added 3 tests: boolean mapping extracts prop, works alongside other styles, works on custom styled() components
  • Full suite passes (1043 passed, 0 failures)

Fixes #232
Supersedes #251

@YevheniiKotyrlo
Copy link
Copy Markdown
Contributor

Thanks for picking this up! One small thing that might be worth an extra test: src/components/ImageBackground.tsx also uses the true form (backgroundColor: true), so the same crash reproduces on <ImageBackground className="bg-*">, not just TextInput. Issue #232 only mentioned TextInput, and the tests here cover TextInput + a custom styled() — adding an ImageBackground case would lock in the second shipped wrapper that hits this path.

@danstepanov danstepanov moved this to Ready for Release in Roadmap Apr 15, 2026
When nativeStyleMapping uses `true` (e.g. `textAlign: true`), the value
should be treated as the key name itself. Previously, `true.split(".")`
would throw a TypeError at runtime, breaking TextInput and
ImageBackground components that use this pattern.

Converts boolean `true` values to the key name during config creation
in useNativeCss so the runtime always receives strings.

Fixes #232
@danstepanov danstepanov force-pushed the fix/native-style-mapping-boolean branch from 6b4c0c8 to 72c2f6a Compare April 15, 2026 06:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Ready for Release

Development

Successfully merging this pull request may close these issues.

[V5] - TextInput crashes when using "text-center" or "text-right" or "text-left" in NativeWind v5 (react-native-css: path.split is undefined)

2 participants